API Reference
Attributes, properties, methods, events, slots, and styling hooks for <code-playground>.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
mode | string | "auto" | Color mode for the shell. "auto" follows page signals, or set "light" / "dark". |
run-mode | string | "auto" | "auto" for debounced live preview or "manual" for explicit runs. |
debounce | number | 300 | Auto-run delay in milliseconds. |
preview-position | string | "right" | Position of the preview pane: "right" or "bottom". |
html-src | string | — | URL of an external HTML file to load into the HTML panel. |
css-src | string | — | URL of an external CSS file to load into the CSS panel. |
js-src | string | — | URL of an external JavaScript file to load into the JS panel. |
head-src | string | — | URL of a preview-only head fragment (e.g. <link>, <style>, extra <meta> tags). |
persist | string | — | localStorage key used for saving source, active tab, and split position. |
inherit-theme | boolean | false | Copies page data-mode and data-theme to the preview document. |
show-console | boolean | true | Set to "false" to hide the console panel. |
Properties
| Property | Type | Description |
|---|---|---|
value | { html, css, js, head } | Get or set the current source payload. |
mode | string | Get or set the color mode. |
runMode | string | Get or set the run mode ("auto" or "manual"). |
previewPosition | string | Get or set the preview position ("right" or "bottom"). |
debounce | number | Get or set the debounce delay. |
persistKey | string | Read-only. The current localStorage key. |
inheritTheme | boolean | Read-only. Whether theme inheritance is active. |
showConsole | boolean | Read-only. Whether the console panel is visible. |
sourceUrls | object | Read-only. The configured *-src URLs. |
Methods
| Method | Returns | Description |
|---|---|---|
getValue() | { html, css, js, head } | Returns the current source payload. |
setValue(value) | void | Updates one or more source panels programmatically. |
run() | void | Rebuilds the preview iframe immediately. |
softRun() | void | Re-executes the JS panel inside the existing iframe without rebuilding the document. |
reset() | void | Restores the original authored source values. |
reloadSources() | Promise<void> | Refetches any configured *-src files and replaces editor content. |
copy(type?) | Promise<void> | Copies the requested source panel ("html", "css", or "js") to the clipboard. Defaults to the active tab. |
copyConsole() | Promise<void> | Copies visible console rows, respecting the active filter, search, and repeat collapsing. |
downloadHTML() | void | Downloads a standalone HTML document assembled from the current state. |
openInCodePen() | void | Opens the current payload in a new CodePen pen. |
clearConsole() | void | Clears captured console output. |
Events
| Event | Detail | Description |
|---|---|---|
code-playground:change | { type, value } | Fires when an editor value changes. |
code-playground:run | { html, css, js, head } | Fires after the preview document is rebuilt. |
code-playground:ready | — | Fires when the iframe bootstrap reports ready. |
code-playground:console | { level, args } | Fires for bridged console calls from the iframe. |
code-playground:error | { level, args } | Fires for bridged runtime errors and unhandled rejections. |
code-playground:sources-loaded | { loaded } | Fires after one or more external source files load successfully. |
code-playground:source-error | { type, url, error } | Fires when a configured external source file fails to load. |
Slots
| Slot | Expected Element | Description |
|---|---|---|
html | <textarea> | Initial HTML source content. |
css | <textarea> | Initial CSS source content. |
js | <textarea> | Initial JavaScript source content. |
CSS Parts
| Part | Description |
|---|---|
::part(toolbar) | File tabs, status indicators, and primary action buttons. |
::part(editor-panel) | Code editor workspace containing the active tab's editor. |
::part(preview-panel) | Preview iframe panel. |
::part(console-panel) | Console output panel with filters and search. |
CSS Custom Properties
Override these properties on the code-playground selector to customize the look. Each property falls back to a Vanilla Breeze design token when available.
| Property | Default (light) | Description |
|---|---|---|
--cp-bg | #ffffff | Shell background |
--cp-panel-bg | #f6f8fb | Panel background |
--cp-editor-bg | #f8fafc | Editor background |
--cp-preview-bg | #ffffff | Preview iframe background |
--cp-border | #d0d7de | Primary border color |
--cp-border-subtle | #e5e7eb | Subtle / inner border color |
--cp-text | #111827 | Primary text color |
--cp-muted | #6b7280 | Muted / secondary text color |
--cp-accent | #2563eb | Accent / interactive color |
--cp-radius | 16px | Outer border radius |
--cp-radius-inner | 12px | Inner panel border radius |
--cp-font-sans | "SF Pro Text", sans-serif | UI font stack |
--cp-font-mono | "SFMono-Regular", monospace | Code font stack |
--cp-shadow | 0 18px 40px ... | Outer box shadow |
--cp-split | 48% | Editor/preview split position |
Syntax Highlighting Tokens
| Property | Light | Dark | Description |
|---|---|---|---|
--cp-token-keyword | #9a3412 | #ff7b72 | Keywords (const, if, etc.) |
--cp-token-string | #166534 | #7ee787 | String literals |
--cp-token-number | #1d4ed8 | #79c0ff | Numeric literals |
--cp-token-comment | #64748b | #8b949e | Comments |
--cp-token-variable | #0f172a | #e6edf3 | Variable names |
--cp-token-type | #7c3aed | #d2a8ff | Type names |
--cp-token-tag | #be123c | #7ee787 | HTML tag names |
--cp-token-attribute | #0369a1 | #79c0ff | HTML attributes |
--cp-token-property | #155e75 | #a5d6ff | CSS properties |
--cp-token-function | #7c2d12 | #d2a8ff | Function names |
--cp-token-meta | #6d28d9 | #ffa657 | Meta / directives |
Keyboard Shortcuts
| Key | Action |
|---|---|
| Arrow Left / Arrow Up | Move the editor/preview divider left/up (hold Shift for larger steps) |
| Arrow Right / Arrow Down | Move the editor/preview divider right/down |