The best UI builder for the web
Draw your React components, but use them like components coded manually.  Already have mockups drawn?  Just import them from Sketch or Figma.
Pagedraw for a component named "MainScreen"
React code using that component
import MainScreen from
'./src/pagedraw/mainscreen';

...

<MainScreen
someData={this.fromServer}
onClick={this.handleSubmit}
/>
Built for developers
Who need to deliver high-quality code faster than ever.  Who don't want to have to think about CSS.  Who need to use semantic, authentic HTML that integrates into their existing React codebase. 

We don't use a JS based layout engine, or ever make you ship extra dependencies.  We'll never make your site slower, or fatter.
works with
React
Figma
Sketch
“This is the one that actually works.”
Nick Schrock
Co-creator of GraphQL
coming soon
React Native
Vue
Angular
“We've built over 3 different dashboards in very little time using Pagedraw. What used to take a sprint now takes only a couple of days.”
Helson Taveras
Cofounder & CTO of Riley
"Pagedraw is perhaps the most ambitious WYSIWYG editor for React apps."
Pete Hunt
Co-creator of React.js
“Really impressed with Pagedraw. Can’t wait for it to work with React Native as well.”
Charlie Cheever
Cofounder of Quora and Expo.io
Try it out in browser →
Redesign the green files in Pagedraw.
You edit them via Pagedraw editor in the cloud, not by modifying the code.

The Pagedraw CLI syncs Pagedraw docs with your codebase, so your localhost shows your latest designs, live, as you make them.
Code the other files in your text editor.
These you edit with Sublime, Vim, your preference. Pagedraw doesn’t even know about them.  They import the presentational components made in Pagedraw. 

These are your Redux containers, your React state management, and so on.  If you have a design system or any components already done in code, Pagedraw docs can import them, too.
Try without leaving your browser.
In this demo below you can change the design of the component on the left and modify the React code on the right side and see what happens live!
Pagedraw generates code guaranteed to work correctly and in all browsers, which means less code in your codebase over which you have to worry about correctness and safety. It writes code just like we would by hand. 
Tutorial →
Stress-test your designs.
Test your designs with real data and different screen sizes. Once responsive resizing and data reflowing looks correct, bringing your design to production is as easy as calling your Pagedrawn component with a single line of code.
1.
Mark responsive constraints
Define how components resize and reflow. Test it out instantly with Pagedraw's Stress Tester
2.
Connect design to data
3.
Define reusable components
4.
Call Pagedraw generated components as if they were regular React components in your codebase
Use Pagedraw components in your existing React or Angular app.
Use handwritten React or Angular components in any Pagedraw project.
No libraries required. Just one line of code.
Import the generated code, don't edit it.
Changes to a Pagedraw component should be done visually, not in code. Of course we are hackers too, so we provide you with escape hatches whenever you feel like code is a better tool to solve a problem. 
Another WYSIWYG editor?
Traditional WYSIWYGs
Pagedraw
Translates visual design to code
Responsive layouts
Reflows correctly w/ dynamic data
Works w/ tools designers already love
CLI that syncs with Git
Generates semantic flexbox code
Code w/ position: absolute all over
Instead of a naive WYSIWYG approach, we built Pagedraw with a compiler mindset.

Drawing more from GCC than Dreamweaver, we compile the designer mental model into JSX/TS and CSS, striving to make the generated code just like what we would write by hand as developers.
Learn more →
Pagedraw is free.
Try it today.
Hacker News built in Pagedraw →
Facebook built in Pagedraw →
Quick demo →
Start from your own Sketch file →
Contact us →