Edit a self-contained HTML component and watch it render as you type - at phone, tablet or desktop width, in light or dark, and in either text direction. Every template in the component library is one file, which is exactly what this page renders.
One self-contained HTML document: markup, styles and any script.
Rendered in a sandboxed frame; it can run its own scripts and reach nothing here.
Start from a real one: open any template in the component library and it arrives here with its markup loaded.
A component that is one HTML file can be previewed by an iframe, read in a sitting, and pasted into any stack - no build step, no dependency graph, nothing fetched at runtime. That is the whole premise of the library this page edits.
The frame runs scripts so a component's own behaviour works, and it is denied same-origin access, forms, popups and navigation. A pasted component cannot read this page, its storage or your cookies.
Both switches rewrite the document's own attributes rather than forcing styles from outside, so what you see is what the file does on its own. A layout that only mirrors correctly because the parent page helped it is a layout that will break elsewhere.
