About

In the high-stakes environment of modern web development, isolated testing environments are not a luxury - they are a necessity. Direct manipulation of the DOM within a production application carries significant risk, ranging from style leakage to catastrophic script errors. This tool provides a strictly sandboxed, immediate-feedback loop for developers to validate structure, style, and behavior before deployment.

Unlike standard text editors, this environment simulates a complete browser rendering cycle. It intercepts console.log streams and runtime errors, projecting them into a dedicated debugging interface. This ensures that logic failures (e.g., null reference exceptions or infinite loops) are caught in a controlled state, preventing pollution of the global window scope or the parent application context.

Formulas

The core rendering logic follows a strict Input-Process-Output cycle, utilizing a virtualized DOM injection strategy to ensure isolation.

{

Render(Code) = Inject(SanitizedFrame, Code)Capture(Log) → PostMessage(ParentUI)Error(e) &implies; Toast(e.message, e.line)

To prevent blocking the main thread during rapid typing, the render function applies a temporal filter:

tlimΔt→300ms

Where t is the time since the last dKeyup event. This debounce mechanism ensures the iframe.document.write operation only triggers when user intent is stable.

Reference Data

Element	Category	Description	Attributes (Common)
div	Flow Content	Generic container for flow content. No semantic meaning.	class, id, style
span	Phrasing Content	Generic inline container for phrasing content.	class, id
section	Sectioning	Thematic grouping of content, typically with a heading.	aria-label
article	Sectioning	Self-contained composition (blog post, widget).	role
img	Embedded	Embeds an image. Void element (no closing tag).	src, alt, loading
input	Interactive	Typed data field for user interaction.	type, value, placeholder
canvas	Embedded	Bitmap area for scripting (usually JS).	width, height
script	Metadata	Embeds or references executable code.	src, async, defer
link	Metadata	Relationship between document and external resource.	rel, href
meta	Metadata	Metadata that cannot be represented by other HTML.	name, content, charset

Frequently Asked Questions

The Virtual Console captures "console.log", "warn", and "error" calls originating strictly from within the sandboxed iframe. This prevents the browser's native developer tools from becoming cluttered and allows you to see output immediately adjacent to your preview without opening DevTools.

Yes. You can include them via CDN links in the of your code. We provide presets for common frameworks (Bootstrap 5, Tailwind CSS, Vue 3) in the "Boilerplates" menu which automatically inject the necessary and tags.

Yes. The editor utilizes a local persistence layer (LocalStorage) to save your work on every keystroke. If you close the tab or refresh, your last session is restored automatically. Note that clearing your browser cache will remove this data.

To prevent infinite loops or "dialog locking" that can freeze the entire browser tab, we override "window.alert" and "window.confirm" within the sandbox to instead log messages to the Virtual Console.

The preview runs in an iframe with "sandbox="allow-scripts allow-same-origin"". While this allows your code to run, it isolates the execution context from the parent application (this tool), preventing access to the parent's cookies or LocalStorage.