Convert Figma logo to code with AI

onlook-dev logoonlook

The open source Cursor for Designers. Design directly in your live React app and publish your changes to code.

4,359
262
4,359
131

Top Related Projects

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

47,669

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

90,111

JavaScript API for Chrome and Firefox

31,345

A browser automation framework and ecosystem.

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

19,258

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.

47,669

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.

90,111

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.

31,345

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.

19,258

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

Figma for your React App

Onlook

The first browser-powered visual editor.
Explore the docs »

View Demo · Report Bug · Request Feature

Discord LinkedIn Twitter

Table of Contents
  1. Installation
  2. Usage
  3. Roadmap
  4. Contributing
  5. Contact
  6. Acknowledgments
  7. License

The open-source visual editor for your React Apps

Seamlessly integrate with any website or web app running on React + TailwindCSS, and make live edits directly in the browser DOM. Customize your design, control your codebase, and push changes your changes without compromise.

https://github.com/user-attachments/assets/c9bac609-5b05-417f-b2b2-e57d650d0dd6

Export-1724891449817

Built With

  • React
  • Electron
  • Tailwind
  • Vite

Stay up-to-date

Onlook officially launched our first version of Onlook on July 08, 2024 and we've shipped a ton since then. Watch releases of this repository to be notified of future updates, and you can follow along with us on LinkedIn or Substack where we write a weekly newsletter.

Getting Started

image

Installation

  1. Visit onlook.com to download the app.
  2. Run locally following this guide

Usage

Onlook will run on any React project, bring your own React project or create one using Onlook

Screenshot 2024-11-27 at 9 36 47 AM

Roadmap

image

See how we're tracking towards major milestones, and read the wiki for details on each version of Onlook. Here's a rough overview of some of the major features we're looking at:

  • Browser
  • Editor
  • Write-to-code
  • AI chat
  • Variables
  • Components
  • Hosting

Also check the open issues for a full list of proposed features (and known issues).

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

Acknowledgments

Projects we're inspired by:

License

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