Documentation

Complete reference for ImageCraft — a professional AI-powered browser image editor built on Fabric.js.

Introduction

ImageCraft is a fully browser-based image editor requiring no server, no installation, and no plugins. Open index.html in any modern browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+) and you're ready to edit.

Installation

1. Unzip the downloaded package to any folder on your computer
2. Open imagecraft/index.html in any modern browser
3. Start editing — All tools and features are available immediately

That's it. No server, no database, no command line, no build tools. Everything runs in your browser.

For the best experience, serve the folder with any HTTP server (e.g. python -m http.server 8080) to ensure file loading works correctly. However, simply opening index.html directly works for most features.

Configuration

Customize ImageCraft by editing config.json in the root folder:

Importing Images

Three ways to add images to the canvas:

• File menu → Open Image — click to pick a file from disk
• Drag & Drop — drag any image file directly onto the canvas area
• Paste — copy an image to clipboard and press Ctrl+V

Supported formats: PNG, JPG, WEBP, GIF (static), SVG. Images are added as scalable Fabric.js objects preserving full quality.

Select Tool V

The default tool. Click any object to select it. Drag corners to resize; drag the rotate handle to rotate. Hold Shift to select multiple objects.

The Properties panel updates to show the selected object's position, size, opacity, and AI options.

Crop Tool C

Crops the entire canvas to a rectangular region. Click and drag to define the crop area, then press Enter or click Apply to confirm. Press Escape to cancel.

Draw Tool B

Freehand brush painting. Properties:

Color is set via the foreground color swatch in the bottom of the toolbar.

Eraser Tool E

Erases painted strokes. Uses the native EraserBrush from Fabric.js when available, falling back to a destination-out compositing path for full transparency.

Text Tool T

Click anywhere on the canvas to place an editable text block. Double-click existing text to edit inline. Properties include font family, size, weight, style, alignment, color, line height, and letter spacing.

Shapes Tool S

Click and drag to draw: Rectangle, Ellipse, Triangle, Line, Arrow, or Star. Fill color, stroke color, and stroke width are configurable. Hold Shift while dragging to constrain proportions.

Stickers Tool K

Browse 400+ emoji stickers across 9 categories: Smileys, Gestures, Nature, Animals, Food, Sports, Objects, Symbols, and Travel. Adjust size with the slider before clicking to place. Stickers are editable IText objects — resize, rotate, or double-click to change them.

Fill & Eyedropper G I

Fill (G): Click an object to fill it with the current foreground color. Click the canvas background to fill the canvas color.

Eyedropper (I): Click any pixel on the canvas to sample its color into the foreground swatch. Note: images loaded from external URLs may be blocked by CORS and prevent color sampling.

Blur & Sharpen

Paint-on pixel effects using a brush:

• Blur: Applies a box-blur algorithm under the brush. Adjust brush size and blur strength.
• Sharpen: Applies an unsharp mask convolution. Useful for recovering fine details.

Vignette

Adds a radial gradient darkening overlay. Configure amount (opacity), softness (gradient radius), and vignette color. Click Apply to bake it as a canvas layer, or Remove to clear it.

Layers Panel

Every object on the canvas appears as a layer. Layers are listed top-to-bottom matching the canvas stacking order.

Filters & Adjustments

Select an image object, then expand Filters & Adjustments in the Properties panel.

Preset Filters: Vivid, Matte, B&W, Vintage, Cool, Warm — one-click LUT-style filters.

Manual Adjustments:

AI Tools Toolbar

Four AI-powered tools are available from the purple AI button in the toolbar:

Select an image layer first, then click the AI button and choose your tool. A status bar appears at the bottom of the screen during processing.

AI Background Removal

Select any image object, then click Remove BG in the AI flyout or find it in the Properties panel. The AI model (@imgly/background-removal) runs fully on-device via WebAssembly and ONNX Runtime. The first run downloads the model (~30MB, cached after).

Export

Click the Export button in the topbar or press Ctrl+Shift+E.

Scale multiplier lets you export at 1×, 2×, or 3× the canvas resolution. Grid lines and system overlays are automatically hidden during export.

Save Project: Ctrl+S saves the canvas as a .json file. Load it back via File → Open Project.

Keyboard Shortcuts