{"id":15784671,"url":"https://github.com/idrawjs/studio","last_synced_at":"2025-08-14T17:32:01.958Z","repository":{"id":44807476,"uuid":"374087083","full_name":"idrawjs/studio","owner":"idrawjs","description":"The studio of iDraw.js (iDraw.js的画图编辑器)","archived":false,"fork":false,"pushed_at":"2024-06-16T08:16:20.000Z","size":8438,"stargazers_count":72,"open_issues_count":0,"forks_count":19,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-06-16T10:01:11.589Z","etag":null,"topics":["canvas","desgin","figma","idraw","idraw-studio","idrawjs","idrawjs-editor","sketch"],"latest_commit_sha":null,"homepage":"https://idrawjs.com/studio/","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/idrawjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2021-06-05T10:39:50.000Z","updated_at":"2024-06-22T22:25:56.400Z","dependencies_parsed_at":"2023-12-16T04:59:16.196Z","dependency_job_id":"563b8fa9-4096-4bab-a41c-991f782655f4","html_url":"https://github.com/idrawjs/studio","commit_stats":{"total_commits":243,"total_committers":3,"mean_commits":81.0,"dds":0.008230452674897082,"last_synced_commit":"a940de55de66d613e68f0d744674c4e13b00f081"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idrawjs%2Fstudio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idrawjs%2Fstudio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idrawjs%2Fstudio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idrawjs%2Fstudio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idrawjs","download_url":"https://codeload.github.com/idrawjs/studio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229848544,"owners_count":18133649,"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":["canvas","desgin","figma","idraw","idraw-studio","idrawjs","idrawjs-editor","sketch"],"created_at":"2024-10-04T20:04:53.027Z","updated_at":"2024-12-15T17:10:22.484Z","avatar_url":"https://github.com/idrawjs.png","language":"TypeScript","funding_links":["https://opencollective.com/idrawjs"],"categories":[],"sub_categories":[],"readme":"# @idraw/studio\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@idraw/studio\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@idraw/studio.svg?sanitize=@idraw/studio\" alt=\"Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@idraw/studio\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/@idraw/studio.svg?sanitize=true\" alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://idrawjs.com/studio/\" target=\"_blank\"\u003eidrawjs.com/studio/\u003c/a\u003e\n\u003c/p\u003e\n\n## Sponsors\n\n`@idraw/studio` is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider [sponsoring iDrawjs's development](https://opencollective.com/idrawjs).\n\n[![Become a Backer](https://opencollective.com/idrawjs/tiers/backers.svg?avatarHeight=48)](https://opencollective.com/idrawjs)\n\n\n \n## @idraw/studio Preview\n\nYou can click [idrawjs.com/studio/](https://idrawjs.com/studio) to experience it.\n\nThe preview of `@idraw/studo`. \n\n\n\u003cp align=\"center\"\u003e\n\n  \u003cimg width=\"700\" alt=\"idraw-studio-light-theme\" src=\"https://github.com/idrawjs/studio/assets/8216630/8a49bab8-1e4a-44dd-9836-b6ce3861aaea\" /\u003e\n\n  \u003cimg width=\"700\" alt=\"idraw-studio-dark-theme\" src=\"https://github.com/idrawjs/studio/assets/8216630/479fce0b-891f-47f2-ace8-d91580e68b4b\" /\u003e\n\n\u003c/p\u003e\n\n## Usage\n\n```sh \n# Install peer dependcies\nnpm install antd idraw\n\nnpm install @idraw/studio\n```\n\n```js\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Studio } from '@idraw/studio';\nimport '@idraw/studio/dist/css/index.css'\n\nconst App = () =\u003e { \n  const [width, setWidth] = useState\u003cnumber\u003e(window.innerWidth);\n  const [height, setHeight] = useState\u003cnumber\u003e(window.innerHeight);\n  useEffect(() =\u003e {\n    window.addEventListener('resize', () =\u003e {\n      setWidth(window.innerWidth);\n      setHeight(window.innerHeight);\n    });\n  }, []); \n\n  return (\n    \u003cStudio\n      width={width}\n      height={height} \n      data={data}\n      defaultScaleInfo={{ \n        scale: 1,\n        offsetX: 0,\n        offsetY: 0\n      }}\n    /\u003e\n  );\n};\n\nconst root = createRoot(document.querySelector('#app'));\nroot.render(\u003cApp /\u003e);\n\n```\n\n## Development\n\n```sh\ngit clone git@github.com:idrawjs/studio.git\n\ncd studio\n\npnpm install\n\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidrawjs%2Fstudio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidrawjs%2Fstudio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidrawjs%2Fstudio/lists"}