Introduction

CustomForge is a browser library for building product customization experiences that connect a 2D design canvas to a live 3D product preview

Users can add text, logos, backgrounds, and decorative images on the design canvas while CustomForge maps the composed texture onto a UV-mapped 3D model in real time

Current release

0.1.0 is the first non-prerelease CustomForge version

Public APIs follow semantic versioning. Design JSON version 1 documents remain readable throughout the 0.1.x line

How it works

flowchart LR
    A[Text and images] --> B[2D design canvas]
    C[Optional base texture] --> B
    B --> D[Live canvas texture]
    E[UV-mapped GLB or GLTF] --> F[3D product]
    D --> F
    F --> G[Interactive preview]

The model already contains the UV coordinates that describe how points on the flat texture correspond to points on the 3D surface

CustomForge updates the texture, not the geometry, so a prepared UV-mapped model is the key product asset

Choose an integration layer

CustomForge provides two public entry points

Entry	Best for	What you build
customforge/workbench	Getting started quickly or embedding a complete editor	Product data, configuration, and surrounding application flow
customforge	Building a fully custom interface	All buttons, panels, dialogs, and application layout

Start with the Workbench unless your product already has a dedicated design system or a highly specific editing workflow

Both entry points use the same ProductCustomizer engine and produce the same Design JSON format

What is included

• A Fabric.js based 2D design surface
• A Three.js based GLB and GLTF product viewer
• Real-time canvas-to-texture synchronization
• Text and image objects with selection, transform controls, and rich text formatting
• Layer naming, visibility, locking, ordering, and deletion
• Undo and redo history
• Design JSON save and restore
• Composed texture export as PNG
• A configurable Workbench with branding, theme, labels, feature switches, and asset presets
• A bundled GLB cup with separate MugBody and printable PrintArea meshes for development without external assets

Current scope

The current release focuses on one logical design canvas mapped to one named Mesh and its first material slot

The following areas are not implemented yet

• Multiple independently editable product surfaces
• Compressed GLTF extensions that require additional decoders
• Advanced alignment, snapping, and print bleed tools
• Official Vue, React, or other framework adapters

CustomForge itself is framework-agnostic and can be mounted from any framework after the target DOM elements are available

Next steps

• Install CustomForge
• Build your first Workbench
• Prepare product assets