Guide · Open source

How to use react-sketchapp: render React components to Sketch

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

react-sketchapp is an open-source MIT-licensed library from Airbnb that lets you describe Sketch documents as React components in JSX instead of placing layers by hand. It is aimed at teams maintaining design systems who want their Sketch assets generated from code. After this guide you will know the prerequisites, how to run the basic example, what the component code looks like, and where the limits are.

react-sketchappairbnb/react-sketchapp · ★ 14.8k · MIT Install options & downloads

Quick start

1Check prerequisites. Install Sketch 50 or later and a recent npm. Make sure Git is available in your terminal.
2Clone the repository. Run git clone on the react-sketchapp repository from GitHub.
3Install the basic example. Move into examples/basic-setup and run npm install.
4Render the example. Run npm run render with a new Sketch file open to produce the example output.
5Read the component code. Open the basic example and look at how render, Text and Artboard are used.
6Explore the documentation. Use the README's links to the examples, API reference, styling and data fetching guides.

What you need before you start

The README's quick-start asks for Sketch version 50 or later and a recent version of npm. You also need Git to clone the repository. You will run the commands in a terminal, so this workflow assumes you are comfortable with one.

Sketch 50 or later
A recent npm
Git
A terminal

Install react-sketchapp with the basic example

The install method is clone-and-build. Open a new Sketch file, then in a terminal clone the repository, move into the basic-setup example, and install its dependencies.

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

Render the example into Sketch

With the dependencies installed, run the render script. The README's quick-start describes this as the step that produces the example output in your open Sketch file.

npm run render

Write a component that renders to Sketch

You import render and the Sketch components such as Text and Artboard from react-sketchapp. You then pass a React element and a Sketch page to render inside a function that Sketch's scripting support calls with a context object. The README's example sets a text style with a font family and colour, and passes a message as a prop.

Props let you reuse one component with different content, which is the core idea behind generating design system assets from code.

Import render, Text and Artboard from react-sketchapp
Wrap your layers in components such as Artboard
Call render with your element and context.document.currentPage()

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

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

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

What react-sketchapp is good for

The README names four uses: managing design system assets, using real components for designs, designing with real data, and building custom design tooling on top of Sketch. The library was built for Airbnb's design system, so the design-system case is the one it is most clearly shaped for.

The README also says that fetching and incorporating real data into Sketch files is simplified by the library. For more detail, the project's documentation covers styling, universal rendering and data fetching, and it links to examples and an API reference.

Manage design system assets in code
Build designs from real React components
Fill Sketch files with real data
Use Sketch as a canvas for custom tooling

Know the limits before you commit

The README's badge lists Sketch 43 to 50 as the compatibility range, and the quick-start asks for version 50 or later. The README does not state current maintenance status for newer Sketch releases, so check the repository before you depend on it for a current Sketch version.

Because the workflow depends on React and a terminal, it is a poor fit for designers who work only visually in Sketch.

Compatibility badge shows Sketch 43 to 50
Newer Sketch maintenance status is not stated in the README
Requires coding comfort with React and the command line

What people use it for

Generating a design system's Sketch assets from shared React components
Building artboards from JSX so a component can be reused with different props
Pulling real data into a Sketch file as part of a design review
Creating a custom design tool that uses Sketch as its canvas

Frequently asked questions

Is react-sketchapp free to use?

Yes. The repository is licensed under MIT, which the project lists alongside its details. Check the license file in the repository for the full terms.

What do I need to install react-sketchapp?

The README's quick-start asks for Sketch 50 or later, a recent npm, and Git. You clone the repository, then install dependencies in examples/basic-setup.

Which Sketch version does react-sketchapp support?

The README's quick-start asks for Sketch 50 or later, while its compatibility badge lists 43 to 50. The README does not state support status for newer Sketch releases.

How do I run the react-sketchapp example?

Clone the repository, run npm install in examples/basic-setup, then run npm run render with a new Sketch file open.

What are alternatives to react-sketchapp?

The project lists Figma REST API, Sketch plugin API tools and Storybook as comparable projects. They approach design or component work in different ways, so choose based on the tool your team uses.

Why is react-sketchapp not working for me?

The README does not include a troubleshooting section. Confirm your Sketch version is 50 or later, your npm is recent, and you run the commands from inside the cloned repository. The project's FAQ page is linked from the README for further help.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

react-sketchapp suits teams that maintain a design system in Sketch and developers comfortable with React who want Sketch assets generated from code. It is a poor choice for visual-only Sketch designers, or for anyone who needs a current Sketch version and a widely supported plugin ecosystem, since the README does not confirm maintenance for newer releases.

Install options & downloads