Onlook OGS
Designers
Design the front-end, model the back-end, plan the work.
Three kinds of project, each with AI built in.
Minimalist Interior with Dramatic Lighting
Black Leather Bar Stool with Brass Accents
Spikey Ceramic Iron Metal Sculpture
Black Bar Stool Silhouette Design
Ceramic Brutalist Objects with Spikes
Brutalist Dark Glass Vase Sculpture
Golden Muted Interior with Sharp Lines
Contemporary Brutalist Interior Design
Minimalist Zig-Zag Chair Design
Minimalist Metallic Sheer Design
Lounge Chair Against Clean Wall
Metallic Chair with Brutalist Design
Living Room with Metal Furniture Design
.jpg)
Metallic Brushed Metal Chair Design
Black Leather Furniture Design
Minimalist Interior with Dramatic Lighting
Black Leather Bar Stool with Brass Accents
Black Bar Stool Silhouette Design
Ceramic Brutalist Objects with Spikes
Brutalist Dark Glass Vase Sculpture
Golden Muted Interior with Sharp Lines
Contemporary Brutalist Interior Design
Minimalist Zig-Zag Chair Design
Minimalist Metallic Sheer Design
Lounge Chair Against Clean Wall
Spikey Ceramic Iron Metal Sculpture
Metallic Chair with Brutalist Design
Living Room with Metal Furniture Design
Metallic Brushed Metal Chair Design
- Click any element and restyle it
- Layers, pages and a sitemap of every link
- AI that writes into your own files
- Publish to a link or your own domain
Three projects.
One workspace.
Plan it on a board, model its data, design its pages. Each project opens in an editor built for that job, with its own AI and your team beside you.
Design the site people will actually visit.
Start blank or upload the HTML you already have. Every change on the canvas is written into plain .html and .css files, so what you see is what ships.
Model the data behind it, and query it for real.
Draw a PostgreSQL schema as an ER diagram, fill it with sample rows and run real SQL. Postgres runs in your browser, so there is nothing to install.
+create table reviews (+ id int8 primary key,+ product_id int8 references products(id),+ user_id uuid references users(id),+ rating int2 check (rating between 1 and 5)+);alter table orders- add column note varchar(80);+ add column note text;
Plan the product before anyone builds it.
Lay out the brief, the people it is for and the journeys they take. Then turn it into requirements, tasks and a schedule, on one board the whole team edits live.
AI • Code • Design
Side-by-side-by-side
Drag, resize, and arrange elements directly on the canvas. The HTML is rewritten as you go — no build step in between.
Pages
Every page is a real .html file. index.html is /, about.html is /about — add one and the route exists.
Versions
Never lose your progress – revert when you need to
Reference images, designs, and docs in chat. AI sees what you see — no more explaining from scratch.
Your palette, type and spacing live in styles.css. AI follows them on every edit. No drift, no off-brand pages.
Layers
See the HTML element tree of every page. Click any layer to select it on the canvas.
...and in
every project
One workspace for the teams
inside your company
Frequently
asked questions
Onlook is one workspace for building a product, with three kinds of project. Front-End Design edits a real HTML site on a live canvas. Back-End Design plans a PostgreSQL database as an ER diagram you can fill with rows and query. A Planning Board holds the brief, the requirements, the schedule and the work. Each one has its own AI.
Sign up, press New project and pick the kind you need: a Front-End Design (start from a blank site or upload the HTML you already have), a Back-End Design, or a Planning Board. You can have as many of each as you like.
Draw tables, columns, keys and relations as an ER diagram, fill the tables with sample rows and run real SQL against them. PostgreSQL runs right in your browser, so there is nothing to install. Save versions and compare them, and export a SQL script or the diagram as PNG, SVG or PDF.
Planning a product or a feature before it is built. Put stickies, personas, stories, journeys and flows on an infinite canvas, then use the Workspace pages for knowledge, requirements, the schedule, a kanban Workflow, your team and a dashboard. The board’s AI reads all of it and can draft requirements and tasks for you.
Traditional design tools create mockups that have to be rebuilt in code. In Onlook what you edit IS the site — styles, text and layout are saved straight into the .html and .css files your visitors will load.
A chat-only generator gives you code you have to read to review. Onlook puts the running page next to the chat, so you can click an element, adjust it by hand, undo, or roll back to an earlier version.
No. The canvas, layers panel, and style controls work like a design tool. The code editor is there when you want it, but you never have to open it.
Static HTML sites — plain .html, .css and .js files with no build step. Style with Tailwind through its browser build, or with your own CSS tokens in styles.css. Either way the colors and fonts are editable from the design panel.
Publish your site to a preview link, or connect your own custom domain. Publishing compiles the Tailwind utilities the site actually uses into a plain .css file, so what ships is ordinary static files. You can also export the whole site and host it anywhere.
Everything you make with Onlook is yours. A site is ordinary HTML, CSS and JavaScript with nothing locking it in, and a database design exports as a plain SQL script. Export either at any time.