Live Code Playground

Use docspress/code-playground for a small HTML, CSS, and JavaScript example readers should edit and run in the page. It combines source editors, a sandboxed result, and bounded console output.

When to use it

Choose Live Code Playground when interaction is essential to the lesson. Use Colorful Code when readers only need to study or copy source. Keep multi-file applications and build-tool examples in a real repository or hosted development environment.

Edit the block

Provide self-contained HTML, CSS, and JavaScript. Set a preview height from 180–720 pixels, decide whether the example runs on load, and show the console only when its output teaches something. Leave network access disabled unless the example genuinely depends on a public resource.

Attributes

title string: Plain-text playground heading.

DefaultLive example
html string: HTML placed in the sandboxed document body.

DefaultDemo button
css string: CSS placed in an inline style element.

DefaultDemo button styles
javascript string: JavaScript evaluated inside the sandbox.

DefaultDemo click handler
height number: Preview height in pixels, clamped to 180–720.

Default320 Values180–720
autoRun boolean: Runs the authored source when the page loads.

Defaulttrue Valuestrue, false
showConsole boolean: Shows relayed console messages and errors.

Defaulttrue Valuestrue, false
allowNetwork boolean: Relaxes the sandbox document policy to allow network requests.

Defaultfalse Valuestrue, false

The block supports wide alignment in addition to the shared design controls.

Creative examples

Interactive publish button

Browser sandbox Interactive button

Network blocked

HTML CSS JavaScript

Result Starting…

Console

Console output appears here.

Theme-token mixer

Browser sandbox Mix a documentation accent

Network blocked

HTML CSS JavaScript

Result Starting…

Accessible disclosure lab

Browser sandbox Build a keyboard-friendly disclosure

Network blocked

HTML CSS JavaScript

Result Starting…

Console

Console output appears here.

Sandbox and output

The result iframe uses sandbox="allow-scripts" without same-origin access and sends no referrer. A Content Security Policy blocks network access unless the author enables allowNetwork. Run rebuilds the sandbox, Reset restores the authored source, and console calls and errors are relayed only from the active result. Console history is bounded to 100 lines.

Keep examples focused on one behavior, supply visible labels and keyboard interaction in the demo itself, and verify both the initial result and the Reset state.