Interactive Demos

Explore all the features of the <code-playground> component.

Auto Run

The default mode. Edits are debounced and the preview rebuilds automatically after a short delay.

<code-playground> <textarea slot="html">...</textarea> <textarea slot="css">...</textarea> <textarea slot="js">...</textarea> </code-playground>

Manual Run

Set run-mode="manual" to require an explicit click of the Run button. Useful for scripts with side effects.

<code-playground run-mode="manual">...</code-playground>

Console Output

The runtime console bridges log, info, warn, error, and debug from the sandboxed iframe. Filter by level, search by text, collapse repeated messages, and copy output.

Bottom Preview

Use preview-position="bottom" to stack the preview below the editor instead of beside it.

<code-playground preview-position="bottom">...</code-playground>

Dark Mode

Set mode="dark" to force dark theme, or mode="auto" (default) to follow the page. Add inherit-theme to propagate data-mode and data-theme into the preview iframe.

<code-playground mode="dark" inherit-theme>...</code-playground>

Hidden Console

Set show-console="false" to hide the console panel entirely.

<code-playground show-console="false">...</code-playground>

Persistence

Set the persist attribute to a unique key. The component saves source, active tab, and split position to localStorage. Edits survive page reloads.

<code-playground persist="my-unique-key">...</code-playground>

External Sources

Load panels from external files with html-src, css-src, js-src, and head-src attributes. Great for embedding exercises sourced from separate files.

<code-playground html-src="./exercises/ex1.html" css-src="./exercises/ex1.css" js-src="./exercises/ex1.js" head-src="./exercises/ex1-head.html"> </code-playground>

CodePen Export

Every playground has a CodePen button in its toolbar. Click it to open the current HTML, CSS, and JS in a new CodePen pen.