# nhn/tui.image-editor

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/nhn-tui-image-editor).**

7,652 stars · 1,378 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/nhn/tui.image-editor
- Homepage: http://ui.toast.com/tui-image-editor
- awesome-repositories: https://awesome-repositories.com/repository/nhn-tui-image-editor.md

## Topics

`canvas` `drawing` `filter` `image` `image-editor` `paint` `photo` `photoshop`

## Description

tui.image-editor is a JavaScript image manipulation library and web-based photo editor. It provides a browser-based interface for cropping, resizing, and applying filters to images using the HTML5 Canvas API.

The project is distinguished by its role as a canvas-based annotation tool, allowing users to add text, shapes, and freehand drawings as graphic overlays. It offers extensive UI customization through theme configuration, interface text localization, and the ability to replace default icons with custom SVG files.

The library covers geometry manipulation, visual filter application, and image import and export. It includes an action history system for undo and redo operations, as well as an event-driven bridge and programmatic controls for embedding the editor into web applications.

## Tags

### User Interface & Experience

- [Canvas-Based Annotation UIs](https://awesome-repositories.com/f/user-interface-experience/canvas-based-annotation-uis.md) — Provides a canvas-based interface for adding real-time drawings, shapes, and text overlays to images.
- [Image Manipulation Tools](https://awesome-repositories.com/f/user-interface-experience/ui-components/image-view-components/image-manipulation-tools.md) — Provides an embeddable set of tools for cropping, rotating, and filtering images within a web application.
- [Programmatic Manipulation Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-components/image-view-components/image-manipulation-tools/programmatic-manipulation-libraries.md) — Provides a programmable library for embedding image editing and canvas drawing capabilities into web apps.
- [Canvas-Based Image Editors](https://awesome-repositories.com/f/user-interface-experience/ui-components/image-view-components/image-manipulation-tools/raw-image-data-manipulators/canvas-based-image-editors.md) — Provides a high-performance image editing interface by manipulating pixels directly via the HTML5 Canvas API.
- [Spatial Geometry Manipulators](https://awesome-repositories.com/f/user-interface-experience/ui-components/image-view-components/image-manipulation-tools/spatial-geometry-manipulators.md) — Provides essential tools for cropping, resizing, and rotating images to adjust their composition and orientation. ([source](https://github.com/nhn/tui.image-editor/blob/master/README.md))
- [Customizable UI Components](https://awesome-repositories.com/f/user-interface-experience/customizable-ui-components.md) — Offers a highly customizable UI allowing for branded themes, localized text, and custom SVG iconography.
- [Dynamic Theming](https://awesome-repositories.com/f/user-interface-experience/dynamic-theming.md) — Allows for the dynamic application of visual styles and color schemes to the interface at runtime.
- [Programmatic Configuration Interfaces](https://awesome-repositories.com/f/user-interface-experience/interface-configuration-management/programmatic-configuration-interfaces.md) — Provides APIs to execute internal methods and manipulate the image state and interface programmatically. ([source](https://github.com/nhn/tui.image-editor/tree/master/apps/vue-image-editor))
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Provides capabilities for users to personalize the editor's appearance using built-in or custom color schemes. ([source](https://github.com/nhn/tui.image-editor))

### Graphics & Multimedia

- [Browser-Based Image Processing](https://awesome-repositories.com/f/graphics-multimedia/browser-based-image-processing.md) — Performs geometry changes and applies visual effects to image files directly within the browser.
- [Drawing Layers](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing/drawing-layers.md) — Manages text, shapes, and drawings as independent graphical layers rendered on top of the primary image.
- [Image Annotation Tools](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-annotation-tools.md) — Allows adding text, shapes, and freehand drawings as layered graphic overlays on top of images. ([source](https://github.com/nhn/tui.image-editor/blob/master/README.md))
- [Image Filters](https://awesome-repositories.com/f/graphics-multimedia/image-filters.md) — Provides visual effects including grayscale, blur, brightness adjustments, and color blending filters. ([source](https://github.com/nhn/tui.image-editor/blob/master/README.md))
- [Web-Based Photo Editors](https://awesome-repositories.com/f/graphics-multimedia/web-based-photo-editors.md) — Provides a complete client-side interface for image annotation, geometry adjustment, and visual effects.
- [Image Export Utilities](https://awesome-repositories.com/f/graphics-multimedia/image-export-utilities.md) — Supports loading image files for editing and exporting the final result as a downloadable file. ([source](https://github.com/nhn/tui.image-editor))

### Software Engineering & Architecture

- [Command Pattern Implementations](https://awesome-repositories.com/f/software-engineering-architecture/command-pattern-implementations.md) — Implements an architectural pattern to encapsulate image manipulations as reversible commands for undo and redo functionality.

### Web Development

- [Undo-Redo History](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history.md) — Maintains a history stack of image states to enable seamless undo and redo operations during editing.
- [Image Editor Embeddings](https://awesome-repositories.com/f/web-development/image-editor-embeddings.md) — Enables the integration of a configurable canvas-based photo manipulation tool directly into web applications. ([source](https://github.com/nhn/tui.image-editor/tree/master/apps/react-image-editor))