concept

Live preview

Live preview is the IDE / chat feature where rendered output (web page, React component, Mermaid diagram, SVG, plot) updates in real time as the user or LLM edits the source — Claude Artifacts, v0, Bolt, Lovable, Storybook are 2026 examples.

Live preview shortcuts the edit → save → reload → check cycle that has dominated web development for decades. Engineering implementations: WebContainer / StackBlitz (full Node sandbox in browser), iframe sandbox + bundled React (Claude Artifacts), hot module replacement (Vite), MDX-style preview (Mintlify). Trade-offs: WebContainer is powerful but heavy; iframe sandbox is fast but limited; HMR needs a real dev server. Live preview is core to: AI-first IDEs (Cursor, Windsurf), interactive artifacts ([[interactive-artifact]]), no-code builders (v0, Bolt, Lovable), and design-to-code tools. By 2026 'no live preview' feels primitive.

When to use live preview

Any interactive UI building surface.

Common mistakes

Skipping sandbox isolation — preview code can call APIs from the parent origin.

FAQ

What is live preview?

When should I use live preview?

Any interactive UI building surface.

What are the most common mistakes with live preview?

Skipping sandbox isolation — preview code can call APIs from the parent origin.

Interactive artifact — An interactive artifact is a live-rendered HTML / React / SVG / Mermaid surface inside an LLM chat — Claude Artifacts and OpenAI Canvas popularized the pattern in 2024-2026, turning chat from text into running mini-apps.
Generative UI — Generative UI is the pattern where a language model dynamically chooses, configures, and renders UI components in real time based on the user's intent — instead of returning text, it returns a UI.

Last updated: 2026-06-01. Raw markdown: https://promtable.com/glossary/live-preview.md.