onlook
The Cursor for Designers • An Open-Source Visual Vibecoding Editor • Visually build, style, and edit your React App with AI
Top Related Projects
Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
Fast, easy and reliable testing for anything that runs in a browser.
JavaScript API for Chrome and Firefox
A browser automation framework and ecosystem.
Next-gen browser and mobile automation test framework for Node.js
Cross-platform automation framework for all kinds of apps, built on top of the W3C WebDriver protocol
Quick Overview
Onlook is an open-source project management tool designed for developers and teams. It offers a streamlined interface for task tracking, project planning, and collaboration, with a focus on integration with popular development tools and version control systems.
Pros
- Seamless integration with GitHub and GitLab for issue tracking and code review
- Customizable workflows to fit various development methodologies
- Real-time collaboration features, including chat and shared boards
- Extensive API for creating custom integrations and automations
Cons
- Limited support for non-technical project management use cases
- Steeper learning curve compared to some simpler project management tools
- Requires self-hosting, which may be challenging for some users
- Currently lacks native mobile applications
Code Examples
// Creating a new task
const task = await onlook.createTask({
title: 'Implement user authentication',
description: 'Add OAuth2 support for Google and GitHub',
assignee: 'jane@example.com',
dueDate: '2023-06-30'
});
# Fetching all tasks for a specific project
tasks = onlook.get_tasks(project_id='proj_123456')
for task in tasks:
print(f"Task: {task.title}, Status: {task.status}")
# Updating task status
task = Onlook::Task.find(task_id)
task.update(status: 'in_progress')
task.save
Getting Started
To get started with Onlook, follow these steps:
-
Clone the repository:
git clone https://github.com/onlook-dev/onlook.git
-
Install dependencies:
cd onlook npm install
-
Set up the configuration file:
cp config.example.js config.js # Edit config.js with your settings
-
Start the server:
npm start
-
Access Onlook at
http://localhost:3000
and create your first project.
Competitor Comparisons
Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
Pros of Playwright
- Extensive cross-browser support (Chromium, Firefox, WebKit)
- Robust API for automation and testing
- Active development and large community support
Cons of Playwright
- Steeper learning curve for beginners
- Requires more setup and configuration
- Larger package size and resource consumption
Code Comparison
Playwright:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await browser.close();
})();
Onlook:
// No direct code comparison available due to limited
// public information about Onlook's implementation
Summary
Playwright is a comprehensive browser automation tool with broad browser support and a rich API. It's well-suited for complex testing scenarios but may require more resources and setup. Onlook, being a less known project, likely offers a more focused or specialized approach, potentially with easier setup or lighter resource requirements. However, without more information about Onlook, a detailed comparison is challenging.
Fast, easy and reliable testing for anything that runs in a browser.
Pros of Cypress
- More mature and widely adopted testing framework with extensive documentation
- Supports a broader range of browsers and testing scenarios
- Larger community and ecosystem of plugins and integrations
Cons of Cypress
- Heavier and more complex setup compared to Onlook
- Limited to JavaScript for test writing
- Can be slower for large test suites due to its architecture
Code Comparison
Cypress test example:
describe('Login', () => {
it('should log in successfully', () => {
cy.visit('/login')
cy.get('#username').type('testuser')
cy.get('#password').type('password123')
cy.get('button[type="submit"]').click()
cy.url().should('include', '/dashboard')
})
})
Onlook test example:
test('Login', async () => {
await page.goto('/login')
await page.fill('#username', 'testuser')
await page.fill('#password', 'password123')
await page.click('button[type="submit"]')
expect(page.url()).toContain('/dashboard')
})
While both frameworks allow for browser automation and testing, Cypress offers a more comprehensive solution with additional features and broader browser support. However, Onlook provides a simpler and potentially faster alternative for basic testing needs, especially for projects already using Playwright.
JavaScript API for Chrome and Firefox
Pros of Puppeteer
- More mature and widely adopted project with extensive documentation
- Supports both Chrome and Firefox browsers
- Offers a rich API for browser automation and testing
Cons of Puppeteer
- Larger footprint and slower startup time
- Limited to Chromium-based browsers and Firefox
- Steeper learning curve for beginners
Code Comparison
Puppeteer:
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
Onlook:
const browser = await onlook.launch();
const page = await browser.newPage();
await page.navigate('https://example.com');
await page.screenshot('example.png');
await browser.close();
Both libraries offer similar functionality for browser automation, but Puppeteer provides a more comprehensive set of features and broader browser support. Onlook, being a newer project, focuses on simplicity and ease of use, potentially making it more accessible for beginners or simpler automation tasks. However, Puppeteer's extensive ecosystem and mature codebase make it a more robust choice for complex web scraping and testing scenarios.
A browser automation framework and ecosystem.
Pros of Selenium
- Mature and widely adopted web automation framework with extensive documentation
- Supports multiple programming languages (Java, Python, C#, etc.)
- Large community and ecosystem of tools and extensions
Cons of Selenium
- Can be slow and resource-intensive for large-scale testing
- Requires additional setup and configuration for different browsers
- May struggle with dynamic web content and single-page applications
Code Comparison
Selenium (Python):
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://example.com")
element = driver.find_element(By.ID, "example-id")
element.click()
driver.quit()
Onlook:
// No code sample available for Onlook as it's a private repository
// and there's no public documentation or examples to reference
Additional Notes
Selenium is a well-established open-source project for browser automation and testing, while Onlook appears to be a private repository with limited public information. Without access to Onlook's codebase or documentation, it's challenging to provide a comprehensive comparison. Selenium's widespread use and extensive features make it a popular choice for web automation tasks, but it may have performance limitations in certain scenarios.
Next-gen browser and mobile automation test framework for Node.js
Pros of WebdriverIO
- Larger community and more extensive documentation
- Supports a wider range of browsers and devices
- More robust and feature-rich for end-to-end testing
Cons of WebdriverIO
- Steeper learning curve for beginners
- Requires more setup and configuration
- Can be slower for simple test scenarios
Code Comparison
WebdriverIO:
describe('My Login application', () => {
it('should login with valid credentials', async () => {
await browser.url(`https://the-internet.herokuapp.com/login`);
await $('#username').setValue('tomsmith');
await $('#password').setValue('SuperSecretPassword!');
await $('button[type="submit"]').click();
await expect($('#flash')).toBeExisting();
});
});
Onlook:
// No direct code comparison available due to limited public information about Onlook's codebase
Summary
WebdriverIO is a well-established, feature-rich end-to-end testing framework with broad browser support and extensive documentation. It offers more capabilities but may require more setup and have a steeper learning curve. Onlook, being a newer project, likely has a simpler setup process and may be easier for beginners to use, but potentially with fewer features and less community support. The choice between the two would depend on the specific project requirements and the team's expertise.
Cross-platform automation framework for all kinds of apps, built on top of the W3C WebDriver protocol
Pros of Appium
- Mature and widely adopted open-source mobile app automation framework
- Supports multiple platforms (iOS, Android, Windows) and programming languages
- Large community and extensive documentation
Cons of Appium
- Can be complex to set up and configure
- Performance may be slower compared to native automation tools
- Requires separate drivers for different platforms
Code Comparison
Appium (JavaScript):
const driver = await wdio.remote(opts);
await driver.setImplicitTimeout(5000);
await driver.$('~myButton').click();
await driver.deleteSession();
Onlook (No code available for comparison)
Additional Notes
Onlook appears to be a private or less-known repository, as there is limited public information available. Without access to its codebase or documentation, a detailed comparison with Appium is not possible. Appium, being a well-established open-source project, offers more transparency and readily available resources for evaluation.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME

Onlook
Cursor for Designers
Explore the docs »
ð¨âð»ð©âð»ð¨âð» We're hiring engineers in SF! ð©âð»ð¨âð»ð©âð»
View Demo · Report Bug · Request Feature
䏿 | Español | Deutsch | français | Português | Ð ÑÑÑкий | æ¥æ¬èª | íêµì´
An Open-Source, Visual-First Code Editor
Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make edits directly in the browser DOM with a visual editor. Design in realtime with code. An open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.
ð§ ð§ ð§ Onlook is still under development ð§ ð§ ð§
We're actively looking for contributors to help make Onlook for Web an incredible prompt-to-build experience. Check the open issues for a full list of proposed features (and known issues), and join our Discord to collaborate with hundreds of other builders.
What you can do with Onlook:
-
Create Next.js app in seconds
- Start from text or image
- Use prebuilt templates
- Import from Figma
- Start from GitHub repo
-
Visually edit your app
- Use Figma-like UI
- Preview your app in real-time
- Manage brand assets and tokens
- Create and navigate to Pages
- Browse layers
- Manage project Images
- Detect and use Components â Previously in Onlook Desktop
-
Development Tools
- Real-time code editor
- Save and restore from checkpoints
- Run commands via CLI
- Connect with app marketplace
-
Deploy your app in seconds
- Generate sharable links
- Link your custom domain
-
Collaborate with your team
- Real-time editing
- Leave comments
Getting Started
Available soon with a hosted app or run locally.
Usage
Onlook will run on any Next.js + TailwindCSS project, import your project into Onlook or start from scratch within the editor.
Use the AI chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code.
Draw-in new divs and re-arrange them within their parent containers by dragging-and-dropping.

Preview the code side-by-side with your site design.

Use Onlook's editor toolbar to adjust Tailwind styles, directly manipulate objects, and experiment with layouts.

Documentation
For full documentation, visit docs.onlook.com
To see how to Contribute, visit Contributing to Onlook in our docs.
How it works

- When you create an app, we load the code into a web container
- The container runs and serves the code
- Our editor receives the preview link and displays it in an iFrame
- Our editor reads and indexes the code from the container
- We instrument the code in order to map elements to their place in code
- When the element is edited, we edit the element in our iFrame, then in code
- Our AI chat also has code access and tools to understand and edit the code
This architecture can theoretically scale to any language or framework that displays DOM elements declaratively (e.g. jsx/tsx/html). We are focused on making it work well with Next.js and TailwindCSS for now.
For a full walkthrough, check out our Architecture Docs.
Our Tech Stack
Front-end
- Next.js - Full stack
- TailwindCSS - Styling
- tRPC - Server interface
Database
AI
- AI SDK - LLM client
- OpenRouter - LLM model provider
- Morph Fast Apply - Fast apply model provider
- Relace - Fast apply model provider
Sandbox and hosting
- CodeSandboxSDK - Dev sandbox
- Freestyle - Hosting
Runtime
Contributing
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also open issues.
See the CONTRIBUTING.md for instructions and code of conduct.
Contributors
Contact
- Team: Discord - Twitter - LinkedIn - Email
- Project: https://github.com/onlook-dev/onlook
- Website: https://onlook.com
License
Distributed under the Apache 2.0 License. See LICENSE.md for more information.
Top Related Projects
Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
Fast, easy and reliable testing for anything that runs in a browser.
JavaScript API for Chrome and Firefox
A browser automation framework and ecosystem.
Next-gen browser and mobile automation test framework for Node.js
Cross-platform automation framework for all kinds of apps, built on top of the W3C WebDriver protocol
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot