The ultimate "vibe coding" companion for React developers. Instantly view your designs exactly as they appear in the browser without leaving VS Code.
Snapshots
AI Assistant Design Capabilities
The integrated AI Assistant is designed for deep, structural code manipulation. It understands your active file context to perform complex design tasks:
Direct Code Manipulation: It doesn't just suggest code; it writes production-ready JSX and Tailwind classes directly into your active file.
Style Direction: Translate "vibe" into UI. Prompt with directions like "Make this feel more Apple-esque with soft shadows" or "Apply a modern glassmorphism effect."
Functional Layouts: Build complex components from scratch using simple natural language, from responsive navbars to data-heavy dashboards.
Real-Time Iteration: Because the assistant writes directly to the file, your Vite-powered preview updates instantly, allowing for a seamless loop of "prompt, view, refine."
Core Features
Live Visualizer: Real-time, Vite-powered preview that stays in sync as you edit code.
Click-to-Code Sync: Click any element in the preview to jump exactly to that line in your editor.
History Panel: Automatically saves up to 50 local snapshots on manual saves and AI runs. Quickly navigate between your versions with zero risk of losing progress.
AI Coding Assistant (BYOK): Bring your own key to power your workflow with industry-leading models. Supports:
Anthropic
OpenAI
Google Gemini
OpenRouter (access to any model)
Pumpkin AI (optimized proxy)
Standalone Performance: Runs on a dedicated local port to ensure zero interference with your other projects.
Getting Started
A 3-day free trial is included. To continue using the React JSX Visualizer after the trial, a license key is required.
