Integrating Pagedraw into a React Codebase

Pagedraw is a compiler that generates JSX and CSS. You should not edit the generated code by hand. Just require it from your handwritten React components:

import React, { Component } from "react";
import MyGeneratedComponent from "./pagedraw/hello-world";

class App extends Component {
  render() {
    /*
     * Pagedraw writes my JSX and CSS so my render function is just one line.
     * Yay!
     */
    return <MyGeneratedComponent onButtonClicked={this.onButtonClicked.bind(this)} />
  }

  onButtonClicked() {
    /*
     * Event handlers and business logic stay exactly the same:
     * handwritten by developers.
     */
    doComplicatedCalculations();
    window.alert("Hello, world!");
  }
}

ReactDOM.render(<App/>, document.getElementById("root"));

What is Pagedraw?

Pagedraw is a platform for productionizing Sketch designs into React code. Import a Sketch file, mark in Pagedraw how it should resize and reflow, and we'll generate React JSX and CSS files you can drop into your codebase and wire into your backend.

Pagedraw writes code just like we would by hand. It's just JSX and CSS, no special libraries or frameworks required. You can drop React components made in Pagedraw into an existing React app alongside your handwritten React components, and you can use your existing React component libraries in Pagedraw.

Pagedraw takes care of the most tedious coding so you can get back to the good stuff. Pagedraw generated code is 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.

See it in action:

Who is it for?

Many UI builders out there are for people who don't want to code or who just want to get a static page up and running as quickly as possible. Pagedraw is not for these use cases. We built Pagedraw with highly custom, complex web apps in mind (think Gmail, Facebook, Google Docs, etc).

For this reason, we don't try to do any of you app's state management for you. onClick handlers and the like should still be implemented by hand using good old Javascript. React render functions on the other hand can be almost completely inferred from a visual mockup, which is why we focus on generating those.

If you are still skeptical that Pagedraw works for very complex frontends, take a look at our rendition of Facebook's newsfeed entirely done in Pagedraw:

We’re making teams more efficient by empowering people to design and update user interfaces without writing a line of code. Pagedraw allows designers and product managers to own the visuals and instantly turn their Sketch mockups into beautiful, semantic, compliant code, without tying up a frontend engineer.

Getting help

We're pumped that you're interested in building apps with Pagedraw. You should join our Facebook User group to request features and get help.

Right now we have a lot of awesome features that are sometimes undocumented (like support for over 10 different languages/frameworks). Feel free to ask questions in the above group or directly to [email protected] and we are happy to help you!