[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3874":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":33,"discoverSource":34},3874,"react-sketchapp","airbnb\u002Freact-sketchapp","airbnb","render React components to Sketch ⚛️💎","http:\u002F\u002Fairbnb.io\u002Freact-sketchapp\u002F",null,"TypeScript",14881,799,399,29,0,1,2,3,43.71,"MIT License",false,"master",true,[26,27,5,28,29],"react","react-renderer","sketch","sketch-plugin","2026-06-12 02:00:55","\u003Cdiv align=\"center\">\n  \u003Cimg alt=\"react-sketchapp\" src=\"https:\u002F\u002Fcldup.com\u002FMxSVEkc_gb.png\" style=\"max-height:163px; width:100; height: auto; max-width:100%\" \u002F>\n\u003C\u002Fdiv>\n\n\u003Cdiv align=\"center\">\n  \u003Cstrong>render React components to Sketch; tailor-made for design systems\u003C\u002Fstrong>\n\u003C\u002Fdiv>\n\n## Quick-start 🏃‍\n\nFirst, make sure you have installed [Sketch](http:\u002F\u002Fsketch.com) version 50+, & a recent [npm](https:\u002F\u002Fnodejs.org\u002Fen\u002Fdownload\u002F).\n\nOpen a new Sketch file, then in a terminal:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fairbnb\u002Freact-sketchapp.git\ncd react-sketchapp\u002Fexamples\u002Fbasic-setup && npm install\n\nnpm run render\n```\n\nNext, [check out some more examples](https:\u002F\u002Fgithub.com\u002Fairbnb\u002Freact-sketchapp\u002Ftree\u002Fmaster\u002Fexamples)!\n\n![readme-intro](https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F591643\u002F24777148\u002Fe742cd0e-1ad8-11e7-8751-090f6b2db514.png)\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-sketchapp.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-sketchapp) ![Sketch.app](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSketch.app-43--50-brightgreen.svg) [![Travis](https:\u002F\u002Fimg.shields.io\u002Ftravis\u002Frust-lang\u002Frust.svg)](https:\u002F\u002Ftravis-ci.org\u002Fairbnb\u002Freact-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 => (\n  \u003CArtboard>\n    \u003CText style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>{props.message}\u003C\u002FText>\n  \u003C\u002FArtboard>\n);\n\nexport default context => {\n  render(\u003CApp message=\"Hello world!\" \u002F>, 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:\u002F\u002Fairbnb.design\u002Fbuilding-a-visual-language\u002F); 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:\u002F\u002Fairbnb.design\u002Fpainting-with-code\u002F)\n\n## Documentation\n\n- [Examples](http:\u002F\u002Fairbnb.io\u002Freact-sketchapp\u002Fdocs\u002Fexamples.html)\n- [API Reference](http:\u002F\u002Fairbnb.io\u002Freact-sketchapp\u002Fdocs\u002FAPI.html)\n- [Styling](http:\u002F\u002Fairbnb.io\u002Freact-sketchapp\u002Fdocs\u002Fguides\u002Fstyling.html)\n- [Universal Rendering](http:\u002F\u002Fairbnb.io\u002Freact-sketchapp\u002Fdocs\u002Fguides\u002Funiversal-rendering.html)\n- [Data Fetching](http:\u002F\u002Fairbnb.io\u002Freact-sketchapp\u002Fdocs\u002Fguides\u002Fdata-fetching.html)\n- [FAQ](http:\u002F\u002Fairbnb.io\u002Freact-sketchapp\u002Fdocs\u002FFAQ.html)\n- [Contributing](https:\u002F\u002Fgithub.com\u002Fairbnb\u002Freact-sketchapp\u002Fblob\u002Fmaster\u002F.github\u002FCONTRIBUTING.md)\n","react-sketchapp 是一个将 React 组件渲染到 Sketch 设计工具中的项目。它利用 TypeScript 编写，允许开发者通过编写 React 代码来生成 Sketch 文件，特别适合于设计系统管理和维护。其核心功能包括支持使用真实数据进行设计、构建可复用的设计文档以及基于现有设计组件快速创建新设计。适用于需要高效管理设计资产、尤其是大型设计系统的团队，或是希望在设计阶段就能引入开发人员参与的场景。此外，该项目还提供了丰富的文档和示例，帮助用户快速上手并探索更多高级用法。","2026-06-11 02:56:51","top_language"]