Reference
nextcanvas vs Onlook vs Editability
Three tools let you change a Next.js app by clicking it instead of finding the file. They are not really competitors — they are built for three different people. This page is here so you can tell quickly whether nextcanvas is the wrong one for you.
Written July 2026. Star counts and version numbers move; the shape of each tool is the part worth comparing.
Pick by who is doing the editing
This is the whole decision, and it is usually obvious once stated:
- A developer, on their own machine, with the repo open. nextcanvas. It lives in your existing
next devsession and writes to the files on your disk. - Someone doing design work, who wants layout and AI. Onlook. It is a visual editor with an AI chat, Tailwind class editing, and drag-and-drop — much closer to a design tool than a dev utility.
- A non-technical teammate, editing the deployed site. Editability. Editors change copy on the live site and publishing opens a GitHub commit that your normal CI redeploys.
If your actual goal is the third one — a marketer or client updating copy without you — nextcanvas cannot do it and never will. It requires a cloned repo and a running dev server. Stop here and look at Editability, or at a headless CMS with visual editing such as Sanity, TinaCMS, or Builder.io.
Side by side
| nextcanvas | Onlook | Editability | |
|---|---|---|---|
| Editor is | the developer | designer / developer | a non-technical teammate |
| Runs against | your own next dev | its own editor app | the deployed site |
| Changes land as | a direct edit to the file on disk | an edit to your source files | one GitHub commit per publish |
| Source annotation needed | none — stamped at compile time | none | wrap each block in <Editability> |
| Accounts / tokens | none | account for AI features | Google client ID + GitHub token |
| Text editing | Yes | Yes | Yes |
| Data-bound text | Yes — {speaker.name} resolved back to the source array or object | Not a focus | No — explicitly not built for dynamic app UIs |
| Styling | Tailwind classes in a Tailwind project, otherwise inline style — six properties | Tailwind classes, broad coverage | n/a — text only |
| Layout / drag-and-drop | No | Yes | No |
| AI | No | Central to the product | No |
| Ships in production | No — compiles out entirely | No | Editor bundle loads in edit mode |
| Licence | MIT | Apache-2.0 | Open source |
| Maturity | v0.2.2, one maintainer | ~26k stars, team, since 2024 | v0 |
Where nextcanvas loses
Plainly, because finding this out after installing is worse:
- Tailwind coverage is narrower. nextcanvas writes utility classes for the six properties its panel offers — colour, background, font size, weight, alignment, padding — and refuses a computed
className={cn(...)}. Onlook edits Tailwind classes across far more of the design surface. - No layout editing. Nothing is created, deleted, reordered, or dragged. It edits values in elements that already exist.
- No AI. No chat, no generation, no describe-it-and-get-a-component.
- Text from a database or API is not editable. If a value arrives at runtime it is not in your source, so there is nothing to write back to. Those elements are detected and left un-highlighted rather than failing on commit, but they are still off-limits.
- Next.js App Router only, 16.2 or newer. No Pages Router, no Vite, no plain React.
- It is new. One maintainer, v0.2.2. Onlook has two years and a team behind it.
Where nextcanvas fits better
- Nothing to annotate. An SWC plugin stamps source locations at compile time, so every eligible element is editable immediately. You do not wrap your content in anything, and removing the tool leaves no trace in your components.
- Data-driven text is editable. A heading rendered from
{speaker.name}inside a.mapover an array in your source resolves back to that array and rewrites the right entry — matched by value, so a filtered or reordered list still edits the entry you clicked. This is the capability the other two do not have. - No account, no service, no tokens. Nothing leaves your machine. There is no sign-in and nothing to configure beyond two lines of wiring.
- It is your dev server. No second app to run and no preview environment to keep in sync — the thing you are editing is the thing you were already looking at.
- Edits preserve formatting. Changes are applied as AST edits, so the diff is the string you changed and nothing else.
A related but different tool
If what you actually want is to click an element and hand its exact source location to a coding agent — rather than type the new value yourself — that is a different category, and tools built specifically for it will serve you better than any of the three above.