1# @strudel/embed
2
3This package contains a embeddable web component for the Strudel REPL.
4
5## Usage via Script Tag
6
7Use this code in any HTML file:
8
9```html
10<script src="https://unpkg.com/@strudel/embed@latest"></script>
11<strudel-repl>
12  <!--
13setcps(1)
14n("<0 1 2 3 4>*8").scale('G4 minor')
15.s("gm_lead_6_voice")
16.clip(sine.range(.2,.8).slow(8))
17.jux(rev)
18.room(2)
19.sometimes(add(note("12")))
20.lpf(perlin.range(200,20000).slow(4))
21-->
22</strudel-repl>
23```
24
25This will load the strudel website in an iframe, using the code provided within the HTML comments `<!-- -->`.
26The HTML comments are needed to make sure the browser won't interpret it as HTML.
27
28Alternatively you can create a REPL from JavaScript like this:
29
30```html
31<script src="https://unpkg.com/@strudel/embed@1.0.2"></script>
32<div id="strudel"></div>
33<script>
34  let editor = document.createElement('strudel-repl');
35  editor.setAttribute(
36    'code',
37    `setcps(1)
38n("<0 1 2 3 4>*8").scale('G4 minor')
39.s("gm_lead_6_voice")
40.clip(sine.range(.2,.8).slow(8))
41.jux(rev)
42.room(2)
43.sometimes(add(note("12")))
44.lpf(perlin.range(200,20000).slow(4))`,
45  );
46  document.getElementById('strudel').append(editor);
47</script>
48```
49
50When you're using JSX, you could also use the `code` attribute in your markup:
51
52```html
53<script src="https://unpkg.com/@strudel/embed@1.0.2"></script>
54<strudel-repl code={`
55setcps(1)
56n("<0 1 2 3 4>*8").scale('G4 minor')
57.s("gm_lead_6_voice")
58.clip(sine.range(.2,.8).slow(8))
59.jux(rev)
60.room(2)
61.sometimes(add(note("12")))
62.lpf(perlin.range(200,20000).slow(4))
63`}></strudel-repl>
64```