{"id":19286794,"url":"https://github.com/adobe-webplatform/css-shapes-editor","last_synced_at":"2026-03-16T22:33:10.328Z","repository":{"id":11666966,"uuid":"14175849","full_name":"adobe-webplatform/css-shapes-editor","owner":"adobe-webplatform","description":"Standalone in-browser editor for CSS Shapes.","archived":false,"fork":false,"pushed_at":"2015-05-21T14:19:03.000Z","size":1549,"stargazers_count":120,"open_issues_count":7,"forks_count":23,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-04-01T19:19:04.725Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adobe-webplatform.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-06T15:07:01.000Z","updated_at":"2024-05-13T03:28:24.000Z","dependencies_parsed_at":"2022-09-14T09:01:50.639Z","dependency_job_id":null,"html_url":"https://github.com/adobe-webplatform/css-shapes-editor","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fcss-shapes-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fcss-shapes-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fcss-shapes-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fcss-shapes-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adobe-webplatform","download_url":"https://codeload.github.com/adobe-webplatform/css-shapes-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250167614,"owners_count":21386004,"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":[],"created_at":"2024-11-09T22:04:23.044Z","updated_at":"2026-03-16T22:33:10.277Z","avatar_url":"https://github.com/adobe-webplatform.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Shapes Editor\n\nJavaScript library for interactive editing of CSS Shapes values right in the browser. It works with functional values like `polygon()`, `circle()` and `ellipse()`.\n\n## Demo\n\nSee the `demo/` folder for examples.\n\n## Basic usage\n\nLoad `dist/CSSShapesEditor.js` into the page:\n\n```js\n\u003cscript src=\"dist/CSSShapesEditor.js\"\u003e\u003c/script\u003e\n```\n\nSetup the editor to edit a CSS shape value of an element. An interactive editor for the shape is drawn on top of the element.\n\n```js\nvar element = document.querySelector('#element');\nvar shape = window.getComputedStyle(element)['shape-outside'];\nvar editor = CSSShapesEditor(element, shape);\n\neditor.on('shapechange', function(){\n  // update the CSS shape value on the element\n  element.style['shape-outside'] = editor.getCSSValue();\n})\n```\n\n\nSupported shape values:\n\n - `polygon()`\n - `circle()`\n - `ellipse()`\n\nCreate a new shape from scratch by passing a shape declaration with no coordinates.\n\n```js\nvar editor = CSSShapesEditor(element, 'polygon()');\n```\n\n## Events\n\nThe `\"ready\"` event is dispatched after the editor was initialized\n\n```js\neditor.on('ready', function(){\n  // editor is ready to work with\n})\n```\n\nThe `\"shapechange\"` event is dispatched after the shape was changed in the editor\n\n```js\neditor.on('shapechange', function(){\n  // update the CSS shape value on the element\n  element.style['shape-outside'] = editor.getCSSValue();\n})\n```\n\nThe `\"removed\"` event is dispatched after the editor has been turned off and removed by using `editor.remove()`.\n\n```js\neditor.on('removed', function(){\n  // editor is gone; do other clean-up\n})\n```\n\n## API  \n\nGet the CSS shape value as a string to use in a stylesheet:\n\n```js\neditor.getCSSValue()\n```\n\nGet the CSS shape value as a string with coordinates converted to a specific unit type:\n\n```js\neditor.getCSSValue('%')\n// supported values: [\"px\", \"in\", \"cm\", \"mm\", \"pt\", \"pc\", \"em\", \"rem\", \"vw\", \"vh\", \"%\"]\n\n```\n\nProgrammatically update the shape editor with a new shape value:\n\n```js\neditor.update(\"circle(50% at center)\")\n```\n\nToggle the free-transform editor (scale, move, rotate) for the shape:\n\n```js\neditor.toggleFreeTransform();\n```\n\nTurn off editor and remove if from the page. **Unsaved changes will be lost.**\n\n```js\neditor.remove()\n```\n\n## Contributing\n\nYour system needs:\n\n  - [Node.JS](http://nodejs.org/)\n  - [Grunt](http://gruntjs.com/)\n\n### Setup dev environment\n\nInstall dependencies:\n\n    $ npm install\n\n### Build\n\nEdit source in the `src/` directory. Build with Grunt:\n\n    $ grunt build\n\nBuild output goes into `dist/`. Do not edit source in `dist/`, it gets replaced automatically by the Grunt build process.\n\n### Test\n\nAdd tests to `test/spec/`. Run tests with [Testem](https://github.com/airportyh/testem):\n\n    $ testem\n\nTestem uses the configuration found in `testem.json`\n\n## License\n\nApache 2.0. See [LICENSE.md](./LICENSE.md)\n\n## Thanks\n\nThe work of many people has contributed, both directly and indirectly, to building the CSS Shapes Editor library:\n\n- [Razvan Caliman](https://github.com/oslego)\n- [Bear Travis](https://github.com/betravis)\n- [François Remy](https://github.com/FremyCompany)\n- [Laurence Mclister](https://github.com/lmclister)\n- [Hans Muller](https://github.com/hansmuller)\n- [Lawrence Hsu](https://github.com/larz0)\n- [Dmitry Baranovskiy](https://github.com/DmitryBaranovskiy) for creating [Snap.svg](http://snapsvg.io/)\n- [Elbert Alias](https://github.com/elbertf) for creating [Raphael.FreeTransform ](https://github.com/ElbertF/Raphael.FreeTransform)\n\nand many, many others. Thank you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe-webplatform%2Fcss-shapes-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadobe-webplatform%2Fcss-shapes-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe-webplatform%2Fcss-shapes-editor/lists"}