Onlook
The Onlook App • Instant Design-to-Code • Start from scratch • Cursor & Zed • Text editing and more! #473
drfarrell
announced in
Announcements
The Onlook App • Instant Design-to-Code • Start from scratch • Cursor & Zed • Text editing and more!
#473
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
As a reminder, we're building Onlook – an open-source, local-first alternative to Webflow. In other words, the quickest way to visually build UIs in code.
Hey Onlookers!
We're way overdue for a GitHub Announcement, so we're excited to share some of the cool things we've been cooking up. Scroll all the way down to also catch a 👋 from the team!
New Features
The editor gets a fresh new look
What originally was dark and devoid of life, has transcended to be a glassy, more modern editor. Feast your eyes on upgraded inputs, editing panels, frosted-glass toolbars, and an upgraded empty-state welcoming you to the app.
Instant Design-to-Code
Every time you make an edit in Onlook, your changes will be written in-code in real-time. If you want to see how this works, you can check out this video walkthrough that Kiet made.
Create or Import a React App directly in Onlook
Now you can start a brand new React App directly in Onlook. Choose a folder of where it should go, then run your app. Alternatively, if you have a project running on React and Tailwind, you can import it into Onlook. Both methods are super quick to get set up.
One line setup
Now you can install Onlook on your React + Next.js + Tailwind, and your React + Vite projects in one command. Navigate to your project's root folder and simply run npx onlook. Then, run your project locally and you can start publishing code changes with Onlook. Or you can just import your app into Onlook like above.
Layers and components are in the mix
When we first launched the editor, there wasn't a way to see Layers on the left side-panel, but now not only can you see the Layer tree, but you can also quickly see which Layers are Components. Which leads us to...
Open in VSCode, Cursor, and Zed
We now support the ability to open your code in Cursor and Open in Zed. When you right-click an element, you can quickly jump to its exact location in code. Find exactly where the main component or the instance is within your codebase. This is such a huge time saver; you can thank us later.
Login with GitHub and Google
Now all of your settings and projects will be saved when you log in to Onlook. This is a foundational part of collaboration features to come.
Insert and edit Text elements
Use the hotkey "T" to draw a text box and write it instantly to code. You can also double-click on text that you already have in your product to make changes.
Pan and Zoom instantly
When you open up Onlook, you'll see a hand icon that lets you use your mouse to move around the screen. Something handy for all of you non-trackpad users who need a way to get around the canvas.
We also made some new hot keys to make you even faster in the Onlook editor:
...and a bunch of other great stuff
If you haven't already, download Onlook to start styling your React Apps today.
Requests
Become one of our Design Partners
We’re looking to recruit design partners – essentially, we want people on teams who would be down to work super closely with us for us to build Onlook bespoke to their needs. The only two requirements are that you’re actively working on a project, and that you will actively provide feedback to us. Please reach out to [email protected], or schedule time here if you're interested!
Open Issues
There are still many issues we could use help with. If you want to contribute to the early days of an open-source design editor, this is a great opportunity. A lot of our users have commented how great many of the features our contributors have built, so it really does make a huge difference to have your help, even if the features feel like they aren't very challenging.
News and other fun Onlook stuff
Here have a picture of us – 👋 Nice to meet you from Daniel and Kiet 👋
How we're building Onlook – our Substack
We have a separate Substack newsletter where we're sharing our journey of building Onlook about every week. If you'd like to get tips on design, front-end, and building a startup, or you'd just like to hear what we've been up to, please subscribe here.
Some of the recent topics we've written about:
Join our Discord!
It's been awesome to see people jump in and discuss the features we're building. If you're getting FOMO, don't – Join the Discord here.
Beta Was this translation helpful? Give feedback.
All reactions