日本語

A free, browser-based WYSIWYG manga panel layout editor. Create panel layouts by clicking and dragging -- no software installation needed.

Features

• Click & Drag to create rectangular panels on canvas
• 15+ Templates -- 4-koma, shonen 6-panel, webtoon strip, splash pages, asymmetric layouts
• Page Presets -- B5, A4, A5, Webtoon, US Comic sizes
• Border Customization -- thickness, color, corner radius
• Gutter Control -- adjustable spacing between panels
• Image Import -- drag images into panels with auto-clip
• Export -- PNG (2x), SVG, PDF
• Save/Load -- JSON project files + auto-save to localStorage
• Undo/Redo -- 50-step history stack
• Keyboard Shortcuts -- Ctrl+Z/Y, Delete, Ctrl+S

Quick Start

# Clone
git clone https://github.com/izag8216/wakuwaku.git
cd wakuwaku

# Open in browser (any of these)
open index.html                    # macOS
xdg-open index.html                # Linux
start index.html                   # Windows

# Or serve locally
npx serve .

No build step. No dependencies to install. Just open index.html.

Usage

1. Create panels -- Click and drag on the canvas to draw rectangles
2. Move/Resize -- Click a panel to select, then drag to move or use corner handles
3. Delete -- Select a panel, press Delete or Backspace
4. Apply template -- Choose from the dropdown and click "Apply"
5. Import images -- Select a panel, click "Import", choose an image file
6. Export -- Click PNG, SVG, or PDF to download
7. Save/Load -- Save as JSON project file; auto-saves every 30 seconds

Keyboard Shortcuts

Key	Action
Ctrl+Z	Undo
Ctrl+Y	Redo
Delete / Backspace	Delete selected panel
Ctrl+S	Save project

Tech Stack

• Fabric.js v5.x -- Canvas object model
• jsPDF -- PDF export
• Native Canvas API -- PNG export
• Zero build step, zero dependencies

Project Structure

wakuwaku/
  index.html          Single-file SPA entry point
  src/
    app.js            Main application controller
    canvas.js         Fabric.js canvas setup + events
    panel.js          Panel model (create, resize, border)
    page.js           Page model (size presets, bleed)
    templates.js      16 layout templates
    exporter.js       PNG/SVG/PDF export
    storage.js        Save/load project JSON
    toolbar.js        UI controls
  tests/
    panel.test.js
    page.test.js
    templates.test.js
    exporter.test.js
    integration.test.js

Development

# Install test dependencies
npm install

# Run tests
npm test

# Run with coverage
npm test -- --coverage

License

MIT License -- see LICENSE for details.

Third-party licenses: THIRD_PARTY_LICENSES.md