Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
June 8, 2020 10:39
November 14, 2019 16:39
November 13, 2019 13:15
January 20, 2020 13:52
November 14, 2019 13:57
March 23, 2018 10:20
February 19, 2020 13:13
December 10, 2016 19:16
March 22, 2017 10:41
January 20, 2020 17:31
render React components to Sketch; tailor-made for design systems

Quick-start ๐Ÿƒโ€

First, make sure you have installed Sketch version 50+, & 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


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