Skip to content
Lizely

Online HTML Editor

Edit HTML and CSS side by side and render a deliberately restricted local preview without running scripts.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Enter or edit the bounded HTML snippet in the left editor.
  2. 2.Add optional CSS in the right editor without external resource dependencies.
  3. 3.Select Update preview and inspect the result inside the restricted sandbox.

About Online HTML Editor

Online HTML Editor provides two plain-text editors for HTML and CSS plus a local preview. Nothing is uploaded, saved to an account, or sent to an API. Select Update preview to build a fresh srcdoc document and place it in a unique-origin iframe. The tool is intended for learning markup, checking layout snippets, and testing static component ideas.

The HTML input is limited to 50,000 characters and CSS to 30,000 characters. The preview includes a restrictive Content Security Policy: all resources are denied by default, styles may be inline, images may use only data or Blob URLs, base URLs are disabled, and form submission is blocked. The iframe has an empty sandbox token list, so scripts, popups, navigation, downloads, forms, and same-origin access are unavailable.

User HTML is rendered as markup rather than escaped text, which is the purpose of the editor, but it remains inside that constrained preview. CSS closing-style sequences are neutralized before insertion so a stylesheet value cannot break into a new HTML element. A second CSP inside the user's markup cannot relax the existing policy because browser policies combine rather than replace one another.

The editor deliberately does not execute JavaScript. Use the separate JavaScript Playground for isolated worker code. It also does not fetch external stylesheets, fonts, images, APIs, videos, or iframes, so examples relying on remote assets will not match a production page. Data-image previews are allowed for small self-contained experiments.

The preview is not a sanitizer for content you intend to publish elsewhere. Copying the same HTML into a real site without the sandbox and CSP can create a different security surface. Validate accessibility, semantics, responsive behavior, SEO, and production CSP in the destination project. The editor does not replace a browser inspector, full IDE, build system, or cross-browser test suite.

Because srcdoc rendering uses the current browser, CSS support and default form appearance follow that browser. The preview uses a small neutral body margin and system font only as a baseline. Your HTML and CSS remain the authoritative content, and pressing Update preview is required so changes do not unexpectedly re-render mid-edit.

Methodology & sources

Bound HTML and CSS lengths, neutralize case-insensitive closing-style sequences in CSS, construct a complete srcdoc with a deny-by-default Content Security Policy, render it in an iframe with an empty sandbox token list, allow only inline styles and local data/Blob images, block base URLs and form actions, and update only on explicit user action so editing remains stable.

Frequently asked questions

Is my code uploaded?
No. Both editors and the preview document remain in the current browser tab.
Why do scripts not run?
The HTML preview intentionally uses an iframe sandbox without allow-scripts, plus a restrictive Content Security Policy.
Can I load external fonts or images?
No. Remote resources are blocked; only inline styles and data or Blob images are allowed.
Does this make HTML safe to publish?
No. The preview is isolated, but production HTML must still be reviewed in its destination security context.

Related tools

Developer Tools guides

View all