gitwtfhub

wtf is react-sketchapp?

airbnb/react-sketchapp — explained in plain English

Analysis updated 2026-06-24

14,879TypeScriptAudience · designerComplexity · 3/5Setup · moderate

TL;DR

Airbnb library that renders React components as documents inside Sketch on macOS, aimed at teams managing design systems in code.

Mindmap

mindmap
  root((react-sketchapp))
    Inputs
      React components
      JSON data
      API responses
    Outputs
      Sketch artboards
      Sketch text layers
      Reusable assets
    Use Cases
      Manage design systems
      Design with real data
      Build custom Sketch tools
    Tech Stack
      React
      TypeScript
      Sketch
      JavaScript

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Define a design system as React components and render every Sketch asset from the same source of truth.

REASON 2

Populate Sketch mockups with real data fetched from an API instead of placeholder text.

REASON 3

Build a custom design tool that uses Sketch as a drawing canvas.

REASON 4

Keep Sketch documents in sync with a JavaScript codebase to reduce copy-paste between code and design.

What's in the stack?

ReactTypeScriptSketchJavaScriptnpm

How it stacks up

airbnb/react-sketchappbrainjs/brain.jssindresorhus/got
Stars14,87914,85614,903
LanguageTypeScriptTypeScriptTypeScript
Last pushed2024-09-26
MaintenanceStale
Setup difficultymoderateeasyeasy
Complexity3/52/52/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires macOS with Sketch 50 or newer installed before npm install and render will produce any output.

Wtf does this do

react-sketchapp is an open source library from Airbnb that lets you write React components and then render them as documents inside Sketch, the popular design app on macOS. The README describes it as tailor-made for design systems, the collection of buttons, type styles, color palettes, and other building blocks that a large team shares across many products. The reason it exists, according to the README, is that managing design system assets directly in Sketch is complex, error prone, and time consuming. Sketch is scriptable, but its API changes often. By using React as a wrapper, the project lets JavaScript developers describe Sketch documents in a way that already feels familiar to them, instead of writing low-level Sketch plugin code. A short code sample in the README shows the idea: you import components like Artboard and Text from react-sketchapp, write a normal-looking React component, and then call render to draw it onto the current Sketch page. The README lists four things you can do with it: manage design systems the way Airbnb does internally, build designs as real reusable components, design with real data fetched from APIs instead of placeholder text, and build new custom design tools on top of Sketch as a drawing canvas. To try it you install Sketch version 50 or newer, clone the repo, go into the basic-setup example, run npm install, then npm run render. Documentation, more examples, and an API reference are linked from the README.

Yoink these prompts

Prompt 1
Show me a minimal react-sketchapp Artboard that renders a list of users fetched from a JSON endpoint.
Prompt 2
Build a Sketch document from a React component tree that mirrors the Button, Card, and Typography tokens in my design system.
Prompt 3
Write a render script that loops over a CSV of products and emits one Sketch artboard per row using react-sketchapp.
Prompt 4
Convert an existing React Native screen into a react-sketchapp file so designers can open it in Sketch and tweak styles.
Prompt 5
Set up a basic-setup example with react-sketchapp, npm, and Sketch 50 plus a hot-reload workflow.

Frequently asked questions

wtf is react-sketchapp?

Airbnb library that renders React components as documents inside Sketch on macOS, aimed at teams managing design systems in code.

What language is react-sketchapp written in?

Mainly TypeScript. The stack also includes React, TypeScript, Sketch.

How hard is react-sketchapp to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is react-sketchapp for?

Mainly designer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.