Open Source Image Editor

Powerful Image Editing for Modern Web & Mobile Apps

A lightweight, framework-agnostic image editor for cropping, drawing, annotations, shapes, text, filters and more.

Try Live Demo Get Started

npm install @rageshpikalmunde/rp-image-editor

MIT License TypeScript Open Source

Built for modern web applications

Angular React Ionic Vue JavaScript TypeScript Capacitor Mobile Web

Interactive Demo

Try the Editor

Upload an image and experience the editor directly in your browser.

Interactive Demo

Ready. Open the sample image or upload your own files.

Theme

Default sample image preview. Click "Try with sample image" to open the editor.

Use this in your app: Get Started

Core Features

Everything you need to edit and annotate images

Powerful tools for cropping, drawing, shapes, callouts and more.

Crop

Refine framing with responsive handles and precise crop guides for profile photos, banners, and product visuals.

Learn more

Draw

Highlight exactly what matters using smooth freehand strokes in configurable colors and brush widths.

Learn more

Shapes

Add rectangles, circles, and lines with controlled fill and border settings that stay crisp on export.

Learn more

Callouts

Direct attention with annotation bubbles and pointers that make reviews, tutorials, and bug reports clear at a glance.

Learn more

Text

Layer labels and notes with adjustable font size and color for easy communication.

Eraser

Remove unwanted strokes quickly to correct details without resetting your progress.

Undo / Redo

Step backward or forward through edits with predictable history controls.

Save in Multiple Formats

Export final images as PNG, JPEG, or WebP for every delivery channel.

Theme Customization

Match your product with light and dark themes plus configurable color tokens.

Multilingual Support

Deliver a localized editor experience with built-in language packs.

Modal + Embedded Modes

Launch as a popup for quick tasks or mount inline for persistent editing flows.

Responsive Layout

Maintain usability across desktop and mobile viewports without custom wrappers.

And that's only the beginning.

See annotation in action →

Image Annotation

Annotate images like a pro

Highlight problems, explain designs, mark screenshots and communicate visually with drawing, shapes, text and callouts.

Original

Annotated

Label Review this edge

✏ Draw ◯ Shapes ↗ Callouts T Text ⌫ Eraser

From screenshots to technical workflows, turn images into actionable visual information.

Why rp-image-editor

Built for teams shipping image features

Built for real image workflows

From first upload to final export, rp-image-editor keeps every essential step in one consistent interface.

Open Source / MIT

MIT-licensed package with public source and contribution-friendly workflows.

Powerful Annotation

Combine draw, shapes, callouts, text, and erasing in one editor session.

Mobile Ready

Touch-friendly interactions support practical image editing on mobile web.

Customizable

Theme tokens, labels, export settings, and tool controls adapt to your product.

Why choose rp-image-editor?

Basic croppers handle framing. rp-image-editor gives your users a complete browser workflow for review, markup, and export without switching tools.

Crop Draw Shapes Callouts Text Mobile Export

Platform Support

Built for your stack

Package documentation references support for these modern web and mobile environments.

Framework and platform compatibility

Use the core package directly or integrate with wrappers where available.

JavaScript TypeScript React Angular Vue Ionic Capacitor Mobile Web

Developer Experience

Get started in minutes

Install the package and open the editor with the documented API.

npm install @rageshpikalmunde/rp-image-editor

Developer workspace examples

import { openEditorModal } from '@rageshpikalmunde/rp-image-editor';

const fileInput = document.querySelector('#fileInput');

fileInput.addEventListener('change', async (event) => {
  const file = event.target.files?.[0];
  if (!file) return;

  const result = await openEditorModal({
    image: file,
    config: {
      exportFormat: 'jpeg',
      exportQuality: 0.92
    }
  });

  if (result) {
    console.log(result.file);
    console.log(result.base64);
  }
});

import { openEditorModal } from '@rageshpikalmunde/rp-image-editor';

function ImageUploader() {
  const handleFile = async (event) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const result = await openEditorModal({
      image: file,
      config: { exportFormat: 'jpeg' }
    });

    if (result) {
      console.log(result.file);
    }
  };

  return <input type="file" accept="image/*" onChange={handleFile} />;
}

import { openEditorModal } from '@rageshpikalmunde/rp-image-editor';

async function onFileSelected(file: File) {
  const result = await openEditorModal({
    image: file,
    config: { exportFormat: 'jpeg', exportQuality: 0.92 }
  });

  if (result) {
    console.log(result.file);
  }
}

View on GitHub View on NPM

Use Cases

Where teams use rp-image-editor

Document

Document Annotation

Mark up uploaded documents and snapshots before sharing or saving.

Screenshot

Screenshot Markup

Add arrows, labels, and highlights for product feedback and bug reporting.

Workflow

Image Upload Workflow

Allow users to adjust and annotate images before final upload.

Mobile

Mobile Editing

Enable in-browser touch-friendly editing flows for mobile web applications.

Product Workflow

Upload

Select or drop source images.

Crop

Frame content and normalize dimensions.

Annotate

Draw, shape, text, and callout overlays.

Customize

Apply filters and tuned theme settings.

Export

Return output as File, Blob, or Base64.

Open Source

Built in the open

Explore the source, report issues, suggest improvements, or contribute to rp-image-editor.

View on GitHub View on NPM

FAQ

Common questions

What frameworks can I use with rp-image-editor?

The package is framework-agnostic and documentation references JavaScript, React, Angular, Vue, Ionic, and Capacitor usage.

Is rp-image-editor free?

Yes. The package is available on npm and released under the MIT license.

Is it open source?

Yes. The source code and issue tracker are available on GitHub.

Does it work on mobile?

The editor supports touch interactions, including pinch zoom and drag behavior for mobile workflows.

Can I customize the editor?

Yes. Theme colors and several behavior options are configurable through the editor config.

How do I install it?

Run npm install @rageshpikalmunde/rp-image-editor and then call openEditorModal with an image file.

Where can I find documentation?

Use the package README in the GitHub repository for setup details and API examples.

Ready to add image editing to your application?

Try the live demo, then integrate using the same API shown in this page.

Try Live Demo Get Started