Skip to content

The open source, local-first Figma alternative. Design directly in your live React site and publish your changes to code.

License

Notifications You must be signed in to change notification settings

cleobnvntra/onlook

 
 

Repository files navigation

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.

Onlook.Studio.Component.Demo.for.GitHub.mp4

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.dev 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.

About

The open source, local-first Figma alternative. Design directly in your live React site and publish your changes to code.

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 78.0%
  • JavaScript 18.4%
  • PLpgSQL 2.4%
  • Rust 0.6%
  • CSS 0.5%
  • HTML 0.1%