Daniel Farrell

Onlook - The open-source, local-first Figma for React apps

Onlook is an open-source, local-first, visual editor for React Apps. Design directly in your React App, and instantly write all of your changes to code. Craft your interface with a next-generation design tool that will help you ship faster than ever before.

Add a comment

Replies

Best
Daniel Farrell
Hey Product Hunt! I’m super excited to share Onlook with you – @flyakiet and I started working on this version of Onlook just a few months ago, and the reception from the design and development community has been extraordinary, even with a partially built product. Now that we’ve had a chance to buff-out the rough edges, we’re ready to share it with the broader Product Hunt community. As a designer myself, I’ve always been frustrated with the gap between what I would make and how it would be implemented. There are, of course, a number of tools that let everyone get better at coding, but most editors are either still too technical or require a technical background to actually work with. Plus, developers really really don’t like the output of most design-to-code exporting tools. It’s a frustrating problem for both sides of the design / dev equation! We aim to give more people the opportunity to create with our visual-first code editor. Everything you do in the Onlook canvas is immediately reflected in code, and because Onlook runs locally, you can take all of the code it writes for you. For now, Onlook still requires a little bit of technical knowledge to fill in some of the gaps in our product, but we’re confident that even now, more and more less-technical people will be able to build incredible apps and websites with our take on a visual editor. I wanted to extend an extremely well-deserved thank you to the 40(!!) contributors who have generously jumped-in to help make the editing experience polished. From the tiniest details to critical features, Kiet and I are grateful for the expertise, opinions, and determination that the open-source community has committed to Onlook. In all honesty, it’s driven us to build something great that we hope will make everyone’s effort worth it. Thank you! Finally, we recognize that the quality bar of software has lifted significantly, and we hope that a tool like Onlook can help other tools reach that new requirement. I’ve personally felt so empowered to push the limits of my own design skills after working on this tool, and it’s a feeling I know you’ll experience when you use Onlook on your site. When you start to design the real product rather than mockups, you fall in love with designing all over again.
ulearnr
@flyakiet @d_r_farrell Just wanted to know the pricing before downloading the software
Jonny Miles
First off, this is an incredibly complex product to get right, so great job to have built this! The Figma style UI is spot on, and it definitely feels like something that could fit into my flow. Had a few issues using it in practice however which I'll share in case it's useful: (1) Zoom level – ⌘+0 is not actual size like it says it is. It seems about 1/2 zoom? I couldn't figure out what actual size was, potentially its 3 zooms in from there? But it still seems slightly blurry like its subpixel scaled. Pretty important for my sanity to be sure I'm looking at my site in actual size. (2) Wasn't able to drag around my components – firstly if I selected the correct component in the layers panel, then went to drag it in the viewport, it selected a subcomponent. Then if I reselected the component in the layers panel and tried dragging the order there, it didn't work. I.e. wouldn't change order when dragged into position. (3) I tried adding a rectangle div using your toolbar, and it worked, but my computer basically ground to a halt. I was also able to drag this around somewhat. I could also successfully edit text. I get this is quite an intense bit of software but currently its not running well enough on my computer to use regularly. (4) Missing an image in my react app that loads fine on any browser i've tried, not sure why.
AnnaHo
@jonnymiles Onlook is an impressive open-source tool that revolutionizes the way we design and build React apps!
Kiet Ho
Hey @jonnymiles, Thanks for the thoughtful feedback. It's immensely helpful at our stage :) (1) I agree with your point here, seeing the app at real scale is important. I have a few improvements in mind. At the very least we should show the zoom level. I ahead and opened an issue for this on your behalf. https://github.com/onlook-dev/on... (2) There is an arbitrary constraint on dragging elements outside of their parent to prevent dragging elements out of scope. Right now a (poor) workaround is to cut and paste the element instead but we'll address this here: https://github.com/onlook-dev/on... (3) (4) I see. We will try to see what's going on with these. The image one is weird since we're trust Chrome at the bottom of the stack but I will see. Thank you again for the detailed response!
Kiet Ho
@annaho2000 Thanks for the kind words!
Jonny Miles
@flyakiet thanks for the reply! That makes a lot of sense. On the (2) one, I was reordering child components in an accordion component, so I don't think scope was an issue - though that makes complete sense re: dragging out of parents in general!
Kiet Ho
@jonnymiles I see, seems like (2) can be an ordering issue as well. The layers dragging UX can be better for sure. Is your app publicly available? I want to make sure we can reproduce a fix if it is.
Grant Wilkinson
I have watched @d_r_farrell and @flyakiet iterate over this at breakneck pace into something that is really making a dent in how you handle frontend. Excited to see what the future holds!
Daniel Farrell
@flyakiet Thanks @grantfwilkinson! I can't wait to share some of the AI stuff we're cooking up... it'll be epic
Kiet Ho
Hey PH, I’m the technical founder of Onlook! As a front-end developer for large products, I often felt like I was just reimplementing work that my design counterparts had already done. They would hand off incredibly detailed designs with full auto layout and variables and I would often miss the finer details in implementation. That's why @d_r_farrell and I created Onlook 4 months(!) ago. With Onlook, I can work side-by-side with my designer as they build the UI while I handle the functionality. Kudos to our contributors who have made the product a joy to use and to our early users for providing immense feedback. We have very big plans for Onlook and look forward to sharing them for the months to come!
Gary Tokman
Congrats on the launch @d_r_farrell and @flyakiet!
Daniel Farrell
@flyakiet Thanks @f6ary!! Appreciate it!
Aibek Yegemberdin
This is a great implementation of the product and amazing user-experience! Keep it up 💯
Kiet Ho
@superaibek Thanks Aibek!
Tomer Molovinsky
Congratulations on the launch @d_r_farrell ! Love your approach to the designer-developer gap with clean code output. Getting 40 contributors shows you're building something special. Looking forward to seeing Onlook grow! 🚀
Kiet Ho
Thanks @tomermolo!
Huzaifa Shoukat
Huge congrats to the Onlook team on today's launch! I'm intrigued by the 'design directly in your React App' concept - How does Onlook handle version control for the automatically generated code, do you integrate with existing Git workflows out of the box?
Daniel Farrell
@ihuzaifashoukat thanks for the support! We work like an IDE where the code generated is written locally, so you can use it with your preferred Git workflow 💪
Gabriel Givigier
Congrats for the project, I can imagine how much time you put on it to make it ready for production. Is there an esmitative when we will be able to use components?
Syed Umair Ali
Oooh, A new tool to play with, super excited to try this out! Looks promising from the initial hands-on