Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/onlook-dev/onlook
The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://github.com/onlook-dev/onlook
browser design devtool electron figma frontend hacktoberfest local-first low-code nextjs no-code react tailwindcss typescript ui vitejs webflow
Last synced: 4 days ago
JSON representation
The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
- Host: GitHub
- URL: https://github.com/onlook-dev/onlook
- Owner: onlook-dev
- License: apache-2.0
- Created: 2024-06-25T19:16:02.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-07T19:31:43.000Z (6 days ago)
- Last Synced: 2024-12-07T20:19:33.541Z (6 days ago)
- Topics: browser, design, devtool, electron, figma, frontend, hacktoberfest, local-first, low-code, nextjs, no-code, react, tailwindcss, typescript, ui, vitejs, webflow
- Language: TypeScript
- Homepage: https://onlook.dev
- Size: 21.2 MB
- Stars: 4,011
- Watchers: 21
- Forks: 245
- Open Issues: 138
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- stars - onlook-dev/onlook - The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code. (TypeScript)
- stars - onlook-dev/onlook - The open source, local-first Webflow alternative. Design directly in your live React site and publish your changes to code. (TypeScript)
README
[
](https://youtu.be/RSX_3EaO5eU)
Onlook
The first browser-powered visual editor.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
[![Discord][discord-shield]][discord-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
[![Twitter][twitter-shield]][twitter-url]
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
- [![React][React.js]][React-url]
- [![Electron][Electron.js]][Electron-url]
- [![Tailwind][TailwindCSS]][Tailwind-url]
- [![Vite][Vite.js]][Vite-url]
## 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](https://www.linkedin.com/company/onlook-dev) or [Substack](https://onlook.substack.com/) where we write a weekly newsletter.
## Getting Started
### Installation
1. Visit [onlook.dev](https://onlook.dev/) to download the app.
2. Run locally following [this guide](https://github.com/onlook-dev/onlook/wiki/Building-from-source)
### 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](<[url](https://github.com/onlook-dev/onlook/milestones)>), and read the [wiki](https://github.com/onlook-dev/onlook/wiki/Roadmap) for details on each version of Onlook. Here's a rough overview of some of the major features we're looking at:
- [x] Browser
- [x] Editor
- [x] Write-to-code
- [X] AI chat
- [ ] Variables
- [ ] Components
- [ ] Hosting
Also check the [open issues](https://github.com/onlook-dev/onlook/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](https://github.com/onlook-dev/onlook/issues).
See the [CONTRIBUTING.md](CONTRIBUTING.md) for instructions and code of conduct.
#### Contributors
## Contact
- Team: [Discord](https://discord.gg/hERDfFZCsH) - [Twitter](https://twitter.com/onlookdev) - [LinkedIn](https://www.linkedin.com/company/onlook-dev/) - [Email](mailto:[email protected])
- Project: [https://github.com/onlook-dev/onlook](https://github.com/onlook-dev/onlook)
- Website: [https://onlook.dev](https://onlook.dev)
## Acknowledgments
Projects we're inspired by:
- [Visbug](https://github.com/GoogleChromeLabs/ProjectVisBug)
- [Responsively](https://github.com/responsively-org/responsively-app)
- [Supabase](https://github.com/supabase/supabase)
- [ShadCN](https://github.com/shadcn-ui/ui)
- [hymhub/css-to-tailwind](https://github.com/hymhub/css-to-tailwind)
## License
Distributed under the Apache 2.0 License. See [LICENSE.md](LICENSE.md) for more information.
[contributors-shield]: https://img.shields.io/github/contributors/onlook-dev/studio.svg?style=for-the-badge
[contributors-url]: https://github.com/onlook-dev/onlook/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/onlook-dev/studio.svg?style=for-the-badge
[forks-url]: https://github.com/onlook-dev/onlook/network/members
[stars-shield]: https://img.shields.io/github/stars/onlook-dev/studio.svg?style=for-the-badge
[stars-url]: https://github.com/onlook-dev/onlook/stargazers
[issues-shield]: https://img.shields.io/github/issues/onlook-dev/studio.svg?style=for-the-badge
[issues-url]: https://github.com/onlook-dev/onlook/issues
[license-shield]: https://img.shields.io/github/license/onlook-dev/studio.svg?style=for-the-badge
[license-url]: https://github.com/onlook-dev/onlook/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/company/onlook-dev
[twitter-shield]: https://img.shields.io/badge/-Twitter-black?logo=x&colorB=555
[twitter-url]: https://x.com/onlookdev
[discord-shield]: https://img.shields.io/badge/-Discord-black?logo=discord&colorB=555
[discord-url]: https://discord.gg/hERDfFZCsH
[React.js]: https://img.shields.io/badge/react-%2320232a.svg?logo=react&logoColor=%2361DAFB
[React-url]: https://reactjs.org/
[TailwindCSS]: https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?logo=tailwind-css&logoColor=white
[Tailwind-url]: https://tailwindcss.com/
[Electron.js]: https://img.shields.io/badge/Electron-191970?logo=Electron&logoColor=white
[Electron-url]: https://www.electronjs.org/
[Vite.js]: https://img.shields.io/badge/vite-%23646CFF.svg?logo=vite&logoColor=white
[Vite-url]: https://vitejs.dev/
[product-screenshot]: assets/brand.png