Embed Raku

One script tag turns code on your page into a real, running Raku editor. It works on any host — a blog, a documentation site, a conference slide deck.

Load the script

Anywhere in the page. Nothing to install, no build step, no npm.

<script src="https://raku.online/raku.js"></script>

Mark the code

Any element carrying data-raku becomes editable and runnable.

<pre data-raku>say "Hello from an embedded editor!";</pre>

That markup renders this — go ahead and change it:

say "Hello from an embedded editor!";

For an empty editor to type into instead, use an empty element:

<div data-raku data-run></div>

Already have Raku code blocks?

Add data-auto to the script tag and every existing <pre><code class="language-raku"> block on the page becomes runnable. You change nothing else — this is the shape Markdown, Prism, highlight.js and the WordPress code block already emit.

<script src="https://raku.online/raku.js" data-auto></script>

If your highlighter uses a different language name, name it: data-auto="raku perl6".

Options

All optional. The first three go on the block, the rest on the script tag.

`data-run`	Run once, as soon as the interpreter is ready.
`data-stdin="…"`	Preset standard input, and reveal the input box.
`data-rows="N"`	Initial editor height in text rows. Defaults to fitting the code.
`data-theme="dark"`	A page-wide default. Otherwise editors follow the host page's theme, live.
`data-selector="…"`	Use your own selector instead of `[data-raku]`.

Three things worth knowing

One interpreter per page. Ten editors share a single WebAssembly instance — one download, one worker, not ten.
It cannot break your CSS. Each editor lives in its own Shadow DOM: your styles cannot reach in, and ours cannot leak out.
Nothing is sent anywhere. Your visitors' code runs in your visitors' browsers. There is no server, so there is nothing for you to run or pay for.