https://github.com/nocode-js/mini-canvas-editor

JavaScript image editor as component. Integrate with any front-end framework.
https://github.com/nocode-js/mini-canvas-editor

canvas canvas-editor canvas-js canvasjs fabricjs inpainting inpainting-editor paint paint-js photo-editing photo-editing-app photo-editor

Last synced: 4 months ago
JSON representation

JavaScript image editor as component. Integrate with any front-end framework.

• Host: GitHub
• URL: https://github.com/nocode-js/mini-canvas-editor
• Owner: nocode-js
• License: mit
• Created: 2023-10-11T19:15:37.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2025-05-20T20:43:42.000Z (5 months ago)
• Last Synced: 2025-06-17T11:08:16.125Z (4 months ago)
• Topics: canvas, canvas-editor, canvas-js, canvasjs, fabricjs, inpainting, inpainting-editor, paint, paint-js, photo-editing, photo-editing-app, photo-editor
• Language: TypeScript
• Homepage: https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html
• Size: 435 KB
• Stars: 127
• Watchers: 3
• Forks: 25
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Mini Canvas Editor](.github/cover.jpg)

# Mini Canvas Editor

[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fnocode-js%2Fmini-canvas-editor%2Fbadge%3Fref%3Dmain&style=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)

Canvas 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.

Main use cases:

* resize image,

* crop image,

* create a template, render it on the front-end and the back-end (Node.js only),

* create inpainting mask.

Online Examples:

* [🎬 Template Creator](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)

* [🎨 Inpainting Mask](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)

* [🔲 Crop](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/crop.html)

* [📦 Vanilla JavaScript](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/vanilla-javascript.html)

## 🚀 Installation

To use the editor you should add JS/TS files and CSS files to your project.

### NPM

Install this package by [NPM](https://www.npmjs.com/) command:

`npm i mini-canvas-editor`

To import the package:

```ts

import { Editor } from 'mini-canvas-editor';

```

If you use [css-loader](https://webpack.js.org/loaders/css-loader/) or similar, you can add CSS files to your bundle:

```ts

import 'mini-canvas-editor/css/editor.css';

```

To create the editor write the below code:

```ts

Editor.createBlank(placeholder, 200, 300, {});

```

### CDN

Add the below code to your head section in HTML document.

```html

...

```

Create the editor by:

```js

miniCanvasEditor.Editor.createBlank(placeholder, 200, 300, {});

```

## 💡 License

This project is released under the MIT license.