Github url


by airbnb

render React components to Sketch ⚛️💎

14.5K Stars 832 Forks Last release: 2 months ago (v3.2.2) MIT License 778 Commits 55 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


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 =\> ( <artboard>
    <text style="{{" fontfamily: sans ms color:>{props.message}</text>
  </artboard>); export default context =\> { render(<app message="Hello world!"></app>, context.document.currentPage()); };

What can I do with it?

  • Manage design systems—
    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;
    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


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.