render React components to Sketch ⚛️💎
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create Mar 22, 2017
__tests__ Run on Nodejs (#359) Sep 21, 2018
docs clean up style creation (#383) Sep 20, 2018
examples Run on Nodejs (#359) Sep 21, 2018
flow-typed Run on Nodejs (#359) Sep 21, 2018
src fix shadowOffset proptypes (#404) Nov 30, 2018
template Run on Nodejs (#359) Sep 21, 2018
.babelrc e2e tests (#346) May 31, 2018
.bookignore update bookignore Apr 5, 2017
.editorconfig Add Editor configuration files (#179) Sep 18, 2017
.eslintignore update to skpm@1.0 (#203) Nov 27, 2017
.eslintrc support transforms (#350) Sep 20, 2018
.flowconfig cleanup and bump dev dependencies (#314) May 4, 2018
.gitignore Only apps should have lockfiles. Jun 14, 2017
.jestrc.json e2e tests (#346) May 31, 2018
.npmignore remove yarn.lock files Apr 24, 2017
.npmrc Overhaul layout calculation (css-layout -> yoga-layout) (#188) Oct 10, 2017
.travis.yml ci: use latest macOS version (#402) Nov 14, 2018 version 3.0.0-beta.1 (#391) Sep 26, 2018 support rendering into wrapped object (#379) Sep 18, 2018 support rendering into wrapped object (#379) Sep 18, 2018
LICENSE Updated year (#267) Mar 23, 2018 Remove 'beta' note from README (#398) Nov 30, 2018 First pass docs & add gitbook Dec 11, 2016
book.json s/jongold/airbnb :) Mar 22, 2017
package.json version 3.0.0-beta.2 (#405) Nov 30, 2018
prettier.config.js support rendering into wrapped object (#379) Sep 18, 2018

render React components to Sketch; tailor-made for design systems

Quick-start 🏃‍

First, make sure you have installed Sketch version 43+, & a recent npm.

Open a new Sketch file, then in a terminal:

git clone
cd react-sketchapp/examples/basic-setup && npm install

npm run render

Next, check out some more examples!


npm Travis Gitter


Managing the assets of design systems in Sketch is complex, error-prone and time consuming. Sketch is scriptable, but the API often changes. React provides the perfect wrapper to build reusable documents in a way already familiar to JavaScript developers.

What does the code look like?

import * as React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';

const App = props => (
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>{props.message}</Text>

export default context => {
  render(<App message="Hello world!" />, context.document.currentPage());

What can I do with it?

  • Manage design systems— react-sketchapp was built for Airbnb’s design system; this is the easiest way to manage Sketch assets in a large design system
  • Use real components for designs— Implement your designs in code as React components and render them into Sketch
  • Design with real data— Designing with data is important but challenging; react-sketchapp makes it simple to fetch and incorporate real data into your Sketch files
  • Build new tools on top of Sketch— the easiest way to use Sketch as a canvas for custom design tooling

Found a novel use? We'd love to hear about it!

Read more about why we built it