This project is currently in alpha and APIs are subject to change. If you found the repo on npm — the source (& docs, oops) is private for now; it will be announced on my mailing list and Twitter very soon :)

A React renderer for Sketch.app ⚛️ 💎

Features

• Declarative. All the lessons we've learnt from the React model of programming. A comfortable layer over Sketch’s API.
• Familiar. Flexbox layouts. react-native components. You already know how to use react-sketchapp.
• Data-based. Pipe in real data from JSON files, APIs, and databases.
• Universal. Start from scratch, or use your existing component libraries

Documentation

• Usage
• FAQ
• API Reference
• Styling
• Universal Rendering
• Troubleshooting

Usage

react-sketchapp projects are implemented as Sketch plugins. First, make sure you've disabled Sketch's caching mechanism.

defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist AlwaysReloadScript -bool YES

There are several ways to build Sketch plugins:

The simple way

The simplest way to build Sketch plugins with modern JavaScript is skpm 💎📦.

Install skpm, if you don't have it already, and create a new project.

npm install -g skpm
mkdir my-rad-sketch-plugin
cd my-rad-sketch-plugin
skpm init
skpm link .

Install some dependencies and set up JSX compilation

npm install --save react-sketchapp react react-test-renderer
npm install --save-dev babel-preset-react
echo '{"presets": ["react"]}' > .babelrc

Then, to build your plugin

skpm build --watch

And write your plugin in src/my-command.js

import React from 'react';
import { render, Text, View } from 'react-sketchapp';

const Document = props =>
  <View>
    <Text>Hello world!</Text>
  </View>;

export default function (context) {
  render(<Document />, context);
}

Run your plugin in Sketch via Plugins → [your plugin name] → my-command.

Refer to the skpm docs for more information.

The manual way

Feel free to use whatever build process you're comfortable with — just disable CocoaScript and you can use react-native-packager, rollup, webpack etc.

react-sketchapp-starter is a minimal boilerplace to start developing with Webpack.

Examples

react-sketchapp includes a folder of examples showing how you might use it to work with a JavaScript design system.

• Styleguide
• Twitter-style profiles

Clone & build the repo, and symlink the examples:

git clone git@github.com:jongold/react-sketchapp.git && cd react-sketchapp
npm install && npm run build:plugin
./symlink-plugin.sh

Open Sketch; examples will be in Plugins → react-example.