react-sketchapp
A React renderer that draws components as layers in Sketch design files.
- Stars
- 14.8k
- Forks
- 794
- Licence
- MIT
- Language
- TypeScript
- Last update
- 1.0 years ago
- Type
- Library
What it is
react-sketchapp lets developers write Sketch documents as React components instead of placing layers by hand. You describe a design in JSX and the library renders it into a Sketch file through Sketch's scripting support. It is aimed at teams that maintain design systems and want their Sketch assets generated from code.
- Render a set of components as artboards in a Sketch file using the basic-setup example
- Generate design-system assets from React component definitions
- Fetch external data and place it into a Sketch document during rendering
- Build a custom Sketch-based design tool that renders layouts from code
Great for
- Teams maintaining a design system in Sketch who want assets generated from code
- Developers already comfortable with React who want to build Sketch artboards with components
- Designers who want to pull real data into Sketch files
- Tool builders who want to use Sketch as a canvas for custom design tooling
Not ideal for
- People who only design visually in Sketch and do not write code, because the workflow depends on React and a terminal
- Anyone needing a current Sketch version, since the README's quick-start mentions Sketch 50+ and a compatibility badge listing 43-50
- Users who need a maintained, widely supported Sketch plugin ecosystem, since the README does not state current maintenance status for newer Sketch releases
How to get it
- 1
Clone and build from source
You'll need: Sketch 50+ · npm (recent version) · Git
Clone the repository
git clone https://github.com/airbnb/react-sketchapp.gitInstall the basic example dependencies
cd react-sketchapp/examples/basic-setup && npm installRender the example
npm run render - 2
Run it
- Install Sketch 50+ and a recent npm.
- Open a new Sketch file.
- Clone the repository and go into examples/basic-setup.
- Run npm install, then npm run render.
- Open the examples folder to try more samples.
- 3
Get the most out of it
- Start from the examples folder to see working patterns before writing your own
- Read the Styling guide to learn how styles are applied to rendered layers
- Read the Universal Rendering guide if you want to render outside a Sketch plugin context
- Use the Data Fetching guide to bring real content into your Sketch files
Downloads
Strengths
- Uses React, a familiar model for JavaScript developers, to describe Sketch layouts
- Designed for design systems at Airbnb, with documented examples, API reference, and styling guides
- Open source under the MIT license with a runnable example project
Trade-offs
- Tied to Sketch's scripting API, which the README notes often changes
- The README's Sketch compatibility information appears dated and the quick-start targets Sketch 50+
- Requires Node and npm plus working knowledge of React to be useful
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-sketchapp (this) | 14.8k | Library | intermediate | 1.0 years ago | Teams maintaining a design system in Sketch who want assets generated from code |
| storybook | 91.4k | Dev tool | intermediate | 4 days ago | Frontend teams building a shared component library or design system |
| react-color | 12.3k | Library | beginner | 2.8 years ago | React developers who need a color selection control in a web interface |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.