onlook
The open source Cursor for Designers. Design directly in your live React app and publish your changes to code.
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
The first browser-powered visual editor.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
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
Built With
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
Installation
- Visit onlook.com to download the app.
- Run locally following this guide
Usage
Onlook will run on any React project, bring your own React project or create one using Onlook
Roadmap
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
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
Acknowledgments
Projects we're inspired by:
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