Visual Editor for React — Onlook

One codebase, one source of truth

React was designed around components. Your team has spent months — maybe years — building a component library, refining theme tokens, settling on patterns. Onlook respects all of that. It reads your existing components and uses them as the design canvas. No second library to maintain. No drift between the mockup and the live product.

Other tools generate React snippets you have to copy in. Onlook works inside your repo. The thing on the canvas is the thing in production.

Works with your React stack

Frameworks

• Next.js
• Vite
• Remix
• Astro
• Create React App
• Custom setups

Component libraries

• shadcn/ui
• Radix primitives
• Material UI
• Chakra
• Your own internal system

Styling

• Tailwind CSS
• CSS Modules
• styled-components
• emotion
• Vanilla CSS

Language

• TypeScript
• JavaScript

Design system

• Storybook

Real components

Every component on the canvas is a real component in your repo. No re-creation, no parallel design system, no drift.

AI-native

AI is built into every interaction. Generate, restyle, restructure on the canvas with natural language — without leaving your design environment.

Built on what you have

No new file format, no proprietary platform, no second source of truth. Onlook works with your real React stack — Storybook, Tailwind, shadcn, and the components your team already maintains.

Frequently asked questions

When should I use Onlook for a React project?

Use Onlook when you want designers to compose with your real React components on a visual canvas — not generate parallel artifacts you copy in later. Onlook works on any React codebase: Next.js, Vite, Remix, Astro, Create React App, or custom setups.

How much does Onlook cost?

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

Which React frameworks does Onlook support?

Onlook works with any React codebase. Next.js (App Router and Pages Router), Vite, Remix, Astro with React, and standard Create React App projects are all supported. The canvas reads the components in your repo regardless of which framework wraps them.

Do I need a specific component library?

No. Onlook reads whatever React components live in your codebase — your own design system, shadcn/ui, Radix primitives, Material UI, Chakra, or any combination. If they are real React components in your repo, Onlook can use them on the canvas.

Does Onlook produce TypeScript?

Yes. Onlook reads and writes TypeScript when your project uses it (which most modern React projects do). Plain JavaScript projects are also supported — Onlook respects whatever your codebase already uses.

How does Onlook compare to other AI design tools for React?

Most AI design tools for React generate components in a separate space — you copy code out of a chat or download a project. Onlook works inside your existing React codebase, using your real components and design tokens. Changes are written directly back to your code for your team to review.

Who owns the code I work on in Onlook?

You do. Onlook operates on the components in your own repository — there is no proprietary file format, no parallel platform, and no second copy of your code living somewhere else.