npmpackage.info

Gathering detailed insights and metrics for tui-image-editor

Other packages similar to tui-image-editor

grapesjs-tui-image-editor

1.0.2

GrapesJS TOAST UI Image Editor

@cocreate/tui-image-editor

1.9.2

A simple tui-image-editor component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.

fun-tui-image-editor

3.16.5

TOAST UI ImageEditor

tui-image-editor-teng

8.1.0

TOAST UI ImageEditor

Gathering detailed insights and metrics for tui-image-editor

tui-image-editor - 3.15.3 | npmpackage.info

tui-image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

3.15.3

7,370

MIT

JavaScript

3.50 MB

2.8

Installations

npm install tui-image-editor

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

15.14.0

NPM Version

7.7.6 Score

77.4

Supply Chain

92.8

Quality

Maintenance

Vulnerability

94.6

License

Pull Requests

Open

20

Total

253

Closed

68

Merged

165

Issues

Open

260

Total

689

Closed

429

Releases

v3.15.3

Updated on Apr 25, 2022

v3.15.2

Updated on Oct 20, 2021

v3.15.1

Updated on Oct 20, 2021

v3.15.0

Updated on Jul 28, 2021

v3.14.3

Updated on Apr 08, 2021

v3.14.2

Updated on Mar 25, 2021

View All 38 releases

Languages

JavaScript

Stylus

HTML

TypeScript

CSS

Vue

JavaScript (90.1%)

Stylus (4.44%)

HTML (3.38%)

TypeScript (0.97%)

CSS (0.79%)

Vue (0.33%)

Developer

nhn

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

7,370 Stars

659 Commits

1,341 Forks

103 Watchers

37 Branches

34 Contributors

Updated on Jul 16, 2025

Maintainers

View All 34 Contributors

Package Meta Information

Latest Version

3.15.3

Package Id

tui-image-editor@3.15.3

Unpacked Size

3.50 MB

Size

742.38 kB

File Count

374

NPM Version

7.7.6

Node Version

15.14.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

fabric tui-code-snippet tui-color-picker

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters.

🚩 Table of Contents

Collect statistics on the use of open source
Install
Usage

Collect statistics on the use of open source

TOAST UI ImageEditor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI ImageEditor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics option when creating the instance.

1const options = {
2  //...
3  usageStatistics: false,
4};
5
6const imageEditor = new tui.ImageEditor('#tui-image-editor-container', options);

Or, include tui-code-snippet(v1.4.0 or later) and then immediately write the options as follows:

1tui.usageStatistics = false;

💾 Install

The TOAST UI products can be installed by using the package manager or downloading the source directly. However, we highly recommend using the package manager.

Via Package Manager

You can find TOAST UI products via npm and bower package managers. Install by using the commands provided by each package manager. When using npm, be sure Node.js is installed in the environment.

npm

1. ImageEditor installation

1$ npm install --save tui-image-editor # Latest version
2$ npm install --save tui-image-editor@<version> # Specific version

2. If the installation of the `fabric.js` dependency module does not go smoothly

To solve the problem, you need to refer to Some Steps to solve the problem.

bower

1$ bower install tui-image-editor # Latest version
2$ bower install tui-image-editor#<tag> # Specific version

Via Contents Delivery Network (CDN)

TOAST UI products are available over the CDN powered by NHN Cloud.

You can use the CDN as below.

1<link
2  rel="stylesheet"
3  href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"
4/>
5<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>

If you want to use a specific version, use the tag name instead of latest in the URL.

The CDN directory has the following structure.

tui-image-editor/
├─ latest/
│  ├─ tui-image-editor.js
│  ├─ tui-image-editor.min.js
│  └─ tui-image-editor.css
├─ v3.1.0/
│  ├─ ...

Download Source Files

🔨 Usage

HTML

Add the container element where TOAST UI ImageEditor will be created.

1<body>
2  ...
3  <div id="tui-image-editor"></div>
4  ...
5</body>

javascript

Add dependencies & initialize ImageEditor class with given element to make an image editor.

1const ImageEditor = require('tui-image-editor');
2const FileSaver = require('file-saver'); //to download edited image to local. Use after npm install file-saver
3const blackTheme = require('./js/theme/black-theme.js');
4const locale_ru_RU = {
5  // override default English locale to your custom
6  Crop: 'Обзрезать',
7  'Delete-all': 'Удалить всё',
8  // etc...
9};
10const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
11  includeUI: {
12    loadImage: {
13      path: 'img/sampleImage.jpg',
14      name: 'SampleImage',
15    },
16    locale: locale_ru_RU,
17    theme: blackTheme, // or whiteTheme
18    initMenu: 'filter',
19    menuBarPosition: 'bottom',
20  },
21  cssMaxWidth: 700,
22  cssMaxHeight: 500,
23  selectionStyle: {
24    cornerSize: 20,
25    rotatingPointOffset: 70,
26  },
27});

1const ImageEditor = require('tui-image-editor');
2const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
3  cssMaxWidth: 700,
4  cssMaxHeight: 500,
5  selectionStyle: {
6    cornerSize: 20,
7    rotatingPointOffset: 70,
8  },
9});

Menu svg icon setting

There are two ways to set icons.

Use default svg built into imageEditor without setting svg file path (Features added since version v3.9.0).
There is a way to use the actual physical svg file and set the file location manually.

Can find more details in this document.

TypeScript

If you use TypeScript, You must import module = require('module') on importing. export = and import = require()

1import ImageEditor = require('tui-image-editor');
2const FileSaver = require('file-saver'); //to download edited image to local. Use after npm install file-saver
3
4const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
5  cssMaxWidth: 700,
6  cssMaxHeight: 500,
7  selectionStyle: {
8    cornerSize: 20,
9    rotatingPointOffset: 70,
10  },
11});

See details for additional information.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/detectRuntimeError.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/detectRuntimeError.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/detectRuntimeError.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/detectRuntimeError.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:106: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:141: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:86: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/publish-wrapper.yml:34
Warn: npmCommand not pinned by hash: .github/workflows/publish-wrapper.yml:42
Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 8 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

97 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-vp56-6g26-6827
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

2.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to tui-image-editor

Other packages similar to tui-image-editor

tui-image-editor

Installations

Developer Guide

No

CommonJS

15.14.0

7.7.6

Score

Pull Requests

20

253

68

165

Issues

260

689

429

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

🚩 Table of Contents

Collect statistics on the use of open source

💾 Install

Via Package Manager

npm

1. ImageEditor installation

2. If the installation of the fabric.js dependency module does not go smoothly

bower

Via Contents Delivery Network (CDN)

Download Source Files

🔨 Usage

HTML

javascript

Menu svg icon setting

There are two ways to set icons.

TypeScript

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10

2. If the installation of the `fabric.js` dependency module does not go smoothly