{"id":27062224,"url":"https://github.com/easylogic/editor","last_synced_at":"2025-04-05T15:01:55.663Z","repository":{"id":4361468,"uuid":"184730929","full_name":"kode-team/easylogic.studio","owner":"kode-team","description":"Fantastic Web Design Tool ","archived":false,"fork":false,"pushed_at":"2022-12-08T11:52:56.000Z","size":183759,"stargazers_count":497,"open_issues_count":28,"forks_count":55,"subscribers_count":14,"default_branch":"develop","last_synced_at":"2024-10-29T22:44:52.311Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://editor.easylogic.studio","language":"JavaScript","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/kode-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["easylogic"]}},"created_at":"2019-05-03T09:33:55.000Z","updated_at":"2024-09-28T07:11:35.000Z","dependencies_parsed_at":"2023-01-13T16:22:58.014Z","dependency_job_id":null,"html_url":"https://github.com/kode-team/easylogic.studio","commit_stats":null,"previous_names":["easylogic/editor"],"tags_count":114,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Feasylogic.studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Feasylogic.studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Feasylogic.studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Feasylogic.studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kode-team","download_url":"https://codeload.github.com/kode-team/easylogic.studio/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353728,"owners_count":20925329,"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":"2025-04-05T15:01:52.998Z","updated_at":"2025-04-05T15:01:55.639Z","avatar_url":"https://github.com/kode-team.png","language":"JavaScript","funding_links":["https://github.com/sponsors/easylogic"],"categories":["JavaScript"],"sub_categories":[],"readme":"# EasyLogic Studio\n\n\nEasyLogic Studio is built using CSS and SVG to reduce the gap between web design and code. The goal is to have the same point in time between the designer's design and the developer's output.\n\n\n* manual : https://www.easylogic.studio/docs/getting-started.html\n* editor : https://editor-core.easylogic.studio/\n* player: https://editor-core.easylogic.studio/player.html\n* editor-with-plugin: https://editor.easylogic.studio/\n\n\nThis project is [sapa](https://github.com/easylogic/sapa) based. \n\n# Screen Shot \n\n\u003cimg src='https://www.easylogic.studio/images/editor.png' /\u003e\n\n\n# Features \n\n### Support Element \n\n* Artboard \n* Rect \n* Circle \n* Text \n* Image \n* SVG Path (with Rect, Circle) \n* SVG Spline\n* SVG Polygon\n* SVG Star \n* SVG TextPath\n\n\n### Style\n\n* Alignment \n* Position \n* Size (pixel based)\n* Layout (flex, grid, abolute) \n* Constraints (auto resizing)\n* Many styling tools \n  * background (support resizing tool)\n  * font \u0026 text style \n  * gradient (multiple background images )\n  * border \u0026 radius \n  * filter \n  * clip-path (support svg path )\n  * box-shadows  (multiple)\n  * text-shadows (multiple)\n\n\n### Animation \n* Transition \n* Animation \u0026 Keyframes \n* Support cubic-bezier editor \n\n### Code \u0026 Share \n* Support code viewer  \n* Support png \u0026 svg download  \n\n### Drawing \n* Support mini path editor \n\n\n### Theming  \n* dark\n* light\n\n\n# Development \n\n```\ngit clone https://github.com/easylogic/editor.git\ncd editor\nnpm install \nnpm run dev \n``` \n\n# build \n\n```\nnpm run build \n```\n\n# Open Editor \n\nplease refer to src/index.html, src/index.js \n\n```html\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e    \n  \u003c/body\u003e\n```\n\n```js\n\nimport EasyLogic from \"@easylogic/editor\";\n\nvar app = new EasyLogic.createDesignEditor({\n  container: document.getElementById('app'),\n  data: {\n    projects: [{\n      itemType: 'project', \n      layers: [\n        {itemType: 'rect', x: 0, y: 0, width: 100, height: 100, 'background-color': 'red'},\n        {itemType: 'rect', x: 20, y: 20, width: 100, height: 100, 'background-color': 'green'},\n        {itemType: 'rect', x: 40, y: 40, width: 100, height: 100, 'background-color': 'blue'}\n      ]\n    }],\n  },\n  plugins: [\n    // define plugin \n    function (editor) {\n      console.log(editor);\n    }\n  ]\n});\n\n```\n\n# Configs \n\nYou can set some useful configs.\n\n```js\nvar app = new EasyLogic.createDesignEditor({\n  container: document.getElementById('app'),\n  config: {\n    \"style.canvas.backgroud.color\": \"#FDC111\"\n    \"show.ruler\": false,\n    \"show.left.panel\": false,\n    \"show.right.panel\": false\n  },\n})\n```\n\n# Plugins \n\nplease refer to  [MakeEditor](./system/MAKE.ko.md)\n\n\n# Thanks to \n\n* icon - https://material.io/resources/icons/?style=baseline\n\n\n# License : MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasylogic%2Feditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasylogic%2Feditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasylogic%2Feditor/lists"}