https://github.com/iolo/redraw
Lightweight MSPaint-style drawing for React.
https://github.com/iolo/redraw
Last synced: 7 days ago
JSON representation
Lightweight MSPaint-style drawing for React.
- Host: GitHub
- URL: https://github.com/iolo/redraw
- Owner: iolo
- License: mit
- Created: 2026-05-11T05:36:22.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-11T15:10:30.000Z (about 1 month ago)
- Last Synced: 2026-05-11T16:31:19.678Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://iolo.kr/redraw/
- Size: 190 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# redraw
Redraw is an MSPaint-like drawing component for React. It provides a simple interface for drawing on a canvas, and it supports loading and saving the drawing as a data URL.
[](https://mcescher.com/gallery/back-in-holland/#iLightbox[gallery_image_1]/31)
## Getting Started
Install dependency:
```console
$ npm install @iolo/redraw
```
Import and use the component:
```jsx
import { Redraw } from '@iolo/redraw';
function App() {
return ( console.log(dataUrl)} />);
}
```
That's it! You can now draw on the canvas and save your drawing as a data URL.
You can use `useRef` to get the reference of the Redraw component and call its methods to manipulate the drawing
programmatically.
```jsx
import { useRef } from 'react';
import { Redraw, RedrawRef, loadImage, saveImage } from '@iolo/redraw';
function App() {
const redrawRef = useRef(null);
const handleSave = () => {
if (redrawRef.current) {
const dataUrl = redrawRef.current.getDataUrl(); // get the drawing as data URL
saveImage(dataUrl, 'drawing.png'); // download(save on local) the image as file
}
};
const handleOpen = async (event) => {
const file = event.target.files[0];
const dataUrl = await loadImage(file); // load the image file as data URL
redrawRef.current?.setDataUrl(dataUrl); // load the data URL into Redraw
};
return (
<>
Save
>
);
}
```
## Features
- Pen, Spray, Eraser, Spoid(Picker), Fill, Line, Rectangle, Circle(Ellipse) tools
- Paint-style layout: tools at top-left, controls below tools, drawing area on the right, colors at bottom-left, and palette at bottom-right
- SVG-based tool and action icons styled with CSS
- Stroke width control
- Shared 32-color palette for stroke and fill
- Current stroke/fill previews with swap action
- Custom color dialog with RGBA sliders and HEX input
- Background color property support
- Undo/Redo
- Load/Save drawing as data URL
- Utilities for manipulating/loading/saving images
## Tech Stack
### Frontend
- [typescript](https://www.typescriptlang.org/)
- [react](https://reactjs.org/) - UI library
### Testing
- [vitest](https://vitest.dev/) - Unit testing
- [playwright](https://playwright.dev/) - E2E testing
### Build
- [vite](https://vitejs.dev/)
## Guidelines
- Keep it simple and minimal.
---
May the **SOURCE** be with you!