Pagedraw
beta
Effortlessly turn mockups into functional code
import MainScreen from
'./src/pagedraw/mainscreen';

...

<MainScreen
someData={this.fromServer}
onClick={this.handleSubmit}
/>
Built for developers.
Especially those who love working on cool algorithms but don't want to deal with things like cross-browser CSS vertical text centering.
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. 
Try without leaving your browser →
The green files are Pagedraw generated
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.
The other files are handwritten
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.
Use Pagedraw components in your existing React app.
Use handwritten React 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. 
works with
“This is the one that actually works.”
Nick Schrock
Co-creator of GraphQL
coming soon
“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 →
The Pagedraw workflow
Pagedraw is designed for modern teams developing and maintaining complex apps in production.
1.
Import a Sketch or Figma design
Pagedraw analyzes the design. If you need to edit anything, Pagedraw's Editor is just like Sketch
2.
Use Pagedraw to annotate the designs with data bindings and layout constraints
3.
Write handwritten code that imports Pagedraw components
4.
Designs automatically sync with your codebase
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 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 →