# react-sketchapp
> A React renderer for Sketch.app
Latest version **3.2.6** (published 2020-06-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-sketchapp
pnpm add react-sketchapp
yarn add react-sketchapp
bun add react-sketchapp
```
## Health
**Score 45/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score; popular repo.
Warnings: low downloads.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 3.2.6 |
| Published | 2020-06-08 |
| First published | 2016-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14861 |
| Author | Jon Gold |
| Maintainers | airbnbeng, etienne_tripier, jongold, lencioni, ljharb, mathieudutour, milesj, noratarano, schleyfox |
| Keywords | sketch, sketchapp, react, reactjs, renderer |
## Links
- npm: https://www.npmjs.com/package/react-sketchapp
- Repository: https://github.com/airbnb/react-sketchapp
- Issues: https://github.com/airbnb/react-sketchapp/issues
- npm.io page: https://npm.io/package/react-sketchapp
## Dependencies (13)
- [pegjs](https://npm.io/package/pegjs.md) ^0.10.0
- [js-sha1](https://npm.io/package/js-sha1.md) ^0.6.0
- [invariant](https://npm.io/package/invariant.md) ^2.2.2
- [murmur2js](https://npm.io/package/murmur2js.md) ^1.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [seedrandom](https://npm.io/package/seedrandom.md) ^3.0.5
- [@lona/svg-model](https://npm.io/package/@lona/svg-model.md) ^2.0.0
- [airbnb-prop-types](https://npm.io/package/airbnb-prop-types.md) ^2.15.0
- [error-stack-parser](https://npm.io/package/error-stack-parser.md) ^2.0.6
- [node-sketch-bridge](https://npm.io/package/node-sketch-bridge.md) ^0.2.0
- [normalize-css-color](https://npm.io/package/normalize-css-color.md) ^1.0.1
- [yoga-layout-prebuilt](https://npm.io/package/yoga-layout-prebuilt.md) ^1.9.5
- [@sketch-hq/sketch-file-format-ts](https://npm.io/package/@sketch-hq/sketch-file-format-ts.md) 4.0.3
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.2.6 (latest) — 2020-06-08
- 3.0.0-beta.8 (beta) — 2019-03-09
- 1.0.0-beta.5 (next) — 2017-10-11
- 3.2.5 — 2020-05-10
- 3.2.4 — 2020-05-09
- 3.2.3 — 2020-05-07
- 3.2.2 — 2020-05-04
- 3.2.1 — 2020-05-04
- 3.2.0 — 2020-04-21
- 3.1.3 — 2020-04-17
- 3.1.2 — 2020-04-16
- 3.1.1 — 2020-03-25
- 3.1.0 — 2020-01-21
- 3.0.5 — 2019-12-10
- 3.0.4 — 2019-12-02
- … 44 more at https://npm.io/package/react-sketchapp/versions
## README
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)
---
_Source: https://npm.io/package/react-sketchapp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
