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.

Add Pagedraw to an existing React project

Follow the steps below to make a button widget in Pagedraw and wire it into an existing React codebase

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. 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.

4. Wire the pagedrawn files into the React app

Finally, go into any of your own React components where you'd like to use that button. Let's say your project has a HomeApp component. You might do

import React from 'react';
import PagedrawButton from '../relative/path/to/src/pagedraw/button';

class HomeApp extends React.Component {
    render() {
        return <div className="my-own-div">
            <PagedrawButton />
            <div>Other, unrelated content</div>
        </div>;
    }
}

where ../relative/path/to/src/pagedraw/button is the relative path from your calling file to src/pagedraw/button.

If you refresh your local dev environment you should now see the Pagedraw button there. Go ahead and make any changes to that button in the Pagedraw doc (maybe change the font color, for example) and see that those changes are reflected live in your local application!

5. 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.