{"id":28992398,"url":"https://github.com/nocode-js/mini-canvas-editor","last_synced_at":"2025-06-25T02:10:05.901Z","repository":{"id":200149758,"uuid":"703718133","full_name":"nocode-js/mini-canvas-editor","owner":"nocode-js","description":"JavaScript image editor as component. Integrate with any front-end framework.","archived":false,"fork":false,"pushed_at":"2025-05-20T20:43:42.000Z","size":445,"stargazers_count":127,"open_issues_count":0,"forks_count":25,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-17T11:08:16.125Z","etag":null,"topics":["canvas","canvas-editor","canvas-js","canvasjs","fabricjs","inpainting","inpainting-editor","paint","paint-js","photo-editing","photo-editing-app","photo-editor"],"latest_commit_sha":null,"homepage":"https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html","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/nocode-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-10-11T19:15:37.000Z","updated_at":"2025-06-12T15:27:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"be7494a0-2dcf-4ebe-819d-6d2dd9b33386","html_url":"https://github.com/nocode-js/mini-canvas-editor","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"49560269468c139a7ceda6ab4988a5555a6b8ed4"},"previous_names":["b4rtaz/mini-canvas-editor","nocode-js/mini-canvas-editor"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/nocode-js/mini-canvas-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fmini-canvas-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fmini-canvas-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fmini-canvas-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fmini-canvas-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nocode-js","download_url":"https://codeload.github.com/nocode-js/mini-canvas-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fmini-canvas-editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260499241,"owners_count":23018282,"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","canvas-editor","canvas-js","canvasjs","fabricjs","inpainting","inpainting-editor","paint","paint-js","photo-editing","photo-editing-app","photo-editor"],"created_at":"2025-06-25T02:10:03.199Z","updated_at":"2025-06-25T02:10:05.886Z","avatar_url":"https://github.com/nocode-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Mini Canvas Editor](.github/cover.jpg)\n\n# Mini Canvas Editor\n\n[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fnocode-js%2Fmini-canvas-editor%2Fbadge%3Fref%3Dmain\u0026style=flat-square)](https://actions-badge.atrox.dev/nocode-js/mini-canvas-editor/goto?ref=main) [![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat-square)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/mini-canvas-editor.svg?style=flat-square)](https://npmjs.org/package/mini-canvas-editor)\n\nCanvas editor component for JavaScript application. Works with any front-end framework. Easy to integrate and use. Well-known graphical interface. Edit images, draw shapes, add texts and more. Gzipped size less than 100 KB. Uses Fabric.js internally.\n\nMain use cases:\n\n* resize image,\n* crop image,\n* create a template, render it on the front-end and the back-end (Node.js only),\n* create inpainting mask.\n\nOnline Examples:\n\n* [🎬 Template Creator](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)\n* [🎨 Inpainting Mask](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)\n* [🔲 Crop](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/crop.html)\n* [📦 Vanilla JavaScript](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/vanilla-javascript.html)\n\n## 🚀 Installation\n\nTo use the editor you should add JS/TS files and CSS files to your project.\n\n### NPM\n\nInstall this package by [NPM](https://www.npmjs.com/) command:\n\n`npm i mini-canvas-editor`\n\nTo import the package:\n\n```ts\nimport { Editor } from 'mini-canvas-editor';\n```\n\nIf you use [css-loader](https://webpack.js.org/loaders/css-loader/) or similar, you can add CSS files to your bundle:\n\n```ts\nimport 'mini-canvas-editor/css/editor.css';\n```\n\nTo create the editor write the below code:\n\n```ts\nEditor.createBlank(placeholder, 200, 300, {});\n```\n\n### CDN\n\nAdd the below code to your head section in HTML document.\n\n```html\n\u003chead\u003e\n...\n\u003clink href=\"https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.3.2/css/editor.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/mini-canvas-core@0.3.2/dist/index.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.3.2/dist/index.umd.js\"\u003e\u003c/script\u003e\n```\n\nCreate the editor by:\n\n```js\nminiCanvasEditor.Editor.createBlank(placeholder, 200, 300, {});\n```\n\n## 💡 License\n\nThis project is released under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnocode-js%2Fmini-canvas-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnocode-js%2Fmini-canvas-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnocode-js%2Fmini-canvas-editor/lists"}