A React Paint Editor for SVGs and Bitmaps (Core Engine of VectorArtGen)
Hi everyone! I want to share a project I've been working on: svg-editor, a React-based paint editor component that handles both SVG vector paths and bitmap graphics. This library serves as the core editing workspace for VectorArtGen — an AI tool that converts text prompts into scalable SVG artwork. Most web-based editors force you to choose: either you are editing vector paths (like Figma/Illustrator), or you are painting pixels on a canvas (like MS Paint/Photoshop). When working with AI-generat
Hi everyone! I want to share a project I've been working on: svg-editor, a React-based paint editor component that handles both SVG vector paths and bitmap graphics.
This library serves as the core editing workspace for VectorArtGen — an AI tool that converts text prompts into scalable SVG artwork.
The Problem it Solves
Most web-based editors force you to choose: either you are editing vector paths (like Figma/Illustrator), or you are painting pixels on a canvas (like MS Paint/Photoshop).
When working with AI-generated designs, you often get a mix of both. You might want to brush over some pixels, erase a small artifact, or reshape a vector path to make a logo perfect.
svg-editor provides a React component that bridges this gap, allowing seamless switching between vector and bitmap modes while importing and exporting clean SVG or PNG data.
Features
- Vector Mode — Path editing, pen tools, text styling, and shape tools.
- Bitmap Mode — Brush, eraser, bucket fill, and pixel-level edits.
- Clean Output — Generates optimized SVG code and standard PNG exports.
- State Management — Built-in undo/redo stack, layer ordering, and camera zoom controls.
Getting Started
You can install the package directly from npm:
bash
npm install @chynna/svg-editor
Enter fullscreen mode Exit fullscreen mode
