We're launching soon on Product Hunt – Sign up to be notified!

We're launching soon on Product Hunt – Sign up to be notified!

We're launching soon on Product Hunt!

About

Partner

2.8k
2.8k

The power of Figma
for your own React app

Onlook lets you visually edit your React app and
write your changes back to code in real-time

Onlook lets you visually edit your React app and write your changes back to code in real-time

Download the Desktop App

For Apple Silicon & Windows

Schedule a Demo

Schedule a Demo

Get started with Onlook

Link Onlook to your React project with just one command. Run this command on your project's root folder to get set up in seconds.

Link Onlook to your React project with just one command. Run this command on your project's root folder to get set up in seconds.

>> click this code to copy it

$ npx onlook

>> click this code to copy it

$ npx onlook

Build on your favorite React frameworks

Onlook supports any React app with Tailwind today, and we'll support other frameworks and styles soon.

Now in Alpha Release

Code as you design

Onlook writes reliable code you can trust, exactly where it needs to go

Opacity

85%

Fill

#00DEBA

Opacity

85%

Fill

#00DEBA

Layers

Side menu

Primary navigation

Opener

H2

Welcome to your Dashboard

Overview

Client Logo

Actions

Share

New project

Projects section

Controls

Filter

Sort

Project • 12 instances

Get into the details

Adjust layouts, change colors, modify text, and more. No setup required.

Auto Layout

Auto Layout

Auto Layout

Typography

Typography

Typography

Borders

Borders

Borders

Padding

Padding

Padding

Margins

Margins

Margins

More...

More...

More...

Coming Soon

Design that scales

Use the design system you've already built with your code in a Figma-style interface

Custom Variables

Custom Variables

Custom Variables

Insert Components

Insert Components

Insert Components

Create new Components

Create new Components

Create new Components

Variables

Assets

Color Styles

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

teal-100

teal-200

teal-300

teal-400

Teal / 500

Teal / 600

Teal / 700

Teal / 800

Variables

Assets

Text Styles

title1

36/Auto

title2

24/Auto

title3

20/Auto

largePlus

18/140

large

18/140

regularPlus

15/140

regular

15/140

smallPlus

13/140

small

33/140

microPlus

11/Auto

micro

11/Auto

Import existing project

Work on your React UI

New Onlook Project

Start a React App

Use any React App
styled with Tailwind

Bring your own projects into Onlook or start a new React app from Onlook

You own your code, all the time

You own your code,
all the time

Build exceptional interfaces without compromise

Maintain version-control
how you want

Roll-back anytime – We never ship your code to production.

Your environment means
your security

Configure your environment to your requirements – Onlook works with your setup.

Code confidently,
locally

All of your code stays on your device – it never leaves your machine.

Works with your existing
build process

No adding new components.
No migration necessary.

Audit Onlook at any time

Visit our GitHub repo and peak under the hood to see how we're building Onlook.

Open source &
actively supported

Join our community of
Designers and Engineers

Supported by contributors, advocates, and enthusiasts

View GitHub Repo

View GitHub Repo

Join our Discord

Join our Discord

Join the Onlook
Community

Supported by designers, engineers, and contributors

Join our Discord

Join our Discord

Frequently Asked Questions

Frequently
Asked Questions

What is Onlook?
Is it easy to learn?
What kinds of things can I design with Onlook?
Why would I use Onlook when I can design in a different software?
How does Onlook work with React Apps?
How do I get started with Onlook?
What do I need in order to run Onlook?
How much does Onlook cost?
Who owns the code that I generate with Onlook?
What is Onlook?
Is it easy to learn?
What kinds of things can I design with Onlook?
Why would I use Onlook when I can design in a different software?
How does Onlook work with React Apps?
How do I get started with Onlook?
What do I need in order to run Onlook?
How much does Onlook cost?
Who owns the code that I generate with Onlook?
What is Onlook?
Is it easy to learn?
What kinds of things can I design with Onlook?
Why would I use Onlook when I can design in a different software?
How does Onlook work with React Apps?
How do I get started with Onlook?
What do I need in order to run Onlook?
How much does Onlook cost?
Who owns the code that I generate with Onlook?

It's time for a change. Or two or three.

Test out new ideas, new styles, new copy, new layouts, and more

Download the Desktop App

For Apple Silicon & Windows

Download the Desktop App

For Apple Silicon & Windows

Schedule a Demo

Schedule a Demo

Schedule a Demo

http://localhost:3000/

Desktop

Layers

Pages

Header

Navigation

Main

Container

Your Dashboard

Last updated

Tuesday

Settings menu

Body

Recordings

Call 1

Call 2

Call 3

...

Notes

Footer

Assets

Variables

Color Styles

purple-400

purple-500

purple-600

purple-700

purple-800

blue-100

blue-200

blue-300

blue-400

blue-500

Open in VS Code

4 changes

Design

Interact

Share

Publish Code

Styles

Properties