{"id":13401075,"url":"https://github.com/airbnb/react-sketchapp","last_synced_at":"2025-05-12T09:25:22.632Z","repository":{"id":39999087,"uuid":"89012427","full_name":"airbnb/react-sketchapp","owner":"airbnb","description":"render React components to Sketch ⚛️💎","archived":false,"fork":false,"pushed_at":"2024-05-14T11:10:52.000Z","size":4428,"stargazers_count":14929,"open_issues_count":35,"forks_count":818,"subscribers_count":404,"default_branch":"master","last_synced_at":"2025-05-11T08:38:25.445Z","etag":null,"topics":["react","react-renderer","react-sketchapp","sketch","sketch-plugin"],"latest_commit_sha":null,"homepage":"http://airbnb.io/react-sketchapp/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/airbnb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-21T18:27:39.000Z","updated_at":"2025-05-03T10:28:45.000Z","dependencies_parsed_at":"2024-06-18T13:42:07.369Z","dependency_job_id":"802874c9-8996-4021-8261-aecef2d0f2d6","html_url":"https://github.com/airbnb/react-sketchapp","commit_stats":{"total_commits":631,"total_committers":69,"mean_commits":9.144927536231885,"dds":0.6671949286846276,"last_synced_commit":"b238e69c6f1e65ec6b1d8a908a91fbd9a8cc43a7"},"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Freact-sketchapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Freact-sketchapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Freact-sketchapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Freact-sketchapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/airbnb","download_url":"https://codeload.github.com/airbnb/react-sketchapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253540673,"owners_count":21924523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-renderer","react-sketchapp","sketch","sketch-plugin"],"created_at":"2024-07-30T19:00:58.438Z","updated_at":"2025-05-11T08:38:35.437Z","avatar_url":"https://github.com/airbnb.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript","JavaScript","Design","React [🔝](#readme)","Sketch"],"sub_categories":["Uncategorized","Test","Handoff"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"react-sketchapp\" src=\"https://cldup.com/MxSVEkc_gb.png\" style=\"max-height:163px; width:100; height: auto; max-width:100%\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003erender React components to Sketch; tailor-made for design systems\u003c/strong\u003e\n\u003c/div\u003e\n\n## Quick-start 🏃‍\n\nFirst, make sure you have installed [Sketch](http://sketch.com) version 50+, \u0026 a recent [npm](https://nodejs.org/en/download/).\n\nOpen a new Sketch file, then in a terminal:\n\n```bash\ngit clone https://github.com/airbnb/react-sketchapp.git\ncd react-sketchapp/examples/basic-setup \u0026\u0026 npm install\n\nnpm run render\n```\n\nNext, [check out some more examples](https://github.com/airbnb/react-sketchapp/tree/master/examples)!\n\n![readme-intro](https://cloud.githubusercontent.com/assets/591643/24777148/e742cd0e-1ad8-11e7-8751-090f6b2db514.png)\n\n[![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)\n\n## Why?!\n\nManaging 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.\n\n## What does the code look like?\n\n```js\nimport * as React from 'react';\nimport { render, Text, Artboard } from 'react-sketchapp';\n\nconst App = props =\u003e (\n  \u003cArtboard\u003e\n    \u003cText style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}\u003e{props.message}\u003c/Text\u003e\n  \u003c/Artboard\u003e\n);\n\nexport default context =\u003e {\n  render(\u003cApp message=\"Hello world!\" /\u003e, context.document.currentPage());\n};\n```\n\n## What can I do with it?\n\n- **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\n- **Use real components for designs—** Implement your designs in code as React components and render them into Sketch\n- **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\n- **Build new tools on top of Sketch—** the easiest way to use Sketch as a canvas for custom design tooling\n\nFound a novel use? We'd love to hear about it!\n\n[Read more about why we built it](http://airbnb.design/painting-with-code/)\n\n## Documentation\n\n- [Examples](http://airbnb.io/react-sketchapp/docs/examples.html)\n- [API Reference](http://airbnb.io/react-sketchapp/docs/API.html)\n- [Styling](http://airbnb.io/react-sketchapp/docs/guides/styling.html)\n- [Universal Rendering](http://airbnb.io/react-sketchapp/docs/guides/universal-rendering.html)\n- [Data Fetching](http://airbnb.io/react-sketchapp/docs/guides/data-fetching.html)\n- [FAQ](http://airbnb.io/react-sketchapp/docs/FAQ.html)\n- [Contributing](https://github.com/airbnb/react-sketchapp/blob/master/.github/CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairbnb%2Freact-sketchapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fairbnb%2Freact-sketchapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairbnb%2Freact-sketchapp/lists"}