How it works — Live Artifact Preview
When NuBench AI generates HTML, SVG, or code, you can preview it instantly — no copy-paste into a browser required. Previews run in an isolated sandbox with no access to your session or data.
Every HTML or SVG block in a NuBench AI response includes a toggle between Code view and Preview view. Switch to Preview and the output renders immediately in a sandboxed frame inside the chat interface.
The toggle is available on all HTML and SVG blocks regardless of response length. For long documents, the preview frame is scrollable. The code view uses syntax highlighting with copy-to-clipboard built in.
Previews run in an isolated frame with no access to your NuBench session, your authentication tokens, or any data outside the rendered content. Scripts in the preview cannot reach the parent application.
The sandbox uses strict CSP and sandboxed iframe attributes. External network requests from within the preview are blocked by default. This is not a visual isolation only — the frame has no JS bridge to the host application.
Copy the generated code to the clipboard with one click, or download it as a file. HTML blocks download as .html, SVG blocks as .svg. The filename includes the conversation ID for traceability.
Downloads are local — the file is written directly to your browser download folder without a round-trip to the server. No download history is stored in the NuBench conversation record.
Any response block that begins with a valid HTML doctype or SVG root element is treated as a renderable artifact. Partial HTML snippets and code blocks labeled html or svg in markdown fences are also eligible.
The artifact detection is automatic — you do not need to ask NuBench to generate a preview. If you want to suppress preview for a specific block, you can request plain text output instead of HTML.
Ask NuBench to draft an HTML email and preview it in the chat before copying it into your email client. Iterate on layout, colors, and content without switching tools.
Generate architecture diagrams, org charts, flowcharts, or data visualizations as SVG. Preview them inline, request changes in natural language, and download the final file when done.
Build quick HTML/CSS mockups for page layouts, form designs, or component sketches. Preview the output instantly and iterate conversationally until the design is right.
Generate D3.js or Chart.js-based visualizations as self-contained HTML files. Preview the chart in the artifact frame and download it for embedding in reports or presentations.