Design your web UI, then import the design directly from code. No more time wasted translating mockups to JSX and CSS. Using Pagedraw is like adding another React developer to your team.

Try a demo at πŸ”₯

Would you recommend this product?
6 Reviews4.2/5
Hi there! Thanks for hunting us @bgxvsp0! I'm super excited to introduce what we've been building for three years now to everyone at Product Hunt. Pagedraw is a tool that lets you import designs straight from React code. Want to move a button 10px to the left? Make the change in Pagedraw and it will submit a pull request for you automatically. HTML/CSS were never really meant for creating app UIs, so we give you an interface that is strictly better than those languages. Specify layout constraints, data bindings, and more in Pagedraw, and we keep your design in sync with presentational components generated in your codebase for you. You don't edit the generated code, just call it from your regular handwritten files. And of course you can import Sketch files straight into Pagedraw. Give it a try right now: try creating a simple button in Pagedraw and use our CLI to sync it into your codebase. Last but not least, a very special thanks to all teams in our private beta. You rock! ❀️ Cheers! πŸ‘‹
I've been playing around with Pagedraw and out of the 1000 other products that try to tackle a similar problem Pagedraw is the best so far!
This looks amazing and promising! Why did you guys make a decision to develop a cloud editor and not do this within a Sketch plugin?
@berman we wanted to work well with all tools like Adobe XD, Figma, etc. Plus we also needed developers to be able to annotate information on top of the designs. Developers often don't have Mac OS or Sketch!
@gablg2 I just wanted to say thank you for making this app accessible on all platforms instead of making the mistake of locking it to one platform like so many Sketch plugin devs had made. I love being able to work from anywhere, even my Chromebook. I hope more devs have your vision