Building a Manga Editor in the Browser: Canvas, Panels, and Speech Bubbles

Building a browser-based manga editor sounded crazy. Turns out, it was only mostly crazy. Here's how I did it for TaleForge.

Why Build This?

Manga creators have limited tooling options. Professional tools like Clip Studio Paint are expensive and desktop-only. Free alternatives are either too simple or too complex. I wanted something in between — a browser-based editor that handles the unique layout challenges of manga and webtoons.

The Panel System

Manga pages are grids of panels, but not regular grids. Panels overlap, bleed to the edge, vary wildly in size and shape. The first challenge was representing this flexibility.

I went with a template-based approach. Instead of freeform panel drawing (which is powerful but overwhelming for beginners), I offer layout templates:

• Standard grid (2×2, 3×2, etc.)
• Vertical strips (for webtoons)
• L-shaped panels
• Diagonal splits
• Full bleed (single panel)

Each template defines panel positions as percentage-based coordinates, so they scale to any page size.

interface PanelLayout {
  id: string;
  name: string;
  panels: {
    x: number;      // % from left
    y: number;      // % from top  
    width: number;  // % of page width
    height: number; // % of page height
  }[];
}

Speech Bubbles

Speech bubbles are positioned relative to their parent panel. Each bubble has:

• Position (x, y as percentages within the panel)
• Text content
• Style (speech, thought, shout, whisper, narrator)
• Tail direction (pointing to the speaker)

The tricky part was making bubbles draggable within panels while keeping them responsive. I used CSS transforms for positioning and pointer-events management to handle the layering between panels and bubbles.

The Webtoon Format

Traditional manga is read right-to-left in pages. Webtoons are read top-to-bottom in a continuous scroll — a completely different format.

Instead of pages with panel grids, webtoons use vertical sections. Each section is a horizontal strip that can contain an image. Sections are reorderable via drag-and-drop.

The reader component uses IntersectionObserver to:

1. Lazy-load images as they enter the viewport
2. Track reading progress (which section is currently visible)
3. Save the last-read position so readers can resume later

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // Load image
        const img = entry.target.querySelector('img[data-src]');
        if (img) {
          img.src = img.dataset.src;
        }
        // Track progress
        updateReadingProgress(entry.target.dataset.sectionIndex);
      }
    });
  },
  { rootMargin: '200px' } // Start loading 200px before visible
);

Page Management

A manga project has multiple pages (or episodes for webtoons). The thumbnail strip on the left shows all pages with miniature previews. You can:

• Add pages with a layout picker (click "+" and choose a template)
• Reorder pages via drag-and-drop
• Delete pages with confirmation
• Switch between pages instantly

The thumbnail strip was one of those "simple-looking" features that took way longer than expected. Generating accurate thumbnails of canvas content, keeping them in sync when panels change, and making the drag-and-drop feel right — each of these was its own rabbit hole.

Export

Manga pages export as:

• PNG/JPG per page (for individual sharing)
• PDF (for print-ready output with proper bleed)
• Webtoon PDF (continuous vertical format)
• ZIP (all pages bundled)

The PDF generation uses the page dimensions and panel coordinates to render at print resolution (300 DPI), not screen resolution.

What I Learned

1. Canvas is powerful but low-level. For complex interactive graphics, you end up building a mini rendering engine. Consider libraries like Fabric.js or Konva if starting from scratch.

2. Percentage-based coordinates are your friend. Pixels break when you resize. Percentages scale naturally.

3. The undo/redo system is critical. Creative tools without undo are unusable. Implement a command pattern early.

4. Mobile is a different world. Touch targets need to be 44px minimum. Pinch-to-zoom on canvas elements requires custom gesture handling. The manga editor works on tablets but I wouldn't recommend it on phones — the screen is just too small for panel editing.

Try It

The manga/webtoon editor is part of TaleForge (premium feature). If you're building something similar, I'm happy to discuss architecture decisions in the comments.

---

Part of the TaleForge creative writing platform by Dreams-Makers Studio