Onlook

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.

Free
#197 in NoCode / LowCode (197 tools)
Added 0 year ago
30023 directory views this week

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 listing

Key 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

Free Tier Available

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

Design directly with code as the source of truth, ensuring accuracy and reducing translation errors.
Accelerate web development with AI-powered design and instant code generation.
Seamlessly integrate design and development workflows to improve collaboration.
Open-source platform providing transparency and community-driven improvements.
Supports importing existing codebases and Figma designs for flexible project workflows.
Version control and component management help maintain project organization and consistency.

Limitations

Onlook is not designed for mobile use and requires a larger screen for optimal experience.
Pricing details beyond the free tier are not publicly detailed on the website.

Frequently Asked Questions

What kinds of things can I design with Onlook?
You can prototype, ideate, and create websites from scratch with Onlook.
Why would I use Onlook?
Onlook lets you design in the real product with code as the source of truth, enabling instant translation of designs to code.
Who owns the code that I write with Onlook?
The code you create with Onlook is yours; it is written locally to your files and not hosted off your device.
What is the difference between Onlook and other design tools?
Onlook is a visual editor for code, allowing you to create and style with code as the source of truth, unlike other tools that focus mainly on ideation.
Why is Onlook open-source?
Onlook is open-source to give developers transparency and to bridge the divide between design and development, making developers first-class citizens alongside designers.

Getting Started

  1. 1 Step 1: Visit the Onlook website and sign up for a free account.
  2. 2 Step 2: Start a new project by creating a blank project or importing an existing Next.js app or Figma design.
  3. 3 Step 3: Use the visual editor to drag-and-drop elements, customize components, and interact with AI chat for design assistance.
  4. 4 Step 4: Preview your design live and iterate with real-time code updates.
  5. 5 Step 5: Publish your project by attaching a custom domain and sharing it with others.

Support

email

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

Available: No
Documentation:

No public API documentation is mentioned on the website.

Rate Limits:

Not available.

Compare Onlook with similar tools

See how it stacks up against alternatives

Related Tools

View all 197 →
Free
Taskade

Taskade

Taskade Genesis is a no-code/low-code platform for building "living" software—AI apps, agents, automations, portals and dashboards—by describing an app in a prompt; it targets makers, teams, and organizations that want integrated AI-driven workflows and deployable web apps.

NoCode / LowCode
Freemium
Shuffle CLI

Shuffle CLI

Shuffle is an online visual editor designed for busy developers to quickly create beautiful, responsive, and error-free HTML templates using popular front-end technologies like Tailwind CSS, Bootstrap, Material-UI, Bulma, and React. It offers a vast library of UI components and supports exporting clean source code for easy deployment.

NoCode / LowCode Design
Free
Floot

Floot

Floot is an AI-powered platform that enables entrepreneurs to build fully-featured web apps quickly without coding. It offers an all-in-one solution including hosting, backend, database, user management, and live support, designed to help users turn ideas into products efficiently.

NoCode / LowCode AI Coding Assistants
Contact for pricing
Plotform

Plotform

Plotform is a tool related to Streamlit, potentially offering functionalities or integrations with the Streamlit framework for building web apps.

NoCode / LowCode AI Scriptwriting
Freemium
axiom

axiom

Axiom.ai is a no-code browser automation platform that enables users to automate website actions, web scraping, data entry, and spreadsheet automation quickly and without coding, using a Chrome extension and integrations with tools like ChatGPT and Zapier.

NoCode / LowCode
Free
Promptmate

Promptmate

Promptmate is a no-code platform for building AI-powered apps and multi-step workflows that combine multiple AI systems, data extenders and automations to accelerate content, SEO, social and marketing processes.

NoCode / LowCode
Contact for pricing
data-donkee

data-donkee

Data Donkee is an AI-powered, code-free web data extraction tool that enables users to easily collect and analyze structured web data by describing their needs in natural language and defining output with JSON schema.

NoCode / LowCode
Paid
actionize-ai

actionize-ai

Actionize is a no-code platform that enables users to connect custom GPTs to thousands of apps via popular automation tools like Zapier and Make.com, simplifying the integration of external data and workflows into GPTs.

NoCode / LowCode

Premium Alternatives

Paid
enso

enso

enso is an agentic growth lab that deploys always-on AI agents across platforms (Google, Reddit, LinkedIn, Wikipedia, ChatGPT, social and community channels) to detect demand, find platform openings, and convert them into growth before competitors notice.

AI Agents
High-growth
Paid
Auralis

Auralis

Auralis is an enterprise AI-powered customer support platform that deploys customizable AI agents to automate up to ~60% of support processes, accelerate resolution times, and improve CSAT while integrating with existing tools and maintaining enterprise-grade security.

AI Agents
Enterprise-ready High-growth
Paid
lasso

lasso

Lasso is an all-in-one affiliate marketing tool designed to help creators increase their affiliate revenue by automating link management, optimizing conversions, and providing detailed tracking and analytics.

Marketing
Paid
askppc

askppc

askPPC is an AI-powered tool that simplifies Amazon PPC data analysis by allowing users to ask questions in plain English and receive fast, clear answers from up to 12 months of advertising data.

Advertising
Paid
documentpro

documentpro

DocumentPro is an AI-powered platform that automates document processing and workflow, significantly reducing manual data entry effort and errors while increasing speed and accuracy for businesses.

Automation
Enterprise-ready
Paid
Swiftspeed

Swiftspeed

Swiftspeed is a no-code AI-driven app builder that creates native iOS, Android and PWA apps using an AI agent and a visual editor, enabling businesses to design, publish, monetize, and scale mobile apps without writing code.

NoCode / LowCode
High-growth
Paid
Kaiber

Kaiber

Superstudio by Kaiber is an AI-powered creative canvas that combines tools for image, video, and sound production, enabling artists, designers, musicians, and creators to train custom models, storyboard, animate, and produce cohesive visuals from a single interface.

Generative Video
Paid
style-ai

style-ai

Conversion (formerly StyleAI) is an enterprise AI marketing platform designed to automate and optimize SEO, Google Ads, and marketing automation workflows. It empowers businesses with AI-driven tools for backlink building, competitor analysis, review management, and listing management to accelerate organic traffic and improve marketing efficiency.

SEO

Explore Related Categories

Explore by Outcome