Convert Figma logo to code with AI

onlook-dev logoonlook

The Cursor for Designers • An Open-Source Visual Vibecoding Editor • Visually build, style, and edit your React App with AI

21,270
1,436
21,270
295

Top Related Projects

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

48,796

Fast, easy and reliable testing for anything that runs in a browser.

91,008

JavaScript API for Chrome and Firefox

32,846

A browser automation framework and ecosystem.

Next-gen browser and mobile automation test framework for Node.js

20,214

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:

  1. Clone the repository:

    git clone https://github.com/onlook-dev/onlook.git
    
  2. Install dependencies:

    cd onlook
    npm install
    
  3. Set up the configuration file:

    cp config.example.js config.js
    # Edit config.js with your settings
    
  4. Start the server:

    npm start
    
  5. 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.

48,796

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.

91,008

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.

32,846

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.

20,214

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

header image

Onlook

Cursor for Designers
Explore the docs »

👨‍💻👩‍💻👨‍💻 We're hiring engineers in SF! 👩‍💻👨‍💻👩‍💻


View Demo · Report Bug · Request Feature

Discord LinkedIn Twitter

中文 | 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

Onlook-GitHub-Example

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.

image

Draw-in new divs and re-arrange them within their parent containers by dragging-and-dropping.

image

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

image

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

image

Documentation

For full documentation, visit docs.onlook.com

To see how to Contribute, visit Contributing to Onlook in our docs.

How it works

architecture
  1. When you create an app, we load the code into a web container
  2. The container runs and serves the code
  3. Our editor receives the preview link and displays it in an iFrame
  4. Our editor reads and indexes the code from the container
  5. We instrument the code in order to map elements to their place in code
  6. When the element is edited, we edit the element in our iFrame, then in code
  7. 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

Database

AI

Sandbox and hosting

Runtime

  • Bun - Monorepo, runtime, bundler
  • Docker - Container management

Contributing

image

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

image

License

Distributed under the Apache 2.0 License. See LICENSE.md for more information.