Onlook
Onlook is a next-generation visual code editor designed for designers and product managers to craft web experiences with AI, enabling direct editing and real-time code generation on an infinite canvas.
Onlook is design software teams evaluate for software & gaming. Use this page to review pricing, integration signals, and the best alternatives before you commit.
Used in These Packs
Quick Overview
Best for: Software & Gaming
What it does
Design software for decision-makers comparing workflow fit and alternatives.
Best fit
Software & Gaming
Pricing snapshot
Free
Next step
Compare Onlook with similar tools before you shortlist it.
Compare this tool before you shortlist it
Review alternatives, pricing posture, and workflow fit side by side.
Onlook
Onlook is a visual code editor that bridges the gap between design and development by allowing users to design directly with code as the source of truth. It is tailored for designers, product managers, and developers who want to create, preview, and iterate on web experiences faster using AI-powered tools. Onlook supports importing existing React, Next.js, and Tailwind codebases, as well as designs from Figma, enabling seamless integration into existing workflows. The platform offers native design tool features that work 1:1 with code, including drag-and-drop editing, component customization, and version control. It is open-source to promote transparency and collaboration between designers and developers.
Onlook is an open-source visual builder that helps product teams ship faster by enabling designers and developers to work directly with production-ready code, eliminating design-dev handoff issues.
Own this listing?
Claim this page to add pricing, features, screenshots, and verified owner details.
Claim this listingKey Features
AI-Powered Design
Leverage AI to craft, preview, and iterate on websites and prototypes faster than ever.
Direct Editing
Drag-and-drop, rearrange, scale, and manipulate elements directly within the editor.
Component Customization
Create and manage reusable components that can be swapped across projects.
Import Existing Codebases
Import React, Next.js, and Tailwind codebases to build upon existing projects.
Figma Import
Bring Figma designs to life with real working products.
Version Control
Maintain revision history to never lose progress and revert changes when needed.
AI Chat
Get instant design help and feedback from AI integrated into the workflow.
Visual Builder
A visual interface that works side-by-side with code for seamless design and development.
Open Source
Fully open-source platform encouraging community contributions and transparency.
Publish and Share
Attach custom domains and share your work with the world.
Pricing
Onlook offers a free tier allowing users to craft websites without requiring a credit card, with the ability to cancel anytime.
Use Cases
Website Prototyping and Design
Design and prototype websites directly with code, enabling faster iteration and real product previews.
Product Management Collaboration
Product managers can use Onlook to visually design and communicate web experiences without deep coding knowledge.
Developer-Designer Workflow Integration
Developers and designers collaborate seamlessly with code as the source of truth, reducing handoff friction.
Import and Extend Existing Projects
Import React, Next.js, or Tailwind projects to visually edit and enhance existing web applications.
Rapid Prototyping with AI Assistance
Use AI chat and tools to quickly generate design ideas and code snippets within the editor.
Creating Visual Presentations and Mockups
Beyond websites, Onlook can be used to create presentations, mockups, and other visual content.
Integrations
React / Next.js / Tailwind
Import existing React, Next.js, and Tailwind codebases to build upon and visually edit.
Figma
Import Figma designs to convert them into working web products.
GitHub
Connect with GitHub repositories to manage and contribute to projects.
Benefits
Limitations
Frequently Asked Questions
What kinds of things can I design with Onlook?
Why would I use Onlook?
Who owns the code that I write with Onlook?
What is the difference between Onlook and other design tools?
Why is Onlook open-source?
Getting Started
- 1 Step 1: Visit the Onlook website and sign up for a free account.
- 2 Step 2: Start a new project by creating a blank project or importing an existing Next.js app or Figma design.
- 3 Step 3: Use the visual editor to drag-and-drop elements, customize components, and interact with AI chat for design assistance.
- 4 Step 4: Preview your design live and iterate with real-time code updates.
- 5 Step 5: Publish your project by attaching a custom domain and sharing it with others.
Support
Contact support via email at [email protected].
docs
Access detailed documentation at https://docs.onlook.com/.
community
Join the Discord community at https://discord.gg/ZZzadNQtns for support and collaboration.
FAQ
Read frequently asked questions at https://onlook.com/faq.
API
No public API documentation is mentioned on the website.
Not available.
Compare Onlook with similar tools
See how it stacks up against alternatives
Related Tools
View all 192 →
Weblium
Weblium is a no-code website builder that lets individuals and businesses create responsive websites and online stores using professional templates, a flexible block-based editor, built-in hosting, and 24/7 support — with a free plan and paid upgrades for custom domains and advanced features.
promptlayer
PromptLayer is a platform designed for AI engineering that offers prompt management, prompt evaluations, and large language model (LLM) observability. It enables teams to version, test, monitor, and collaborate on prompts with a no-code visual editor, empowering both technical and non-technical stakeholders.
%22%2F%3E%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22central%22%20text-anchor%3D%22middle%22%20font-family%3D%22system-ui%2C-apple-system%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2250%22%20fill%3D%22white%22%3EC%3C%2Ftext%3E%20%3C%2Fsvg%3E)
chatgpt-website-builder
ChatGPT Website Builder allows users to create apps and websites by chatting with AI, enabling the building of unlimited fullstack applications with included backend, database, hosting, SSL, and custom domain support.
Premium Alternatives
Chattyhiring
ChattyHiring provides AI-driven virtual recruiting assistants that automate candidate screening and interviews via messaging channels like WhatsApp and Email, delivering scored evaluations, transcripts, and interview summaries to help talent teams hire faster.
Sora2 – Create AI videos with sound
Sora2 is an AI-powered video generator that creates professional-quality videos with perfectly synced audio, including sound effects, dialogue, and ambient noise. It supports text-to-video and image-to-video generation with HD output and fine-grained creative control.
Aifiguregenerator
AI Figure Generator transforms user photos into high-resolution figurine designs (anime, 3D-style, Funko Pop, action figures) using AI, producing packaged collectible-style images for creators, gifts, marketing, or 3D-print reference.
Keywordinsights
Keyword Insights is an SEO platform that builds topical authority for Google and AI search by converting keyword research into clustered topic plans, AI-driven content briefs, and writing tools — plus discovery of Reddit, Quora and YouTube mention opportunities.
Fantasygen
FantasyGen is an AI-powered fantasy map generator and map maker that creates D&D battlemaps, world maps, dungeon maps, city maps, and more instantly from text prompts. It's aimed at game masters, authors, worldbuilders, and game developers who need fast, high-quality maps without drawing skills.