render React components to Sketch; tailor-made for design systems

## Quick-start 🏃‍ First, make sure you have installed [Sketch](http://sketch.com) version 50+, & a recent [npm](https://nodejs.org/en/download/). Open a new Sketch file, then in a terminal: ```bash git clone https://github.com/airbnb/react-sketchapp.git cd react-sketchapp/examples/basic-setup && npm install npm run render ``` Next, [check out some more examples](https://github.com/airbnb/react-sketchapp/tree/master/examples)! ![readme-intro](https://cloud.githubusercontent.com/assets/591643/24777148/e742cd0e-1ad8-11e7-8751-090f6b2db514.png) [![npm](https://img.shields.io/npm/v/react-sketchapp.svg)](https://www.npmjs.com/package/react-sketchapp) ![Sketch.app](https://img.shields.io/badge/Sketch.app-43--50-brightgreen.svg) [![Travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://travis-ci.org/airbnb/react-sketchapp) ## Why?! 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? ```js import * as React from 'react'; import { render, Text, Artboard } from 'react-sketchapp'; const App = props => ( {props.message} ); export default context => { render(, context.document.currentPage()); }; ``` ## What can I do with it? - **Manage design systems—** `react-sketchapp` was built for [Airbnb’s design system](http://airbnb.design/building-a-visual-language/); 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](http://airbnb.design/painting-with-code/) ## Documentation - [Examples](http://airbnb.io/react-sketchapp/docs/examples.html) - [API Reference](http://airbnb.io/react-sketchapp/docs/API.html) - [Styling](http://airbnb.io/react-sketchapp/docs/guides/styling.html) - [Universal Rendering](http://airbnb.io/react-sketchapp/docs/guides/universal-rendering.html) - [Data Fetching](http://airbnb.io/react-sketchapp/docs/guides/data-fetching.html) - [FAQ](http://airbnb.io/react-sketchapp/docs/FAQ.html) - [Contributing](https://github.com/airbnb/react-sketchapp/blob/master/.github/CONTRIBUTING.md)

	Stars	Issues	Version	Updated	Created
react-sketch	666	78	0.5.1	5 years ago	8 years ago
react-sketchapp	14,951	34	3.2.6	4 years ago	7 years ago
react-styleguidist	10,790	237	13.1.2	3 months ago	9 years ago
storybook	82,827	1,857	8.0.9	6 days ago	8 years ago

react-sketch vs react-sketchapp vs react-styleguidist vs storybook

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past