HTML/CSS Playground

Sanitized HTML/CSS preview for a 28 characters across 1 line(s).

How it works

• The HTML is sanitized, the CSS is sanitized separately, and the sanitized stylesheet is composed with the sanitized markup.
• Active content (scripts, event handlers, dangerous URLs, SVG/MathML and external resources) is removed; the result is rendered only inside an empty-token sandboxed preview.
• Counts: 28 characters, 2 words, 1 lines.

Methodology

1. Sanitize the HTML fragment with the shared allowlist sanitizer.
2. Sanitize the stylesheet: remove @import, external/data/script url() references and legacy bindings, and neutralize a </style breakout.
3. Compose the sanitized stylesheet with the sanitized markup and render it only inside an empty-token sandboxed preview frame.
4. Any pasted JavaScript is displayed as text and is never emitted into the preview document.

Usage

1. Write HTML in the markup editor and CSS in the stylesheet editor; the sanitized preview updates as you type.
2. Use Format to indent the markup or the stylesheet with the shared F084 formatters.
3. Keep JavaScript in the reference pane only — it is never run.
4. Turn on “Keep in this browser” to autosave locally; use Clear/Reset to remove the stored document.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

HTML with a stylesheet

{
  "text": "<h1 class=\"title\">Hello</h1>",
  "css": ".title { color: rebeccapurple; font-size: 24px; }"
}

The sanitized stylesheet is composed with the sanitized markup.

A script payload is not executed

{
  "text": "<p>Safe</p>",
  "css": "p { color: green; }",
  "javascript": "document.body.innerHTML = 'executed'"
}

The JavaScript text is kept for reference and never emitted into the preview.

Limitations

Edit and preview, never execute

The playground never runs user code. The markup is sanitized, the stylesheet is sanitized separately, and the two are composed into a preview shown in a sandboxed frame.

A JavaScript pane may be present for reference, but its contents are never inserted as a script.

Local-only autosave

Autosave is off by default. When enabled, the document is stored only in this browser and Clear/Reset removes it.