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 →
typeflowai
TypeflowAI is a no-code AI tools generator that allows users to create, customize, and embed AI-powered tools such as quizzes and calculators into websites to boost SEO, increase traffic, and generate leads quickly.
diverseshot
DiverseShot AI is a simple AI toolkit that transforms videos into photorealistic 3D Gaussian splatting scenes accessible via a browser, enabling users to create immersive 3D experiences without coding.
Inlinehelp
Inline Help is a no-code, AI-powered in-app support platform that turns knowledge bases into proactive contextual assistance via Explain This, Chatbot, Tooltips, and a unified widget to boost product adoption and reduce support tickets.
Gptprote API
Information about Gptprote API is currently unavailable due to access restrictions on the source page.
Dualite
Dualite is an AI-powered frontend engineering platform that converts design and code systems into production-ready code directly in the browser, ensuring data privacy by keeping all data local. It is designed for engineering teams and businesses to build real applications quickly and securely.
Premium Alternatives
unitedtax-ai
UnitedTax.AI offers professional tax preparation services for modern businesses and professionals, combining experienced tax professionals with AI technology to deliver faster, more accurate, and cost-effective tax filing solutions.
Aiactionfiguregenerator
AI Action Figure Generator uses AI (including GPT-4o) to create personalized, high-resolution action figure images from text prompts or uploaded photos, with customizable appearance, outfits, poses, and multiple artistic styles.
botgauge
BotGauge is an AI-driven autonomous QA solution that delivers over 80% test coverage within two weeks, enabling faster, more reliable end-to-end testing with human-verified accuracy. It is designed for engineering teams seeking to automate testing without the need for scripting or large QA teams.
Obsidian to Notes
Obsidian to Notes is a macOS app that imports your Obsidian vault into Apple Notes, preserving formatting, folder structure, attachments, and links, all running 100% offline on your Mac.
