Update README (#11)

.vscode/settings.json

@@ -10,5 +10,5 @@
       "url": "https://json.schemastore.org/electron-builder"
     }
   ],
-  "github.copilot.inlineSuggest.enable": true
+  "github.copilot.inlineSuggest.enable": false
 }

README.md

@@ -1,6 +1,184 @@
-# Onlook - The first devtool for designer
 
-![Preview screenshot](public/Screenshot.png)
+<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
+<a id="readme-top"></a>
+
+
+<!-- PROJECT SHIELDS -->
+<!--
+*** I'm using markdown "reference style" links for readability.
+*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
+*** See the bottom of this document for the declaration of the reference variables
+*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
+*** https://www.markdownguide.org/basic-syntax/#reference-style-links
+-->
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![Apache License][license-shield]][license-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+[![Twitter][twitter-shield]][twitter-url]
+
+
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <a href="https://github.com/onlook-dev/studio">
+    <img src="public/node.svg" alt="Logo" width="80" height="80">
+  </a>
+
+<h3 align="center">Onlook</h3>
+
+  <p align="center">
+    The first browser-powered visual editor.
+    <br />
+    <a href="https://github.com/onlook-dev/studio"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://github.com/onlook-dev/studio">View Demo</a>
+    ·
+    <a href="https://github.com/onlook-dev/studio/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
+    ·
+    <a href="https://github.com/onlook-dev/studio/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
+  </p>
+</div>
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li><a href="#installation">Installation</a></li>
+    <li><a href="#usage">Usage</a></li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+    <li><a href="#acknowledgments">Acknowledgments</a></li>
+  </ol>
+</details>
+
+## About The Project
+
+[![Onlook Screen Shot][product-screenshot]](https://onlook.dev)
+
+Onlook lets you edit any web page. And then publish your changes to GitHub without writing any code yourself!
+
+### Built With
+* [![React][React.js]][React-url]
+* [![Electron][Electron.js]][Electron-url]
+* [![Tailwind][TailwindCSS]][Tailwind-url]
+* [![Vite][Vite.js]][Vite-url]
+
+
+### Installation
+
+1. Clone the repo
+   ```sh
+   git clone https://github.com/onlook-dev/studio.git
+   ```
+2. Install NPM packages
+   ```sh
+   npm install
+   ```
+3. Run the project
+   ```js
+   npm run dev
+   ```
+
+
+## Usage
+
+Coming soon... you'll be able to download the app.
+
+_For more examples, please refer to the [Documentation](https://onlook.dev)_
+
+
+
+## Roadmap
+
+* [X] Browser
+* [ ] Editor
+* [ ] Write-to-code
+* [ ] Components
+* [ ] Variables
+* [ ] Code Editor
+
+See the [open issues](https://github.com/onlook-dev/studio/issues) for a full list of proposed features (and known issues).
+
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+
+## License
+
+Distributed under the Apache 2.0 License. See `LICENSE.txt` for more information.
+
+## Contact
+
+Onlook Team - [@onlookdev](https://twitter.com/onlookdev) - [email protected]
+
+Project Link: [https://github.com/onlook-dev/studio](https://github.com/onlook-dev/studio)
+
+Website: [https://onlook.dev](https://onlook.dev)
+
+## Acknowledgments
+
+[Project Visbug](https://github.com/GoogleChromeLabs/ProjectVisBug)
+
+[Responsively App](https://github.com/responsively-org/responsively-app)
+
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+[contributors-shield]: https://img.shields.io/github/contributors/onlook-dev/studio.svg?style=for-the-badge
+[contributors-url]: https://github.com/onlook-dev/studio/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/studio/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/studio/stargazers
+
+[issues-shield]: https://img.shields.io/github/issues/onlook-dev/studio.svg?style=for-the-badge
+[issues-url]: https://github.com/onlook-dev/studio/issues
+
+[license-shield]: https://img.shields.io/github/license/onlook-dev/studio.svg?style=for-the-badge
+[license-url]: https://github.com/onlook-dev/studio/blob/master/LICENSE.txt
+
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
+[linkedin-url]: https://www.linkedin.com/company/onlook-dev
+
+[twitter-shield]: https://img.shields.io/badge/-Twitter-black?style=for-the-badge&logo=twitter&colorB=555
+[twitter-url]: https://x.com/onlookdev
+
+[React.js]: https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB
+[React-url]: https://reactjs.org/
+
+[TailwindCSS]: https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white
+[Tailwind-url]: https://tailwindcss.com/
+
+[Electron.js]: https://img.shields.io/badge/Electron-191970?style=for-the-badge&logo=Electron&logoColor=white
+[Electron-url]: https://www.electronjs.org/
+
+[Vite.js]: https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white
+[Vite-url]: https://vitejs.dev/
+
+[product-screenshot]: public/screenshot.png
 
-## About
-More coming soon [@Onlook](https://onlook.dev/)