requires Sketch 43 Beta or higher 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.

There are several ways to build Sketch plugins:

Using a template

The simplest way to build Sketch plugins with modern JavaScript is skpm 💎📦 with the react-sketchapp-skpm-example template. Feel free to remove anything you're not using.

Install skpm, if you don't have it already:

npm install -g skpm

create a new project:

mkdir my-rad-sketch-plugin
cd my-rad-sketch-plugin
# Initialize this plugin with the template
skpm init git+ssh://git@github.com:jongold/react-sketchapp-skpm-example.git
# Install dependencies
npm install
# Setup an alias from the .sketchplugin to the sketch plugins folder
skpm link .

Then, to build your plugin (will auto update when you change the code)

npm run 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 about skpm.

The manual way

Feel free to use whatever build process you're comfortable with — just disable CocoaScript and disabled Sketch's caching mechanism

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

You can then use react-native-packager, rollup, webpack etc.

react-sketchapp-webpack-example 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:airbnb/react-sketchapp.git && cd react-sketchapp
npm install && npm run build:plugin
./symlink-plugin.sh

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

Contributing

Contributions are more than welcome. Just submit a PR with a description of your changes. Please attach screenshots and Sketch files (if relevant) to your Pull Requests for review.

Issues, bugs, or feature requests

File GitHub issues for anything that is unexpectedly broken. If there are issues with generated Sketch files please attach them to the issue. If you have ideas or feature requests you should also file a GitHub issue.