{"id":13697985,"url":"https://github.com/gridaco/code","last_synced_at":"2025-10-07T18:03:33.740Z","repository":{"id":40516866,"uuid":"342711055","full_name":"gridaco/code","owner":"gridaco","description":"Design to Code Engine","archived":false,"fork":false,"pushed_at":"2025-01-18T13:58:50.000Z","size":33170,"stargazers_count":241,"open_issues_count":90,"forks_count":33,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-01T15:11:34.644Z","etag":null,"topics":["code-generation","design-to-code","figma","figma-html","figma-react","flutter","works-with-flutter","works-with-react","works-with-svelte","works-with-vue"],"latest_commit_sha":null,"homepage":"https://grida.co/code","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gridaco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"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},"funding":{"open_collective":"grida"}},"created_at":"2021-02-26T21:56:15.000Z","updated_at":"2025-03-13T03:06:41.000Z","dependencies_parsed_at":"2025-02-03T17:02:00.018Z","dependency_job_id":null,"html_url":"https://github.com/gridaco/code","commit_stats":{"total_commits":2219,"total_committers":5,"mean_commits":443.8,"dds":0.06534474988733663,"last_synced_commit":"f28e931d0f7899df048ec7ee5d0b414affe0c0d8"},"previous_names":["gridaco/designto-code"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gridaco","download_url":"https://codeload.github.com/gridaco/code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247878014,"owners_count":21011158,"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":["code-generation","design-to-code","figma","figma-html","figma-react","flutter","works-with-flutter","works-with-react","works-with-svelte","works-with-vue"],"created_at":"2024-08-02T18:01:09.023Z","updated_at":"2025-10-07T18:03:33.658Z","avatar_url":"https://github.com/gridaco.png","language":"TypeScript","readme":"\u003ccenter\u003e\n\n\u003c/center\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://code.grida.co\"\u003e\n  \u003cimage src=\"./branding/gh-artwork.png\" /\u003e\n    \u003ch3 align=\"center\"\u003eDesign to Code\u003c/h3\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Design to code engine. A design ✌️ code standard.\n\u003c/p\u003e\n\n\u003e Grida's Design to code core library. Convert your figma, sketch and adobe xd design to flutter, react, vue and more.\n\n```\nnpx designto react https://www.figma.com/files/XXX\n```\n\n**Or.. [👩‍💻 Try designto-code from browser IDE](https://code.grida.co)**\n\n## Usage\n\n```bash\nnpm i -g @designto/cli\n\n# react + figma example\ndesignto react https://www.figma.com/files/XXX -o mypage.tsx\n```\n\nIntegrated usage\n\n- Assistant (Figma plugin) - visit [assistant](https://github.com/gridaco/assistant)\n- [code.grida.co](https://code.grida.co) (Web IDE for frontend development)\n- [grida CLI](https://github.com/gridaco/cli)\n- [@designto/cli](./cli)\n\n## Supported Design Tools\n\nWe support importing designs from Figma with our [figma-sdk](https://github.com/gridaco/figma-sdk). You can also design components with [scenes](https://github.com/gridaco/scenes) DSL, or use our built-in drag \u0026 drop editor.\n\n## Platforms / Frameworks\n\n| **Frameworks**     |       | channel  | bundler         | reflect-ui | material-ui  | tailwind | packager               |\n| ------------------ | :---: | -------- | --------------- | ---------- | ------------ | -------- | ---------------------- |\n| ReactJS            |  ✅   | `stable` | `esbuild`       | (wip)      | (wip)        | (wip)    | `npm`, `local`, `git`  |\n| Flutter            |  ✅   | `beta`   | `dart-services` | (wip)      | Yes (native) | No       | `pub`, `local`, `git`  |\n| React Native       |  ✅   | `beta`   | `expo`          | (wip)      | No           | No       | `expo`, `local`, `git` |\n| SolidJS            |  ✅   | `beta`   | `esbuild`       | (wip)      | No           | (wip)    | `npm`, `local`, `git`  |\n| Vanilla (html/css) |  ✅   | `stable` | `vanilla`       | (wip)      | No           | (wip)    | `local`, `cdn`         |\n| Svelte             |  ✅   | `beta`   | `svelte`        | (wip)      | No           | (wip)    | `npm`, `local`, `git`  |\n| Vue                | (wip) | `dev`    | `vue`           | (wip)      | No           | (wip)    | `npm`, `local`, `git`  |\n| Android (Jetpack)  | (wip) | `dev`    | Not supported   | (wip)      | Yes (native) | No       | `local`, `git`         |\n| iOS (SwiftUI)      | (wip) | `dev`    | Not supported   | (wip)      | No           | No       | `local`, `git`         |\n\n\u003cdetails\u003e\n\u003csummary\u003eReact\u003c/summary\u003e\n\n| **ReactJS**         |       |\n| ------------------- | :---: |\n| `styled-components` |  ✅   |\n| `@emotion/styled`   |  ✅   |\n| css-modules         |  ✅   |\n| inline-css          |  ✅   |\n| `@mui/material`     | (wip) |\n| breakpoints         | (wip) |\n| components          | (wip) |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eReactNative\u003c/summary\u003e\n\n| **ReactNative**                |       |\n| ------------------------------ | :---: |\n| `StyleSheet`                   |  ✅   |\n| `styled-components/native`     |  ✅   |\n| `@emotion/native`              |  ✅   |\n| `react-native-linear-gradient` | (wip) |\n| `react-native-svg`             | (wip) |\n| `expo`                         | (wip) |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVanilla (html/css)\u003c/summary\u003e\n\n| **Vanilla** |               |\n| ----------- | :-----------: |\n| reflect-ui  | right-aligned |\n| css         |      ✅       |\n| scss        |   are neat    |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFlutter\u003c/summary\u003e\n\n| **Flutter** |       |\n| ----------- | :---: |\n| material    |  ✅   |\n| cupertino   | (wip) |\n| reflect-ui  | (wip) |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSvelte\u003c/summary\u003e\n\n| **Svelte**          |       |\n| ------------------- | :---: |\n| `styled-components` |  ✅   |\n| `@mui/material`     | (wip) |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue3\u003c/summary\u003e\n\n| **Vue**             |       |\n| ------------------- | :---: |\n| `styled-components` |  ✅   |\n| `@mui/material`     | (wip) |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSolidJS\u003c/summary\u003e\n\n| **Solid**                 |     |\n| ------------------------- | :-: |\n| `solid-styled-components` | ✅  |\n| `inline-css`              | ✅  |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eiOS Native\u003c/summary\u003e\n\n| **iOS** |       |\n| ------- | :---: |\n| SwiftUI | (wip) |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAndroid Native\u003c/summary\u003e\n\n| **Android**     |       |\n| --------------- | :---: |\n| Jetpack Compose | (wip) |\n\n\u003c/details\u003e\n\n## Usage\n\n- [REST API](./www/README.md)\n- Linting (coming soon)\n- Custom Tokenizer (coming soon)\n- Custom Assets Repository (coming soon)\n- Custom Cache (coming soon)\n- Custom Cursor (coming soon)\n- Plugins (coming soon)\n\n### Running locally\n\n```\ngit clone https://github.com/gridaco/code.git\ncd code\n\nyarn\nyarn editor\n# visit http://localhost:6626\n```\n\n**Trouble shooting**\n\nOur visual testing library uses node-canvas, which requires some additional dependencies. If you run into issues, please see the [node-canvas documentation](https://github.com/Automattic/node-canvas)\n\nIf you see error like this while installing dependencies,\n\n```txt\nnode-pre-gyp ERR! node -v v18.17.0\nnode-pre-gyp ERR! node-pre-gyp -v v1.0.10\nnode-pre-gyp ERR! not ok\n```\n\nTry this\n\n```bash\nbrew install pkg-config cairo pango libpng jpeg giflib librsvg pixman\nbrew install python@2 # since python2 is no longer available on brw, you can also use this link. https://www.python.org/downloads/release/python-2718/\n```\n\n- [Reference#2 / node-canvas/issues/1733](https://github.com/Automattic/node-canvas/issues/1733#issuecomment-761703018)\n- [Reference#1 / node-canvas/issues/1662](https://github.com/Automattic/node-canvas/issues/1662#issuecomment-1465269869)\n\n\u003cdetails\u003e\n\u003csummary\u003eTrouble shooting\u003c/summary\u003e\n\n- update pulling - `git submodule update --init --recursive`\n\n\u003c/details\u003e\n\n## Features\n\n- preprocessing\n  - lint\n    - layout lint\n    - naming lint\n- design\n  - layouts\n  - animations\n  - constraints\n  - breakpoints\n- code\n  - documentation\n    - tsdoc\n  - single-file module\n  - multi-file module\n\n\u003cdetails\u003e\n\u003csummary\u003eLayouts\u003c/summary\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAnimations (motions)\u003c/summary\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eConstraints\u003c/summary\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eBreakpoints\u003c/summary\u003e\n\n\u003c/details\u003e\n\n### Editor (web IDE)\n\nhttps://user-images.githubusercontent.com/16307013/145498355-58fb2cf3-a6a0-44a3-8515-3859b048c3a4.mov\n\nVisit project ([`./editor`](./editor/))\n\n\u003cdetails\u003e\n\u003csummary\u003eVisualization\u003c/summary\u003e\n\n![](./branding/shot-1.png)\n\n![](./branding/shot-1.png)\n\n![](./branding/shot-2.png)\n\n![](./branding/shot-3.png)\n\n![](./branding/shot-4.png)\n\n![](./branding/shot-5.png)\n\n![Grida's design to code. design node visualization snapshot](./branding/example-visualization-design-nodes.png)\n\n\u003c/details\u003e\n\n## Contributing\n\n- See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.\n\n**architecture**\n\n- See [architecture.md](./architecture.md)\n","funding_links":["https://opencollective.com/grida"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgridaco%2Fcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgridaco%2Fcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgridaco%2Fcode/lists"}