a UI builder for React web apps
Branch: master
Clone or download
Latest commit b01cd04 Feb 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci open source release Jan 22, 2019
bin update readme Jan 22, 2019
cli open source release Jan 22, 2019
compiler-blob-builder open source release Jan 22, 2019
config open source release Jan 22, 2019
deploy-checks open source release Jan 22, 2019
desktop-app update readme Jan 22, 2019
docs open source release Jan 22, 2019
e2e-tests open source release Jan 22, 2019
firebase open source release Jan 22, 2019
html-importer open source release Jan 22, 2019
ide-integration open source release Jan 22, 2019
namespaced-bootstrap fixes for packaging with electron Jan 22, 2019
pagedraw-cli-webpack3 open source release Jan 22, 2019
pagedraw-cli-webpack4 open source release Jan 22, 2019
pagedraw-imports open source release Jan 22, 2019
react-scripts open source release Jan 22, 2019
sketch-importer open source release Jan 22, 2019
sketch-tests open source release Jan 22, 2019
src fixes for packaging with electron Jan 22, 2019
static fixes for packaging with electron Jan 22, 2019
test-data open source release Jan 22, 2019
test open source release Jan 22, 2019
.dockerignore open source release Jan 22, 2019
.gitignore open source release Jan 22, 2019
.slugignore open source release Jan 22, 2019
.webpack.env open source release Jan 22, 2019
LICENSE open source release Jan 22, 2019
Procfile open source release Jan 22, 2019
README.md Updated README Feb 21, 2019
circle.yml open source release Jan 22, 2019
coffeescript-register-web.js open source release Jan 22, 2019
libraries.css open source release Jan 22, 2019
library-index.coffee open source release Jan 22, 2019
package.json open source release Jan 22, 2019
pagedraw.json open source release Jan 22, 2019
pagedraw.sublime-project open source release Jan 22, 2019
tsconfig.json open source release Jan 22, 2019
yarn.lock fixes for packaging with electron Jan 22, 2019

README.md

Pagedraw

Pagedraw is a UI builder for React web apps. It works like a Sketch or Figma style design tool, but emits good quality JSX code. You can play with a demo on the web without installing at https://pagedraw.io/tutorials/basics. See https://pagedraw.io/ for more info.

You can download it at https://github.com/Pagedraw/pagedraw/releases/download/1.0/Pagedraw.zip.

Pagedraw is not currently under development. We do not recommend using it for production. Please fork and use it for something cool!

Here is a blog post with some lessons we took from working on Pagedraw.

Usage

See the structure of https://github.com/pagedraw/sample-app

Put a main.pagedraw.json in the root of your repo. All files built by Pagedraw will be written into a /src/pagedraw/ folder. These are regular JSX/CSS files, so you can import them just like the rest of your code.

If you ever want to stop using Pagedraw, just delete the source *.pagedraw.json files. The generated files will still live in src/pagedraw, and you can treat them like any other code files.

The editor itself is straightforward if you've used a design tool like Sketch or Figma. Detailed documentation is available at https://documentation.pagedraw.io/the-editor/.

When you open Pagedraw for the first time, it will ask you to open a .pagedraw.json file. If you'd like to create a new file, click cancel when it asks you to open a file, and it'll ask you where to create a new file.

Developing

Setting up the development environment

As a prerequisite, install

  1. Node.js version 8.9.0. (nvm is useful here)
  2. yarn
# clone the repo and install the project dependencies
git clone https://github.com/Pagedraw/pagedraw
cd pagedraw
yarn install
cd desktop-app/ && npm install && cd ..

Running Pagedraw in development

In the background, run

yarn devserver

then start Electron with

yarn run-electron

Config for development

Turn on asserts the first time you run in development mode, which will help you debug. In the Electron developer tools console, run __openConfigEditor() and set your local config to

{
  "crashButton": true,
  "asserts": true
}

Running tests

To run the standard tests, run all the servers needed for Pagedraw development, as described in the section above. While yarn devserver is running, run

yarn test

TODOs

  • Today all images brought into Pagedraw are stored as part of the Pagedraw doc as base64 encoded strings and they also get compiled to generated code as img tags with base 64 data srcs. That bloats the Pagedraw docs and forces an unnecessary constraint on generated code. We should move to a world where that system is more flexible and generates code that requires images instead
  • Same thing for fonts. Today they're being stored directly in the Pagedraw doc as base64 strings and also injected into the compiled code as such
  • Make Sketch Importer into a Sketch to Pagedraw converter command instead of a server.
  • Compile-Check can work with local /compiler-blobs, and not depend on S3 to host them. Look in /compiler-blob-builder and /deploy-checks/fetch-other-compiler-build.js.

The code in the repository is being provided to you under an open source license. There are multiple contributors to this code. All contributions provided after 2/1/2019 were done in a personal capacity, and the license you receive to code following 2/1/2019 is from the contributors personally and not their respective employers.