1<input
2  type="text"
3  id="text"
4  value="seq('a', ['b', 'c'])"
5  style="width: 100%; font-size: 2em; outline: none; margin-bottom: 10px"
6  spellcheck="false"
7/>
8<div id="output"></div>
9<script type="module">
10  const strudel = await import('https://cdn.skypack.dev/@strudel/core@0.6.8');
11  Object.assign(window, strudel); // assign all strudel functions to global scope to use with eval
12  const input = document.getElementById('text');
13  const getEvents = () => {
14    const code = document.getElementById('text').value;
15    const pattern = eval(code);
16    const events = pattern.firstCycle();
17    console.log(code, '->', events);
18    document.getElementById('output').innerHTML = events.map((e) => e.show()).join('<br/>');
19  };
20  getEvents();
21  input.addEventListener('input', () => getEvents());
22</script>
23<p>
24  This page shows how skypack can be used to import strudel core directly into a simple html page. <br />
25  No server, no bundler and no build setup is needed to run this!
26</p>