Export & Import

Paint Forge supports multiple export formats, clipboard operations, image import via drag-and-drop, and automatic local and cloud saving. This page covers all the ways to get your work in and out of the editor.

Export Formats

Open the Export dialog from File > Export or the command palette. The available formats cover both raster and vector output.

Need to bundle every static format at once? The Export dialog has an Export All Formats button that zips PNG, JPEG, WebP, AVIF, and SVG into a single {filename}-all-formats.zip download.

Export Options

The Export dialog provides several controls for fine-tuning the output.

• Quality slider (0-100) for lossy formats (JPEG, WebP, AVIF). Higher values produce larger files with less compression.
• Export scale: preset buttons for 0.5×, 1×, 2×, and 4×, plus a custom scale input accepting values from 0.1× to 10×.
• DPI metadata is displayed for reference (cosmetic only — does not affect pixel dimensions).
• Live file size preview updates in real time as you adjust format, quality, and scale.
• A warning is shown when the estimated file size or canvas dimension exceeds browser limits.
• Export is always rendered at 0° rotation regardless of the current view rotation.

Export Presets

Save frequently used export configurations as named presets so you can apply them with a single click.

• Each preset stores the format, quality, and scale settings.
• Load a saved preset from the preset bar at the top of the Export dialog.
• Up to 5 custom export presets can be saved (stored in localStorage).
• Default export settings (format, quality, scale) can be configured in File → Preferences under Export Defaults.

Batch Export

Batch Export lets you export individual layers or objects as separate image files, packaged into a single ZIP download. Open it from File > Batch Export or the command palette.

