Embed pads and add "Open in HTMLpad" buttons

If you write tutorials, documentation or course material with HTML examples, HTMLpad can make them live. Embed a saved pad so readers see it running inside your article, or add a button that opens any code example on your page in an editor, ready to change, with no sign-up for you or your readers.

Embed a pad

Save your example in HTMLpad, then click Embed in the editor to copy its code. It looks like this:

<iframe src="https://htmlpad.org/your-pad/embed" title="HTML example" width="100%" height="420" style="border:1px solid #ddd;border-radius:8px" loading="lazy"></iframe>
<p><a href="https://htmlpad.org/your-pad/">Open this example in HTMLpad</a></p>

The frame shows the pad running. The line underneath gives readers a way to open the example in the full editor; keep it, because some feed readers and email clients do not show frames.

Add "Open in HTMLpad" to your code examples

Mark the link with the class open-in-htmlpad and point data-code at the element that holds your example. Then load the script once per page:

<pre id="example-1"><code>&lt;h1&gt;Hello&lt;/h1&gt;
&lt;p&gt;Edit me.&lt;/p&gt;</code></pre>
<a class="open-in-htmlpad" data-code="#example-1" href="https://htmlpad.org/new">Open in HTMLpad</a>

<script src="https://htmlpad.org/open.js" defer></script>

When a reader clicks the link, HTMLpad opens with the example already loaded. The code travels in the address fragment, so it is never sent to our server until the reader decides to save. Without the script, the link still opens an empty editor.

Remix

Every public pad has a Remix link. It opens a copy in the editor so anyone can build on your example without changing the original.

Frequently asked questions

Is embedding free?

Yes. Any saved pad can be embedded, and the Open in HTMLpad script is free to use on any site.

Do readers need an account to edit my example?

No. They can change the code and see the result straight away. Saving their version gives them their own link; your original stays as it is.

Does the embedded pad slow down my page?

The frame loads lazily, so it only loads when a reader scrolls near it. The script for the buttons is a few hundred bytes and does not load anything else.