Comparison
Frontman vs Onlook
Dev Tool vs Design Tool for AI Code Editing
Frontman and Onlook both use AI to help edit frontend code visually, but they're built for different people. Onlook is a Figma-like design tool that outputs real React code. Frontman is a developer tool that hooks into your running app in the browser.
Frontman is an open-source AI coding agent that installs as middleware in your dev server (Next.js, Astro, Vite). It sees the live DOM, component tree, computed CSS, and server-side context of your real running application. 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 is an open-source, YC-backed visual editor described as "Cursor for Designers." It provides a Figma-like canvas with layers, drag/resize, brand tokens, and spatial comments. Apps run in a CodeSandbox SDK web container — not your real dev server. It supports AI chat with project context, Figma import, GitHub integration, real-time collaboration, and deploy to Freestyle hosting. Primarily supports Next.js + TailwindCSS. Still under active development.
The core difference: Onlook is a design tool that generates code in a sandbox. Frontman is a dev tool that edits your real running app. Different audiences, different architectures.
Feature Comparison
| Feature | Frontman | Onlook |
|---|---|---|
| Edits your real codebase | Edits actual source files on your machine | Edits code in sandbox, export to GitHub |
| Sees live DOM & styles | From your real running app | From sandbox preview |
| 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 |
| Figma import | | |
| Real-time collaboration | | Multi-user editing, spatial comments |
| Framework-aware middleware | Hooks into Next.js/Astro/Vite runtime | Sandbox environment |
| Server-side context | Routes, logs, real backend data | Sandbox only |
| Component tree access | React fiber, Vue, Svelte | React components in sandbox |
| Multi-framework support | Next.js, Astro, Vite — React/Vue/Svelte | Next.js + TailwindCSS primarily |
| BYOK (bring your own key) | Any LLM | Uses their models |
| Works on existing projects | Designed for this | Can import from GitHub but runs in sandbox |
| Designer/PM friendly | Click and describe | Figma-like interface |
| Open source | Apache 2.0 / AGPL-3.0 | Apache 2.0 |
| Deploy built-in | | Freestyle hosting |
Edits your real codebase
Sees live DOM & styles
Visual element selection
Drag & resize elements
Figma-like canvas
Figma import
Real-time collaboration
Framework-aware middleware
Server-side context
Component tree access
Multi-framework support
BYOK (bring your own key)
Works on existing projects
Designer/PM friendly
Open source
Deploy built-in
What Onlook Does Well
Onlook has 24,800+ GitHub stars and YC backing. Its target audience is designers who want to edit real code without learning an IDE.
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.
Real-time collaboration. Multiple users can edit simultaneously with spatial comments, similar to Figma's multiplayer. This makes it viable for design reviews and pair design sessions. Frontman has no collaboration features.
Figma import. Onlook can import designs from Figma, bridging the designer-to-developer handoff. Frontman has no Figma integration.
GitHub integration and deploy. Onlook can import repositories from GitHub, create pull requests, and deploy to Freestyle hosting. It's trying to be a complete workflow from design to production.
AI chat with project context. Onlook includes AI chat that understands your project structure and can make changes across files. It also supports MCP for extending AI capabilities.
Where Frontman Is Different
Both tools involve clicking UI elements and getting code changes. The difference is where your code runs. Onlook runs your app in a sandbox. Frontman runs inside your real app.
Your real dev server, not a sandbox. Onlook runs your code in a CodeSandbox SDK web container. This means no real backend, no real API calls, no real database queries, no server-side rendering with real data. Frontman installs as middleware in your actual Next.js, Astro, or Vite dev server. It sees everything your app sees because it is your app.
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.
Edits your actual source files. Frontman writes changes directly to your source files on disk. Hot module replacement shows the result instantly in your browser. Onlook edits code inside its sandbox, and you export changes back to your repository via GitHub integration. The roundtrip adds friction when iterating quickly.
Multi-framework support. Frontman works with Next.js, Astro, and Vite (which covers React, Vue, and Svelte). Onlook primarily supports Next.js with TailwindCSS. If your project uses Astro, Vue, or Svelte, Frontman is the option that works today.
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 uses its own AI models with no BYOK option.
Who Should Use Onlook
Onlook is the better choice when visual design tools matter more than runtime context:
- Designers editing code — the Figma-like canvas, layers panel, and drag/resize feel natural for design workflows
- New Next.js + Tailwind projects — Onlook's sandbox works well for projects that don't need a real backend
- Team design reviews — real-time collaboration and spatial comments make it useful for reviewing UI changes with stakeholders
- Figma-to-code workflows — import Figma designs and iterate on them visually
- Prototyping and greenfield work — when you don't have an existing backend or runtime to connect to
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
- Non-Next.js frameworks — Astro, Vite with Vue, Svelte, or React projects that Onlook doesn't support
- BYOK and vendor-independent — you want to use your own LLM provider with no usage limits or cloud dependency
- 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
Open source, 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 (client) / AGPL-3.0 (server)
- You pay your LLM provider directly
Onlook
Open source self-hosted, cloud pricing undisclosed
- Free to self-host (Apache 2.0)
- Cloud version available (book a demo)
- Enterprise options with Docker/cloud deploy
- Deploy to Freestyle hosting included
Frequently Asked Questions
Is Frontman an alternative to Onlook?
They target different audiences. 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. Onlook targets designers who want to output real code. Frontman targets developers who want browser-aware AI coding on their existing projects.
Both are open source — what's the difference?
Architecture. Onlook runs your app in a sandboxed web container (CodeSandbox SDK). Frontman hooks into your actual dev server as middleware. Onlook sees a sandbox preview. Frontman sees your real running application with real data and real backend state. Both are open source — Onlook is Apache 2.0, Frontman is Apache 2.0 (client) / AGPL-3.0 (server).
Can designers use Frontman?
Yes, but differently. Frontman lets anyone click elements and describe changes in plain English — no IDE needed. But Onlook provides a more familiar design-tool interface with a canvas, layers panel, drag/resize, and spatial comments that designers may prefer for purely visual work.
Which supports more frameworks?
Frontman. It works with Next.js, Astro, and Vite (covering React, Vue, and Svelte). Onlook primarily supports Next.js with TailwindCSS. Vue is mentioned on Onlook's roadmap but is not practically available yet.
Which is better for existing projects?
Frontman. It's designed specifically for existing codebases — it hooks into your dev server and edits your actual source files. Onlook can import repositories from GitHub but runs the code in a sandbox, which means you lose your real backend, real APIs, and runtime context.
Why does Onlook have 24,000+ stars and Frontman has ~130?
Onlook is backed by Y Combinator, 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
One command. No account. No credit card. No prompt limits.
$ npx @frontman-ai/nextjs install Next.js $ npx @frontman-ai/vite install Vite (React, Vue, Svelte, SolidJS) $ astro add @frontman-ai/astro Astro