<code-playground>

A standalone web component for live HTML, CSS, and JavaScript editing with sandboxed preview, runtime console, and CodePen export.

Features

Live Preview

Debounced auto-run updates the sandboxed iframe as you type.

Manual Run

Opt into explicit run mode for scripts that shouldn't auto-execute.

Runtime Console

Bridged console with log levels, search, repeat collapsing, and origin tracking.

External Sources

Load HTML, CSS, JS, and head fragments from external files.

Dark Mode

Auto-detects page theme or set explicitly via the mode attribute.

CodePen Export

One-click export opens the current playground state in CodePen.

Fully Themeable

CSS custom properties and shadow parts for deep customization.

Persistence

localStorage persistence for source, active tab, and split position.

Quick Start

Install

npm install @profpowell/code-playground

import '@profpowell/code-playground';

CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/@profpowell/code-playground/dist/code-playground.js"></script>

Basic Usage

<code-playground> <textarea slot="html"><h1>Hello</h1></textarea> <textarea slot="css">h1 { color: royalblue; }</textarea> <textarea slot="js">console.log('ready');</textarea> </code-playground>

With Options

<code-playground run-mode="manual" mode="dark" preview-position="bottom" persist="my-key" show-console="false"> <textarea slot="html">...</textarea> <textarea slot="css">...</textarea> <textarea slot="js">...</textarea> </code-playground>

Related Components