HTML

Responsive HTML & CSS Playground

Explore a layout at phone, tablet, and desktop widths. Your HTML and CSS stay in this browser; pasted JavaScript is never run.

Tab indents · Esc, then Tab moves focus Ln 1, Col 1
Tab indents · Esc, then Tab moves focus Ln 1, Col 1

Example ready. The output below matches the preview.

Restricted layout preview: scripts, images, remote fonts, links, embedded content, and submissions are removed or blocked. Review the generated output before using it elsewhere.

Layout viewport

390 × 844 CSS px · Phone

No script execution

The frame uses the labeled CSS width without scaling. Scroll this area horizontally to inspect wide layouts on a small screen. This does not emulate a device or touch input. Color preference queries follow the browser setting, independently of the host theme.

HTML 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'none'; style-src 'unsafe-inline'; img-src 'none'; font-src 'none'; media-src 'none'; connect-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'">
<meta name="referrer" content="no-referrer">
<title>Responsive layout preview</title>
<style>
*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,sans-serif;color:#183d35;background:#f3f1e8}.page{max-width:1100px;margin:auto;padding:clamp(24px,5vw,72px)}.intro{max-width:700px;margin-bottom:40px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em}h1{font:400 clamp(40px,7vw,80px)/1.05 Georgia,serif;letter-spacing:-.04em}.cards{display:grid;gap:20px}article{padding:24px;border-top:2px solid #183d35;background:#e4ebdf}.number{display:block;margin-bottom:28px;font-size:13px}h2{font-size:22px;line-height:1.2}@media (min-width:640px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (prefers-color-scheme:dark){body{background:#142b26;color:#eef3e8}article{background:#244037;border-color:#b3cdb3}}
</style>
</head>
<body>
<main class="page">
  <header class="intro">
    <p class="eyebrow">MRHTML / responsive experiment</p>
    <h1>A little room to think.</h1>
    <p>Try the phone, tablet, and desktop widths. The layout changes at 640 CSS pixels.</p>
  </header>
  <section class="cards" aria-label="Studio notes">
    <article><span class="number">01</span><h2>Make space</h2><p>Start with the smallest screen and let the content lead.</p></article>
    <article><span class="number">02</span><h2>Find a rhythm</h2><p>A flexible grid keeps each idea connected to the next.</p></article>
    <article><span class="number">03</span><h2>Keep exploring</h2><p>Edit the HTML and CSS, then build a fresh preview.</p></article>
  </section>
</main>
</body>
</html>

Try a layout at explicit CSS widths

  1. Edit the HTML and CSS. Select Build preview, or press Ctrl/Cmd+Enter from either editor.
  2. Choose a preset or enter a width from 240 to 1920 pixels and a height from 240 to 1200 pixels. The frame remains at that size even when its surrounding area is smaller.
  3. Change your browser or operating-system color preference to exercise prefers-color-scheme rules. The host theme switch only styles this tool’s surrounding interface.
  4. Inspect the filtered complete document, then copy or download it. Both actions use exactly the displayed HTML, including its inline CSS and restrictive policy.

What the example demonstrates

The initial layout stacks three notes below 640 pixels and uses a three-column grid above that width. Flexible padding and type respond to the frame width. Try a 600-pixel custom viewport, then 700 pixels, to inspect the breakpoint. The light and dark styles belong to the example and remain editable.

HTML and CSS are deliberately limited

The tool parses markup without putting your source into the host document. It rebuilds supported HTML elements and attributes, removes scripts, event handlers, resource elements, navigation attributes, SVG, and MathML, and changes form containers to plain divs. Buttons have no submit action. Document wrappers and metadata are replaced. Style blocks and inline styles are filtered along with the CSS editor. Unsupported elements lose their contents, so keep the original source separately.

CSS is parsed into a syntax tree. Common layout declarations, custom properties, gradients, media queries, and keyframes are retained. Imports, resource URLs, unrecognized functions, escaped identifiers, and unparsed syntax are removed. A removed custom property can make a dependent declaration fall back or become invalid. Literal less-than characters in CSS are escaped before placing it inside a style element, including closing-style text in strings. This is a constrained layout experiment, not a production sanitizer or security scanner.

Isolation and limits

The iframe sandbox enables no permissions. The complete document also uses a Content Security Policy that blocks scripts, resource loading, and form submission. Links have no destinations. There is no network asset loader, framework runtime, storage, or pasted JavaScript support.

Each run accepts 100,000 HTML characters and 50,000 CSS characters, with at most 3,000 parsed HTML nodes, 64 nesting levels, and 250,000 output characters. Processing runs in a cancelable worker with a five-second limit. Editing either source clears the previous output so it cannot be mistaken for a current result. Browser HTML repair rules still apply; this tool does not report every markup or CSS validity issue. Test real devices, zoom, keyboard behavior, and assistive technology separately.

Related Tools