25.8k

Onlook for Vite

The visual editor
for Vite teams.

Onlook works on your real Vite + React codebase. Designers edit live React components on an infinite canvas. AI helps. Every change is real code in the same repo your engineers already ship from — no parallel design system, no exported artifacts, no second source of truth.

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. 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. 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. 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. 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.

React

Any React codebase — Remix, Astro, Create React App, or a custom setup.

Frequently
asked questions

Read our FAQs

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.

See onlook.com/pricing for current plan details and to join the waitlist.

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.

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.

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.

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.

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.

Bring your team
to Onlook today

Join Waitlist