Comparison
Frontman vs Onlook
Dev Tool vs Design Tool for AI Code Editing
Onlook is an open-source visual React editor from onlook-dev/onlook on GitHub. Frontman and Onlook both use AI to help edit frontend code visually, but they emphasize different workflows. Onlook is a visual design and code canvas for teams working directly in React codebases. Frontman is a browser-first agent that connects to your running app and framework runtime.
Frontman is a source-available AI coding agent with a distributed architecture. Browser tools inspect the live DOM and computed CSS, the local framework integration (Next.js, Astro, Vite) provides component and filesystem context, and the server orchestrates the agent loop and persists task history. You click elements in your browser, describe changes in plain English, and Frontman edits the actual source files with hot reload. Free and unlimited — bring your own API keys.
Onlook describes itself as \"Cursor for Designers.\" Teams can import an existing React codebase and design directly in real code through a visual canvas. It supports Next.js, React, Vite, Storybook, and shadcn, with direct editing, reusable components, version history, AI chat, layers, brand controls, collaboration, and publishing.
The core difference: Onlook centers a visual design and code canvas. Frontman centers a browser-first agent with framework runtime context from your running app. Different interfaces and context models for different workflows.
Disclosure: This page is published by the Frontman team. We've done our best to present Frontman and Onlook accurately and fairly, but we are naturally biased toward our own product. We encourage you to try both tools and decide for yourself.
Capability and product-positioning facts last checked: . Pricing figures retain their publication snapshots and are not covered by this review date. Sources: Frontman documentation, Frontman source repository, Onlook official website, Onlook source code
Feature Comparison
| Feature | Frontman | Onlook |
|---|---|---|
| Edits your real codebase | Edits actual source files on your machine | Imports and edits existing React codebases |
| Sees live DOM & styles | From your real running app | Direct visual editing in the code canvas |
| Visual element selection | Click to select in browser | Figma-like canvas with layers |
| Drag & resize elements | Figma-like drag/resize on canvas | |
| Figma-like canvas | Infinite canvas with design tools | |
| Reusable components | Works with components in your existing app | Create and reuse components visually |
| Real-time collaboration | Collaborative team design workflow | |
| Browser/framework runtime context | Live app, DOM, component mapping, routes, and logs | Visual design and code canvas for supported React projects |
| Supported project ecosystems | Next.js, Astro, Vite — React/Vue/Svelte | Next.js, React, Vite, Storybook, and shadcn |
| BYOK (bring your own key) | Any LLM | Hosted AI chat; BYOK not documented in reviewed sources |
| Works on existing projects | Designed for this | Imports existing React codebases |
| Designer/PM friendly | Click and describe | Figma-like interface |
| Source availability | Source-available: Apache-2.0 browser/JS; GPL-2.0-or-later WordPress; AGPL-3.0-only server plus AI Supplementary Terms | Open source (Apache 2.0) |
| Publishing built-in | Built-in publishing workflow |
Edits your real codebase
Sees live DOM & styles
Visual element selection
Drag & resize elements
Figma-like canvas
Reusable components
Real-time collaboration
Browser/framework runtime context
Supported project ecosystems
BYOK (bring your own key)
Works on existing projects
Designer/PM friendly
Source availability
Publishing built-in
What Onlook Does Well
Onlook calls itself \"Cursor for Designers\" and gives design teams a visual way to work directly in real React code.
Figma-like editing experience. Onlook provides a canvas, layers panel, drag/resize, and visual property editors that feel familiar to designers. You can select elements, move them around, adjust spacing and typography — all without touching code. This is a different interaction model from text-based AI coding.
Collaboration and version history. Teams can collaborate while retaining version history, making the canvas useful for shared design work in a codebase. Frontman has no collaboration features.
Existing React codebases. Onlook can import existing React projects and supports Next.js, Vite, Storybook, and shadcn workflows instead of requiring teams to start from generated output.
Brand controls and publishing. Built-in brand controls and publishing extend the workflow beyond individual visual edits.
AI chat and direct editing. Onlook combines AI chat with direct visual editing, layers, and reusable components so teams can choose between prompting and hands-on design changes.
Where Frontman Is Different
Both tools support visual code changes in existing projects. Onlook centers a design-oriented canvas; Frontman centers the running app in your browser and adds local framework runtime context.
Running-app context. Frontman's local integration connects to your Next.js, Astro, or Vite dev server, while browser tools inspect the rendered app and the Frontman server orchestrates the agent loop. Onlook's product experience centers visual design and code editing rather than this browser-first framework integration model.
Framework middleware integration. Frontman hooks into the framework runtime — @frontman-ai/nextjs, @frontman-ai/astro, or @frontman-ai/vite. This gives it access to the React fiber tree, Vue reactivity graph, component props and state, server-side routes, and server logs. When you click a button, Frontman knows which component rendered it, what props it received, and what API endpoint it calls.
Browser-first editing loop. Frontman writes changes directly to your source files on disk, and hot module replacement shows the result in your actual browser and dev server. Onlook also works with real code, but presents it through a visual design and code canvas.
Different framework coverage. Frontman works with Next.js, Astro, and Vite across React, Vue, and Svelte. Onlook's documented support centers React projects using Next.js or Vite, with Storybook and shadcn support.
BYOK and truly free. Frontman lets you bring your own API keys — Claude, ChatGPT, OpenRouter, or any OpenAI-compatible API. No usage limits, no credits, no subscription from Frontman. Onlook's reviewed official sources describe hosted AI chat but do not document BYOK.
Who Should Use Onlook
Onlook is the better choice when a visual design and code canvas fits the team's workflow:
- Designers editing code — the Figma-like canvas, layers panel, and drag/resize feel natural for design workflows
- Teams designing in existing React code — import the codebase and edit it through a visual canvas
- Team design reviews — collaboration and version history support shared iteration
- Design-system workflows — reusable components, layers, Storybook, shadcn, and brand controls keep visual work structured
- Visual publishing workflows — move from direct editing and AI chat to a built-in publishing step
Who Should Use Frontman
Frontman is the better choice when you need to edit an existing, running application:
- Existing codebases — your app is already built, has a real backend, real API integrations, and you need to edit the frontend with full context
- Developers, not designers — you think in components and props, not layers and frames, and want AI that understands your framework runtime
- Server-side context matters — you need the AI to understand routes, server logs, API responses, and real database state alongside the visual UI
- Broader framework coverage — Astro, Vue, and Svelte projects alongside Next.js and Vite React apps
- BYOK and vendor-independent — you want to use your own LLM provider and keep a self-hostable workflow
- Quick iteration on live apps — click an element in your browser, describe the change, see it instantly via hot reload on your real dev server
Also see: Frontman vs Stagewise for a comparison with another browser-based AI coding tool, or Frontman vs Cursor for a comparison with an AI-powered IDE.
Pricing Comparison
Frontman
Source-available, BYOK
- Unlimited usage, no caps or credits
- Bring your own API keys (Claude, ChatGPT, OpenRouter)
- Or sign in with Claude/ChatGPT subscription via OAuth
- Apache-2.0 browser/JS; GPL-2.0-or-later WordPress; AGPL-3.0-only server plus AI Supplementary Terms
- You pay your LLM provider directly
Onlook
Open source and paid cloud options
- Free and open-source (Apache 2.0 + AGPL-3.0 hybrid paths)
- Cloud pricing undisclosed (contact for enterprise)
- Figma import and design-to-code workflows
- Deploy through Freestyle with hosting options
Frequently Asked Questions
Is Frontman an alternative to Onlook?+
Yes, if you need visual AI editing for an existing app; no, if you want a Figma-like design canvas. Onlook is a design tool for creating and editing UI visually with a Figma-like interface. Frontman is a dev tool for editing existing apps by clicking elements in your browser.
How do their source licenses differ?+
Onlook is open source. Frontman is source-available: its browser client and JavaScript framework integrations are Apache-2.0, its WordPress plugin is GPL-2.0-or-later, and its server is AGPL-3.0-only with AI Supplementary Terms. Their architectures also differ. Onlook provides a visual design and code canvas for teams working directly in a React codebase. Frontman uses browser tools, a local framework integration, and a server to work with your real running application and its backend context.
Can designers use Frontman?+
Yes, but differently. Frontman lets anyone click elements and describe changes in plain English — no IDE needed. Onlook provides a more familiar design-tool interface with a canvas, layers, direct editing, reusable components, brand controls, and collaboration for teams designing in code.
Which supports more frameworks?+
Their support differs. Frontman integrates with Next.js, Astro, and Vite across React, Vue, and Svelte. Onlook supports React codebases through Next.js and Vite, plus Storybook and shadcn workflows.
Which is better for existing projects?+
Both can work with existing code. Onlook can import an existing React codebase so teams can design directly in real code. Frontman is designed around an already running app: browser tools and framework integrations connect rendered elements to source files, component context, routes, and logs.
Why does Onlook have more GitHub stars than Frontman?+
Onlook is YC-backed, has been around longer, and targets a larger audience that includes both designers and developers. Frontman is newer and targets a more specific niche: developers who want browser-aware AI coding on their existing projects with full runtime context.
Try Frontman
Self-host in one command or use hosted Frontman Pro now.
$ npx @frontman-ai/nextjs installNext.js$ npx @frontman-ai/vite installVite (React, Vue, Svelte, SolidJS)$ astro add @frontman-ai/astroAstro