Visual Editor for Next.js — Onlook
Designed for the Next.js stack
Onlook reads the App Router (or Pages Router), your Tailwind config, your shadcn/ui components, your Server Components, and your existing Storybook. Designers compose using the same components your engineers ship — no re-creating anything, no maintaining a parallel library.
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 Next.js project
Connect your repo
Onlook authenticates with GitHub and reads your Next.js project structure — App Router routes, components, Tailwind config, theme tokens.Pick up your components
Your shadcn/ui components, your own components, your design tokens — all of them appear on the canvas immediately.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.Stays in your workflow
Your team’s CI, deployment, and review processes are unchanged. Onlook is the design surface — your usual Next.js pipeline ships the work.
App Router native
Server Components, client components, layouts, route groups — Onlook respects the Next.js conventions your team already follows.
Tailwind + shadcn ready
Your tailwind.config is the design system. Your shadcn/ui components are the building blocks. Onlook reads both.
Built on what you have
No new file format, no proprietary platform, no second source of truth. Onlook works with your existing Next.js stack, your real components, and the tokens your team already maintains.
Frequently asked questions
When should I use Onlook for my Next.js project?
Use Onlook when you want designers to iterate on your Next.js codebase directly — App Router, Server Components, Tailwind, shadcn/ui 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 the Next.js App Router?
Yes. Onlook reads the components in your Next.js codebase regardless of router — App Router or Pages Router. Server Components are detected and displayed correctly on the canvas, and 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 (which most modern Next.js apps do), those components appear on the canvas as-is. CSS-in-JS and CSS Modules are also supported.
How does Onlook integrate with my Next.js project?
Onlook authenticates with GitHub, reads your Next.js 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 Next.js codebase — your CI, your hosting (Vercel, Netlify, 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 Next.js repository — there is no proprietary file format, no parallel platform, and no second copy of your code living somewhere else.