• Choose to export layers, objects, or both as individual files.
• Naming templates support tokens: {name}, {type}, {#}, {##}, {###}, {layer} for flexible file naming.
• Output is packaged as a ZIP archive via JSZip and downloaded automatically.
• Two-phase progress indicator: first the individual items are exported, then the ZIP is compressed.
• Per-item error handling — if a single item fails, the rest continue and a warning lists the failed items.

Animation Export

Paint Forge offers three separate animation export pipelines, each tuned for a different use case.

Timeline-driven export (File > Export Animation)

The unified Animation Export dialog renders every frame through the full timeline — interpolated keyframes, frame-group cels, motion paths, parent-child rigging, audio (where applicable) — and encodes the result in one of six formats.

Motion blur

Every timeline format except Sprite Sheet supports optional motion blur via over-sampling. The encoder renders multiple sub-frames inside each frame's shutter window and averages them, producing cinematic streaks on fast-moving objects.

• Samples — 1 (off), 2, 4, or 8 renders per final frame. More samples = smoother blur + longer export time.
• Shutter angle — 0° to 360°, default 180°. Controls how much of each frame interval the shutter is open; 180° is the cinematic default, 360° blurs across the entire interval.
• Shutter window math: shutter_ms = (angle / 360) × frame_delay_ms. At 24 fps + 180°, that's ~20.8 ms of per-frame integration.
• Scope — applies only to keyframe-driven motion. Frame-group cels still snap to their thumbnails (motion blur across cels would smear hand-drawn frames).

Layer-sequence GIF (File > Export as GIF)

The older layer-per-frame GIF export is still available for flipbook workflows where each layer represents one frame (and no timeline is involved). Configurable from File > Export as GIF or the command palette.

• Select which layers to include and reorder them to define the frame sequence.
• Frame delay is configurable from 20 ms to 2000 ms per frame (also shown as FPS).
• Loop mode: infinite, play once, or a custom loop count.
• Scale presets: 0.5×, 1×, or 2×.
• Background color toggle — include the canvas background or export with transparency.
• Up to 100 frames maximum; maximum dimension 2048 px.
• Uses the gifenc library with 256-color quantization per frame.
• A progress indicator tracks the export; heavy GIFs yield to the UI between frames for responsiveness.

Lottie JSON (Bodymovin v5.7.1)

The Lottie button in the Animation panel's transport bar emits a Bodymovin-compatible JSON file that plays inside any Lottie runtime (web, iOS, Android, React Native).

• Supported object types: rect, ellipse, polygon, star, line, path, textonpath, image.
• Supported animated properties: position (left+top merged into center-anchored p), rotation (angle → r), scale (scaleX/Y → s as percent), opacity (o as percent), fill color (solid + gradient fl.c).
• Easings translate to Lottie's in/out cubic-bezier tangents; named easings map to standard CSS curves, bounce/spring collapse to ease-in-out.
• Unsupported surfaces (text objects, effects, patterns, frame groups, motion paths, audio, adjustment layers, path-data morphing) trigger a toast warning listing what was skipped; everything else exports cleanly.

CSS @keyframes (command palette only)

For web hand-off where you want pure CSS animations — no runtime, no JSON — use Command palette → Export as CSS @keyframes. Emits a stylesheet with one @keyframes block per animated object plus a .pf-obj-* class selector that applies it.

• Transforms: left/top → translate(), angle → rotate(), scale → scale(). Opacity and background-color also covered for solid fills.
• Per-segment easings become animation-timing-function entries per step.
• Configurable prefix, iteration count (including infinite), and total duration override.
• Unsupported properties (text-internal, gradient stops, path-data, effects) are silently skipped — the exporter prints warnings on stderr and as a toast.

Slice & Sprite-Sheet Export

For UI and game-asset workflows, define named slices (rectangular export regions) and export them individually or as packed atlases. Slices export to individual files (PNG/JPEG/WebP/SVG/PDF) at multiple scales via export ladders, a packed sprite sheet (CSS atlas + optional TexturePacker-compatible JSON, or an SVG<symbol> sprite), a W3C Design Tokens JSON, a per-slice animated export (GIF/APNG/WebM/MP4/Lottie), or a multi-page spec sheet PDF. This is separate from the timeline sprite-sheet above (which tiles animation frames). See the Slices & Asset Export page for the full workflow.

Clipboard Operations

Paint Forge supports a full set of copy, paste, and cut operations for objects, pixel data, styles, and adjustment configurations.

Import

Images can be added to the canvas by dragging files directly onto the editor or by using the Upload Image dialog (File > Upload Image).

• Drag-and-drop images directly onto the canvas. The drop position is converted to scene coordinates and the image is placed at that location.
• Upload Image dialog provides a file picker with drag-and-drop support and validation feedback.
• Supported image types include PNG, JPEG, WebP, SVG, GIF, BMP, and other standard formats.
• SVG files are sanitized via DOMPurify before insertion to prevent XSS and other security risks. Dangerous attributes like xlink:href, href, action, and formaction are stripped.
• File signature validation checks magic bytes at the start of each file to verify the actual file type matches the declared MIME type.
• File size limits are enforced to prevent browser memory issues with excessively large images.

Animation imports

Three command-palette imports turn external animation files into an editable frame group that you can retouch, rotoscope over, or re-export.

Canvas Commands

Several canvas-level commands are available from the Image menu and the command palette:

• Export Active Layer — exports just the active layer as a standalone image file via the Export dialog (single-layer export mode).
• Duplicate Project — creates an independent copy of the current cloud project under a new name.
• Clear Canvas — clears all raster pixel data on the active layer without removing the layer itself.
• Apply Filters to Visible Layers (canvas:batchfilter) — destructively applies the current filter/adjustment settings to all visible non-adjustment, non-group layers in one operation. Requires confirmation.

Saving

Paint Forge uses a multi-layered saving strategy that combines local auto-save, cloud persistence, and session backups to protect your work.

• Local Auto-Save runs every 10 seconds (configurable in Preferences), writing the full project state to localStorage.
• Cloud Save runs every 30 seconds for signed-in users, persisting the project to Supabase (PostgreSQL + Storage).
• Snapshots are created automatically when a project is loaded from the cloud, before destructive operations, and manually via File → Snapshots. Up to 20 snapshots per project are stored in the database.
• Multi-Tab Sync: when one tab saves to localStorage, a BroadcastChannel message notifies other open tabs. A toast with a Reload button appears so you can pull in the latest changes.
• Manual Save: press Ctrl+S or use File → Save to trigger an immediate save (local + cloud if signed in).
• An asterisk (*) appears in the browser tab title when unsaved changes exist, so you can tell at a glance whether the project is dirty.
• The browser's beforeunload prompt fires when you try to close or navigate away from a tab with unsaved changes.
• If you close the editor with unsaved changes, Paint Forge detects the auto-save on next visit and offers to restore the unsaved project via the Restore Project dialog.