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)!
[](https://www.npmjs.com/package/react-sketchapp)  [](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)
