A React Paint Editor for SVGs and Bitmaps (Core Engine of VectorArtGen)

Chynna He — Fri, 24 Jul 2026 03:33:03 +0000

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

DEV Community: Chynna He

A React Paint Editor for SVGs and Bitmaps (Core Engine of VectorArtGen)

The Problem it Solves

Features

Getting Started