Carrd
One‑page site builder for simple personal pages, portfolios, and landing pages
Onlook
AI‑powered visual editor that builds Next.js apps in the browser
Onlook lets designers create, style, and edit React‑based Next.js sites visually, with AI assistance, real‑time preview, and direct DOM‑to‑code synchronization—all in a browser‑based editor.
Overview
Highlights
AI chat that generates and edits code from natural language
Visual, Figma‑like UI with drag‑and‑drop layout editing
Instant side‑by‑side code and design preview
One‑click Next.js project scaffolding with TailwindCSS
Pros
- Seamless visual‑to‑code workflow eliminates manual hand‑coding
- Built on familiar Next.js and Tailwind stack
- Real‑time preview accelerates iteration
- Open‑source Apache‑2.0 license encourages community contributions
Considerations
- Currently limited to Next.js/Tailwind projects
- Feature set still incomplete; many roadmap items unchecked
- AI capabilities depend on external LLM providers
- Self‑hosting requires Node/Bun environment setup
Managed products teams compare with
When teams consider Onlook, these hosted platforms usually appear on the same shortlist.
Looking for a hosted option? These are the services engineering teams benchmark against before choosing open source.
Fit guide
Great for
- Designers who want to prototype React sites without writing code
- Front‑end engineers seeking rapid UI iteration with AI assistance
- Teams building Next.js applications with TailwindCSS
- Open‑source contributors interested in visual development tools
Not ideal when
- Projects using frameworks other than Next.js or non‑Tailwind CSS
- Large enterprise apps requiring advanced access control out‑of‑the‑box
- Users needing full offline capability without a server
- Designers who prefer purely sketch‑based tools without code exposure
How teams use it
Rapid MVP prototyping
Generate a functional Next.js prototype from a text prompt in minutes, then tweak layout visually.
Design hand‑off for developers
Designers edit UI in the visual editor while developers see exact code changes instantly, reducing miscommunication.
AI‑driven UI refinement
Use the AI chat to suggest accessibility improvements and automatically apply Tailwind classes.
Component library creation
Detect reusable components, extract them, and manage them through the built‑in component panel for future projects.
Tech snapshot
TypeScript99%
CSS1%
JavaScript1%
PLpgSQL1%
Dockerfile1%
HTML1%
Frequently asked questions
Do I need to install anything to use Onlook?
Onlook can be run locally on any machine with Node/Bun, or accessed via the upcoming hosted version; no additional IDE plugins are required.
Which frameworks are supported?
The editor currently works with Next.js projects that use TailwindCSS; support for other React frameworks is planned.
How does the AI integration work?
Onlook connects to external LLM providers through the AI SDK (e.g., OpenRouter) and uses the chat interface to generate or modify code based on user prompts.
Can I collaborate with teammates in real time?
Real‑time collaborative editing is on the roadmap but not yet available; you can share a preview link for feedback.
Is my project data private?
When running locally, all code stays on your machine. The hosted service follows standard privacy practices outlined in its documentation.
Project at a glance
Active- Stars
- 24,464
- Watchers
- 24,464
- Forks
- 1,807
LicenseApache-2.0
Repo age1 year old
Last commit3 weeks ago
Primary languageTypeScript
Last synced 23 hours ago