Installation

Pagedraw can be integrated into any existing React app. Much like React itself, you do not have to have a new project to start using it.

The quickest way to try out Pagedraw in an isolated environment is in a new project.

Creating a new project

We're going to create a hello world app with React and Pagedraw.

1. Open Pagedraw and create your first doc

Create a new doc (the name doesn't matter) and click on it to go to the Pagedraw editor.

Click Import Sketch in the topbar and upload this Sketch file.

You can create docs in Pagedraw without Sketch, but for now, importing a Sketch file is the quickest way to get started. Your first doc should look like this:

2. Install the Pagedraw CLI

npm install -g pagedraw-cli
pagedraw login

The Pagedraw CLI lets you download Pagedraw generated code into your codebase. Authentication will open a browser window for you to Google Auth with.

3. Create a new React app

npm install -g create-react-app
create-react-app my-first-pagedraw-project
cd my-first-pagedraw-project
npm start

create-react-app will create a directory called my-first-pagedraw-project/. npm start will start the development server for this new project. There’s nothing Pagedraw-specific about it yet. Read more at https://github.com/facebookincubator/create-react-app.

4. Add a pagedraw.json file

Find your project ID in your dashboard per the below.

Project in dashboard with project named Jared\'s App

In the root directory of your app, create a new file named pagedraw.json containing

{ "app": "<my_project_id>", "managed_folders": ["src/pagedraw/"] }

where <my_project_id> is the one you found before. The pagedraw.json file tells Pagedraw CLI which Pagedraw project to sync with.

Now do

pagedraw sync

to download the hello world page's code into src/pagedraw/firstpage.jsx. Sync will keep running, continuously downloading updated code as you edit the doc in the Pagedraw Editor.

5. Wire the pagedrawn files into the React app

Replace the code in src/index.js by the below:

import React from 'react';
import ReactDOM from 'react-dom';
import PagedrawGeneratedPage from './pagedraw/firstpage';

class App extends React.Component {
    render() {
        return <PagedrawGeneratedPage />;
    }
}

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

This code just requires and returns the pagedraw generated component at src/pagedraw/firstpage.

Your dev environment will automatically update as you make edits in Pagedraw for as long as pagedraw sync is running! Try moving things around in the editor, changing the text from "Hello World", or changing colors and fonts. You can kill pagedraw sync at any time with ctrl+c. Happy pagedrawing!

6. Next steps

The next step is to learn about data bindings in Pagedraw so you can mark content as dynamic and pass variables down via props to your Pagedraw generated code.