Pagedraw docs

What is Pagedraw

Pagedraw is a WYSIWYG editor that generates code for your presentational - aka dumb - React components. Your designs live in Pagedraw (autosaved, livecollabed). You install a CLI on your dev machine. On every edit, the CLI invokes the compiler and saves the resulting generated .js and .css files to your local file system. The generated files are simply copied into your file system, so you can treat them like any other React files and check them into git.

Plus, designers can work in Sketch or Figma and then import their work into Pagedraw, when it’s time to productionize their mockups.

Generated code

You should never modify the generated code, so the source of truth for the file lives in Pagedraw as design. The generated files are pure React components, written to be mixed and matched with non-pagedraw handwritten React components. If you want to do something differently than how Pagedraw does it, don't use Pagedraw for that component, and swap it out for one you write entirely by hand. This is infrequently necessary. Typically, passing in props does the right job.

Considering using Pagedraw?

Get started

Head over to the Getting Started guide to try out Pagedraw without leaving your browser. If you want to install our CLI and use Pagedraw with your local development environment, check out this installation guide. If you're not familiar with React yet, check out the official ReactJS home page. Finally, join our community and share what you're working on.

Sample Pagedraw Usage

import React from "react";
import MyGeneratedComponent from "./pagedraw/hello-world";

class App extends React.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.
    window.alert("Hello, world!");

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