Instant UI Component Preview

Preview UI components and Storybook stories directly in your IDE. No more context switching, no more waiting. Just instant, beautiful previews.

Preact logoPreact
React logoReact
Solid logoSolidJS
Svelte logoSvelte
Vue.js logoVue 2 & 3
Visual Studio Code logoVisual Studio CodeJetBrains logoJetBrains IDEsCLI

See Preview.js in Action

Watch how Preview.js transforms your UI development workflow

Watch the full demo on YouTube

Lightning Fast

Instantly see your components rendered as you type. No more waiting for builds or browser refreshes.

Zero Config

Works out of the box with all major UI frameworks. No special setup or configuration needed.

Full Integration

Native integration with VS Code and JetBrains IDEs. Your UI development workflow, supercharged.

Zero boilerplate

Preview.js detects all UI components and Storybook stories in your codebase.

Screenshot

Auto-generated properties

If you use TypeScript, Preview.js will generate valid properties for each component on demand.

Screenshot

Instant feedback

Preview.js uses Vite under the hood, which allows it to achieve snappy refreshes. Previews will be updated before you have a chance to hit save.

Screenshot

Cross-framework

Preview.js offers full support out of the box for Preact, React, Solid, Svelte and Vue 2 & 3.

Meta-frameworks such as Next.js, Nuxt, SolidStart and SvelteKit are also supported (some configuration may be required).

Stay in Your Flow State

Preview.js Pro eliminates context-switching and helps you maintain deep focus while building UI components. No more juggling between IDE and browser.

⚡️

Instant Feedback

See your changes instantly as you type, without saving or switching windows.

🎯

Maximum Productivity

Smart features like auto-generated props and quick component search save you precious development time.

🔄

Seamless Integration

Works with your existing Storybook stories and supports all major UI frameworks out of the box.

Pro License

Unlock advanced features and supercharge your workflow

Compare Features

Feature
Free
Pro
Instant preview as you type
✓
✓
Multi-framework support
✓
✓
Auto-generated props
✓
✓
Basic Storybook integration
✓
✓
Error detection
✓
✓
Advanced props editor
-
✓
Save favorite previews
-
✓
Quick component search
-
✓
Create & edit stories
-
✓
Viewport presets
-
✓
Dark/light mode toggle
-
✓
Get Pro Access

Structured props editor

Tweak properties in just a few clicks. No need to write any code.
Screenshot

Save previews

Save your favourite sets of properties for each component, so you can resume where you left off.
Screenshot

Create and edit stories

Save your preview as a Storybook story, or tweak existing stories.

Writing documentation has never been easier!

Screenshot

Search components and stories

Quickly preview any other component or story with a convenient search function.
Screenshot

Use viewports

Preview your component with different screen sizes at the click of a button.
Screenshot

Dark background toggle

Switch dark background on/off easily to test your components in both modes.
Screenshot

Ready to Transform Your UI Development?

Join developers who are building better UIs faster with Preview.js Pro

Get Preview.js Pro

Try risk-free with our 14-day money-back guarantee

Upgrade to Pro