HTML & CSS editor

How to use the HTML editor

Use this editor for small static layouts such as a content block, table or CSS experiment. The light text in the HTML and CSS boxes is an example, and the first preview shows its result. Focus an example field to start with an empty box. If you leave that box empty, its light example returns without restoring a previous result or enabling export.

Enter your own markup and styles. You can paste a fragment such as an article or the content of a complete HTML document. The editor rebuilds a static document from supported elements, so document metadata is not retained. After you begin editing, only your actual input is used; light example text in another empty field is not mixed into your work. Your text stays in place when you move between fields.

What the preview shows

The preview is a separate sandboxed page. It shows the supported HTML and the CSS you entered without applying those styles to the editor itself. Text, headings, lists, tables, ordinary form controls and CSS layouts can be inspected. The preview area can scroll if your layout is wider or taller than the available space. Its width follows the editor panel, so it is not a fixed device simulator.

JavaScript, event handlers, embedded pages, SVG, media players and external resources are excluded or blocked. Links do not navigate and forms do not submit. Remote images, fonts, stylesheets and CSS imports will not load. Embedded base64 PNG, JPEG, GIF and WebP images can display. A notice reports removed elements or attributes; resources referenced inside CSS are blocked by the document policy. Your input boxes retain the original text, including unsupported code, so you can still inspect or revise it.

Two small examples

For a heading, enter the HTML and CSS below. The preview shows “Hello” as a dark green heading. Change the text between the tags to update the displayed words; change the CSS color to update their appearance.

For a list, use <ul><li>Plan</li><li>Review</li></ul> with CSS li { margin-bottom: 8px; }. You will see two bullet points with space after each item. This is useful for checking a small content block before copying it into your own project.

HTML: <h1>Hello</h1>
CSS:  h1 { color: #166534; }

Copy and download

Copy HTML and Download HTML use the same current static document as the preview. The export combines the supported markup and CSS into one UTF-8 page.html file and includes a restrictive content policy. Open that file in a browser to view it, or in a text editor to inspect its source. It is a standalone static draft, not a hosted website or a deployable application with working scripts.

Clear removes your HTML, CSS and result, with confirmation when you have entered code. Empty fields show light examples again; they are not saved user content. Normal typing uses the browser’s text-editing behavior. The page warns before leaving after changes but does not store an automatic draft. Download the static HTML file before closing to keep the supported result.

Limits and troubleshooting

The combined input is limited to 100,000 characters, with a maximum of 3,000 HTML nodes and 64 nested levels. When a limit is exceeded, the input remains visible while preview and export are disabled. Reduce the input to continue. Empty input has no downloadable result.

HTML browsers often repair missing closing tags, and invalid CSS declarations may be ignored. This editor is not a standards validator: a visible preview does not prove the source is valid, accessible or ready for production. If a rule seems ineffective, check the selector and its syntax, then check whether it depends on a blocked remote asset. Use browser developer tools in your own project for a full diagnostic review.

Frequently asked questions