playground

Playground Builder

A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button.

When to Use

When the user asks for an interactive playground, explorer, or visual tool - especially when the input space is large, visual, or structural.

Template Types

Template	Use Case
Design Playground	Visual design (components, layouts, spacing, color, typography)
Data Explorer	Data/query building (SQL, APIs, pipelines, regex)
Concept Map	Learning/exploration (knowledge gaps, scope mapping)
Document Critique	Document review (approve/reject/comment workflow)
Diff Review	Code review (git diffs with line-by-line commenting)
Code Map	Architecture (component relationships, data flow)

Core Requirements

• Single HTML file. Inline all CSS and JS. No external dependencies.
• Live preview. Updates instantly on every control change. No "Apply" button.
• Prompt output. Natural language, not value dump. Only non-default choices.
• Copy button. Clipboard copy with "Copied!" feedback.
• Defaults + presets. 3-5 named presets. Looks good on first load.
• Dark theme. System font for UI, monospace for code/values.

State Pattern

const state = { /* all configurable values */ };
const DEFAULTS = { ...state };

function updateAll() {
  renderPreview();
  updatePrompt();
}

Prompt Output Pattern

function updatePrompt() {
  const parts = [];
  // Only mention non-default values
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`border-radius of ${state.borderRadius}px`);
  }
  // Use qualitative language alongside numbers
  if (state.shadowBlur > 16) parts.push('a pronounced shadow');
  else if (state.shadowBlur > 0) parts.push('a subtle shadow');
  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}

Common Mistakes

• Prompt is just a value dump - write it as a natural instruction
• Too many controls - group by concern, hide advanced in collapsible
• Preview doesn't update instantly - every change must trigger re-render
• No defaults or presets - broken on load
• External dependencies - CDN down = playground dead

After Building

Run open <filename>.html to launch in user's default browser.