# Live preview

**Source:** https://promtable.com/glossary/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 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

- Any interactive UI building surface.

## Common mistakes

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

## Related terms

- [interactive-artifact](https://promtable.com/glossary/interactive-artifact)
- [generative-ui](https://promtable.com/glossary/generative-ui)

*Last updated: 2026-06-01*
---

Original page: https://promtable.com/glossary/live-preview
Maintained by Promtable (https://promtable.com). Content: CC BY 4.0. Cite as "Promtable — https://promtable.com/glossary/live-preview".
Contact: info@vibecodingturkey.com.