Visual Editor for Vite — Onlook
Designed for the Vite stack
Onlook reads your Vite project the way your team built it — your components, your design tokens, your vite.config, and your existing Storybook. Designers compose with the same components your engineers ship, so there is nothing to re-create and no parallel library to maintain.
The component on the canvas is the component in your repo. When you make a change, Onlook writes the underlying TypeScript directly back to your code — your team reviews the diff in your usual git workflow.
How it works on a Vite project
- 1
Connect your repo
Onlook authenticates with GitHub and reads your Vite project structure — your components, your Tailwind config, your theme tokens, your vite.config.
- 2
Pick up your components
Your own components and your design tokens appear on the canvas immediately — exactly as they render in your Vite app.
- 3
Design with AI
Compose on the canvas. Use the chat to ask AI to restyle, restructure, or build new components. Every change is a real change in real TypeScript.
- 4
Stays in your workflow
Your team’s CI, deployment, and review processes are unchanged. Onlook is the design surface — your usual Vite pipeline ships the work.
Fast by default
Onlook works with your Vite dev server and the React setup your team already runs — single-page apps, React Router, or SSR frameworks built on Vite.
Your design system, intact
Onlook composes with the real components and design tokens already in your Vite repo — your styling, your patterns, your conventions — instead of a parallel copy that drifts out of sync.
Built on what you have
No new file format, no proprietary platform, no second source of truth. Onlook works with your existing Vite stack, your real components, and the tokens your team already maintains.
Onlook for your framework
Pick your stack and jump straight to the guide built for it.
[**Next.js**
App Router, Server Components, and the full Next.js stack.](/content/for/nextjs/index.html) [**React**
Any React codebase — Remix, Astro, Create React App, or a custom setup.](/content/for/react/index.html)
Frequently asked questions
When should I use Onlook for my Vite project?
Use Onlook when you want designers to iterate on your Vite + React codebase directly — your components, your Tailwind config, your shadcn/ui setup all work. Onlook reads your real components and lets designers edit the actual product. Real code, running live, ready for your engineers when they are.
How much does Onlook cost?
See onlook.com/pricing for current plan details and to join the waitlist.
Does Onlook work with Vite + React?
Yes. Onlook reads the React components in your Vite project regardless of how the app is wired — single-page apps, React Router setups, or SSR frameworks built on Vite. Changes you make are written back as standard React code that respects your existing patterns.
Does Onlook work with Tailwind, shadcn/ui, and other styling systems?
Yes. Onlook reads your tailwind.config and your CSS variables, so designers compose with your real theme tokens. If you use shadcn/ui, those components appear on the canvas as-is. CSS Modules and CSS-in-JS are also supported.
How does Onlook integrate with my Vite project?
Onlook authenticates with GitHub, reads your Vite project, and uses your existing Storybook setup (or scaffolds one if you do not have it) to display components on the canvas. There is no separate Onlook file format and no second copy of your design system to maintain.
Does Onlook fit into my existing deployment pipeline?
Onlook works on top of your existing Vite codebase — your CI, your hosting (Netlify, Vercel, Cloudflare Pages, GitHub Pages, or self-managed), and your team’s git workflow are all unchanged. Onlook is the design surface; deployment stays however you already do it.
Who owns the code I work on in Onlook?
You do. Onlook operates on the components in your own Vite repository — there is no proprietary file format, no parallel platform, and no second copy of your code living somewhere else.