https://github.com/swimmingkiim/react-image-editor

React + Konva / image editor / like Figma or Canva
https://github.com/swimmingkiim/react-image-editor

canva canvas editor figma image konva react tool

Last synced: 29 days ago
JSON representation

React + Konva / image editor / like Figma or Canva

• Host: GitHub
• URL: https://github.com/swimmingkiim/react-image-editor
• Owner: swimmingkiim
• License: mit
• Created: 2022-07-09T07:55:14.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-26T22:26:51.000Z (6 months ago)
• Last Synced: 2024-09-29T05:42:53.303Z (about 1 month ago)
• Topics: canva, canvas, editor, figma, image, konva, react, tool
• Language: HTML
• Homepage: https://swimmingkiim.github.io/react-image-editor
• Size: 15.2 MB
• Stars: 355
• Watchers: 7
• Forks: 64
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Image Editor

![Live Screenshot](https://github.com/swimmingkiim/react-image-editor/blob/main/screenshots/screenshot-1.png?raw=true)

## How to Run Project

```bash

npm i

npm run dev

```

## How to Serve

```bash

npm run build

npm run preview

```

## Features

- Data

  - history (undo, redo)

  - copy, paste, duplicate

- Color

  - apply color picker

  - save & reload color list to localStorage

- Tab

  - create tab

  - delete tab

  - change canvas data by changing tab

- Frame

  - drag & drop

  - move

  - resize

- Export

  - export all frame

  - export selected frame

- EditableObject

  - Common

    - create by drag & drop

    - update

    - read

    - delete

    - change background color

    - move

    - resize

    - rotation

    - opacity

  - Image

    - import image

    - brightness

    - filter

  - Shape

  - Icon

    - from bootstrap

    - search icon

  - Text

    - create text

    - edit text

    - change color

    - text align

    - remove text

If react-image-editor doesn't cover your needs I recommend taking a look at [Pintura](https://pqina.nl/pintura/?ref=react-image-editor)

Pintura features cropping, rotating, flipping, filtering, annotating, and lots of additional functionality to cover all your image and video editing needs on both mobile and desktop devices.

[](https://pqina.nl/pintura/react-image-editor/?ref=react-image-editor)

[Learn more about Pintura Image Editor](https://pqina.nl/pintura/react-image-editor/?ref=react-image-editor)

# Support Me!