How to Insert the Strudel REPL in a Webpage

This page covers some of the basics of inputting strudel repl in your webpage.

Web Components

There are 2 web components that you need to be concerned about, which can be used after importing the strudel script.

I’ve noticed one of the limitations of injecting code this way is that you are much more limited in your formatting. You cannot have any gaps in the code within the “comment”. On the Strudel repl, you can go wild with your formatting, which makes it easier to live code.

strudel-repl

strudel-repl: the more robust style

Import Script

<script src="https://unpkg.com/@strudel/embed@latest"></script>

Insert the Beats

<strudel-repl>
  <!--
setCpm(170/4)
$dnbdrums: stack(
  s("bd:7").beat("0,7,10", 16),
  s("sd:2").beat("4,12",16),
  s("hh:4!8")
)._punchcard()
-->
</strudel-repl>

And when that is actually displayed, it will look like this:

As you can see, you have a fully operational repl with a play button. Ultimately, the code block is a little bit extra. It loads a more repl ui experience.

strudel-editor

strudel-editor: the more concise style, cutting out some of the fluff.

Import script

<script src="https://unpkg.com/@strudel/repl@latest"></script>

Insert the Beats

<strudel-editor>
  <!--
setcps(.6)
$techno: stack(
  s("bd*4").gain(0.95),
  s("~ sd ~ sd").gain(0.55),
  s("~ oh ~ oh ~ oh ~ oh").gain(0.22).clip(0.35),
).bank("RolandTR909")
._punchcard()
-->
</strudel-editor>

That displays on the webpage like this:

You’ll notice that this is basically a minimal editor UI, with no click option to play. It code also nestles in tightly.
You can start playing (or restart) with ctrl + enter, and you can stop with ctrl + .

Styling

Sizing

The standard <strudel-repl> is displayed as a 600px height.

This can be a bit much, or a bit too little depending on the amount of code. If we have a sample that is a certain size, we can manipulate the web component like this:

<style>
  .strudel--short strudel-repl > iframe { height: 250px !important; min-height: 200px; }
</style>

<div class="strudel--short">
  <strudel-repl>
    <!--
  $drums: stack(
    s("bd*4").bank("RolandTR909"),
    s("~ cp ~ cp").bank("RolandTR909"),
    s("hh*16").bank("RolandTR909"),
    s("~ oh ~ oh ~ oh ~ oh").bank("RolandTR909")
  ).punchcard()
  -->
  </strudel-repl>
</div>

Which renders like this:

Custom Buttons

You can go wild with some more advanced code that allows for custom buttons.

play stop