Getting Started

Iza Product Designer is a responsive browser-based product editor built with modern JavaScript, Fabric.js and CSS. It supports multiple products and views, editable image/SVG/text/shape layers, artwork libraries, color editing, curved text, snapping, rulers, history, saved designs, preview downloads and print-ready production exports.

The editor is configured from JavaScript while products and reusable content are described with JSON. Product assets are loaded relative to the product JSON file, allowing every product to live in its own portable folder.

Requirements

• A modern browser with Canvas, Promises, Fetch and the FontFace API.
• An HTTP/HTTPS web server. For development, run npm run dev.
• Correct CORS headers when JSON, fonts or images are hosted on another domain.
• Optimized PNG, JPG and SVG assets. Use JPG for photos, PNG for transparency and SVG for scalable artwork. Keep files compressed but large enough for sharp production output; oversized images and complex SVGs increase memory usage and slow loading and exports.

Choosing the right image format

The best format depends on whether the asset needs editable colors, transparent areas, photographic detail or unlimited scaling. Selecting the appropriate format keeps the editor responsive and produces cleaner preview and production files.

SVG recommendations

• Use actual vector paths with explicit fill colors. Avoid embedding PNG or JPG files inside the SVG.
• Use fill for a single-color SVG and svgFill when individual SVG fill groups need separate controls.
• Simplify excessive path points and remove unused metadata before publishing the asset.

PNG and JPG recommendations

• Use PNG when transparent pixels or soft alpha edges are required; use JPG for opaque photographic content.
• Size raster files for the largest expected production output. Enlarging a small source cannot recreate missing image detail.
• Avoid unnecessarily large pixel dimensions. Large textures consume more browser memory and can slow loading, editing and export.

Prepare SVG and PNG Assets

Prepare product assets so their editable colors, photographic details and transparent areas work together correctly in Iza Product Designer. The video below demonstrates the complete SVG and PNG workflow, including creating a realistic shading overlay in Photoshop.

• SVG with shading: use SVG layers for editable product colors and place a transparent PNG shading overlay above them to preserve highlights, shadows, folds and texture.
• SVG without shading: use clean vector artwork when photographic texture and lighting are not required.
• Simple PNG: use a transparent raster image when the product does not require separate editable SVG regions.

Installation

Use the included start.html file as the integration reference. Copy the src, content and products folders next to your HTML file, preserving their internal structure and relative paths.

Include the global stylesheet first, followed by the compiled product designer script:

<head>
    <link rel="stylesheet" href="content/global.css" type="text/css">
    <script type="text/javascript" src="src/FWDIPD.js"></script>
</head>

Add the holder element where the designer should appear. Its ID must match the parent setting:

<body>
    <div id="myDiv"></div>
</body>

Initialization

Initialize after the document is ready, as shown in start.html. The compiled script exposes the global FWDIPD class, so no module import is required.

if(document.readyState === 'complete'){
    fwdipdInit();
}else{
    document.addEventListener('DOMContentLoaded', function(){
        fwdipdInit();
    });
}

function fwdipdInit(){
    new FWDIPD({
    
        // Core: instance, product data, parent, main sizing.
        id: 'fwdipd0',
        product: ['./products/shirt/product.json', './products/cap/product.json'],
        prodcutIndex: 0,
        display: 'responsive',
        parent: 'myDiv',
        maxW: 1200,
        resizeW: 1000,
        maxH: 700,
        minH: 600,
        canvasW: 800, //600
        canvasH: 650,
        initVisible: false,
        unit: 'mm', // px, mm, cm, inch. Fallback when product JSON does not define a root unit.
        bleed: 3, // Default bleed in millimeters per edge. A view JSON value overrides it.
        rulerPosition: 'canvas', // canvas, printingBox. Around Printing Box requires a printing box in the view.
        rulerFixed: false, // If true, ruler starts visible and can still be hidden with the Ruler action.
        autoScale: true,
        currency: '$',
        bg: '#f6f6f6',
        toggleSnapToCenter: true,
        snapColor: '#3858e9',
        snapThreshold: 8,
    
        // Bonding box for selected objects.
        boundingBoxMode: ['clipping', 'Bounding Box'],
        boundingBoxColor: '#FF0000',
        showPrintingBox: true,
        boundingBoxEditable: true,
        boundingBoxInputs: true,
        boundingBoxInputsBg: 'rgba(255, 255, 255, .94)',
        boundingBoxInputsText: '#000000',
        boundingBoxInputsFieldBg: '#f6f6f6',
        boundingBoxInputsBorder: '#e2e2e2',
        boundingBoxInputsBorderFocus: '#3858e9',
    
        // Keyboard shortcuts.
        addKeyboardSupport: true, // Enables keyboard shortcuts. Space + drag pans the zoomed canvas when the mouse is inside the viewer; Space + mouse wheel zooms when the ruler is visible.
        keuboardMoveNudgeAmmount: 1, // Arrow keys: move the selected object by this amount in pixels.
        keyboardMoveNudgeLargeAmmount: 10, // Shift + Arrow keys: move the selected object by this larger amount in pixels.
        keyboardRotateAmmount: 1, // Alt + Left / Right: rotate the selected object by this amount in degrees.
        keyboardRotateLargeAmmount: 15, // Shift + Alt + Left / Right: rotate the selected object by this larger amount in degrees.
        keyboardScaleAmmount: 0.001, // Ctrl/Cmd + Arrow keys: scale the selected object by this amount.
        keyboardScaleLargeAmmount: 0.1, // Ctrl/Cmd + Shift + Arrow keys: scale the selected object by this larger amount. Ctrl/Cmd + Z: undo. Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z: redo.
    
        // Full-screen loader shown while product assets are prepared.
        loader: {
            text: 'Loading ',
            bg: 'rgba(255, 255, 255, 0.6)',
            iconBg: 'rgba(0, 88, 233, 0.2)',
            icon: '#3858e9'
        },
    
        // Fonts available to text objects and text templates.
        font: {
            def: 'Roboto',
            list: [
                {label: 'Arial', family: 'Arial'},
                {label: 'Times New Roman', family: 'Times New Roman'},
                {label: 'Roboto', family: 'Roboto', url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'},
                {label: 'Montserrat', family: 'Montserrat', url: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'},
                {
                    label: 'MD Nichrome',
                    family: 'MDNichrome',
                    files: [
                        {url: './content/fonts/MD_Nichrome/MDNichrome-Regular.otf', weight: 400, style: 'normal'},
                        {url: './content/fonts/MD_Nichrome/MDNichrome-Bold.otf', weight: 700, style: 'normal'},
                        {url: './content/fonts/MD_Nichrome/MDNichrome-Black.otf', weight: 900, style: 'normal'}
                    ]
                }
            ]
        },
    
        // Shared modal window used for delete, reset, errors and info.
        dialog: {
            ok: 'Ok',
            overlay: 'rgba(0, 0, 0, 0.6)',
            bg: 'rgba(255, 255, 255, 1)',
            text: 'rgba(0, 0, 0, .7)',
            btn: {
                bg: 'rgba(56, 88, 233, 1)',
                bgOver: 'rgba(56, 88, 233, 0.7)',
                text: '#FFFFFF',
                textOver: '#FFFFFF'
            },
            close: {
                icon: '#444444',
                iconOver: '#3858e9'
            },
            del: {
                show: true,
                text: 'Are you sure you want to delete this element?',
                btn: 'Delete'
            },
            reset: {
                show: true,
                text: 'Are you sure you want to reset this element?',
                btn: 'Reset'
            },
            info: {
                maxW: 560,
                html: `
                    <div class="fwdipd-info-window-content">
                        <h3>Editor help</h3>
                        <p>
                            Use these shortcuts to move faster while designing. Select an element first, then use the keyboard to cointrol it.Any HTML/text can be added here!
                        </p>
                        <dl>
                            <dt>Arrow keys</dt><dd>Move 1px</dd>
                            <dt>Shift + Arrow keys</dt><dd>Move 10px</dd>
                            <dt>Alt + Left / Right</dt><dd>Rotate -1 / +1 degree</dd>
                            <dt>Shift + Alt + Left / Right</dt><dd>Rotate -15 / +15 degrees</dd>
                            <dt>Ctrl / Cmd + Up / Down</dt><dd>Scale up / down uniformly</dd>
                            <dt>Ctrl / Cmd + Left / Right</dt><dd>Scale X down / up</dd>
                            <dt>Ctrl / Cmd + Shift + Up / Down</dt><dd>Scale Y up / down</dd>
                            <dt>Delete / Backspace</dt><dd>Delete selected element</dd>
                            <dt>Ctrl / Cmd + D</dt><dd>Duplicate selected element</dd>
                            <dt>Ctrl / Cmd + Z</dt><dd>Undo</dd>
                            <dt>Ctrl / Cmd + Y</dt><dd>Redo</dd>
                            <dt>Ctrl / Cmd + Shift + Z</dt><dd>Redo</dd>
                            <dt>Hold Space + drag</dt><dd>Pan / scroll the canvas when the ruler is visible</dd>
                            <dt>Hold Space + mouse wheel</dt><dd>Zoom in / out when the ruler is visible</dd>
                            <dt>Escape</dt><dd>Close current edit / deselect object</dd>
                        </dl>
                    </div>
                `
            }
        },
    
        // Top action bar.
        actionBar: {
            leftlistLabel: 'File',
            leftList: false,
            leftListBg: '#ffffff',
            leftListIcon: '#000000',
            leftListIconOver: '#3858e9',
            leftListBorder: '#e2e2e2',
    
            rightList: false,
            rightlistLabel: 'More',
            rightListBg: '#ffffff',
            rightListIcon: '#000000',
            rightListIconOver: '#3858e9',
            rightListBorder: '#e2e2e2',
    
            bg: '#3858e9',
            nav: [
                [
                    {label: 'Save Design', button: 'savedDesign'},
                    {label: 'Saved Designs', button: 'savedDesigns'},
                    {label: 'Preview', button: 'preview'},
                    {label: 'Print', button: 'print'},
                    {label: 'Download Preview', button: 'download'},
                    {label: 'Doownload Production', button: 'productionExport'},
                ],
                [
                    {label: 'Undo', button: 'undo'},
                    {label: 'Redo', button: 'redo'},
                    {label: 'Ruler', button: 'ruler'},
                    {label: 'Zoom', button: 'zoom'},
                    {label: 'Fullscreen', button: 'fullscreen'},
                    {label: 'Snap To Center', button: 'snapToCenter'},
                    // {label: 'Prev View', button: 'prevView'},
                    // {label: 'Next View', button: 'nextView'},
                    {label: 'Reset', button: 'reset'}
                
                ],
                [
                    
                    {label: 'Info', button: 'info'},
                    {label: 'Export', button: 'export'},
                    // {label: 'Total', button: 'done'},   
                ]
            ],
            icon: '#ffffff',
            iconOver: '#dbe4ff',
            iconDisabled: 'rgba(255, 255, 255, 0.3)',
            toolTip: {
                bg: '#000000',
                text: '#ffffff'
            }
        },
    
        // Download window.
        download: {
            title: 'Download',
            text: 'Choose what you want to export.',
            scope: 'all', // 'all' or 'current'
            all: 'All views',
            current: 'Current view',
            maxW: 390,
            bg: 'rgba(0, 0, 0, 0.02)',
            bgOver: 'rgba(56, 88, 233, 1)',
            formats: [
                {label: 'PNG', button: 'png', description: 'Best for transparent images'},
                {label: 'JPG', button: 'jpg', description: 'Flattened image file'},
                {label: 'SVG', button: 'svg', description: 'Editable vector file'},
                {label: 'PDF', button: 'pdf', description: 'One PDF with selected views'}
            ]
        },
    
        // Full-screen preview window.
        preview: {
            overlay: 'rgba(0, 0, 0, .8)',
            title: '#ffffff',
            itemBg: 'rgba(255, 255, 255, .96)',
            itemText: '#000000',
            close: '#ffffff',
            closeOver: '#3858e9',
            scrollbar: '#3858e9'
        },
    
        // View switcher and its thumbnail grid.
        views: {
            pos: 'bottomRight',
            bg: '#ffffff',
            border: '#e2e2e2',
            icon: '#000000',
            iconOver: '#3858e9',
            nav: {
                maxW: 210,
                h: 42,
                bottomGap: 12
            },
            grid: {
                bg: '#FFFFFF',
                itemBg: 'rgba(255, 255, 255, 1)',
                itemBgOver: 'rgba(56, 88, 233, 0.7)'
            }
        },
    
        // Left modules bar and the panel behind Layers/Text/Images.
        modules: {
            buttons: [
                {label: 'Products', button: 'products'},
                {label: 'Saved Designs', button: 'savedDesigns'},
                {label: 'Layers', button: 'layers'},
                {label: 'Text', button: 'text'},
                {label: 'Images', button: 'images'},
                {label: 'Shapes', button: 'shapes'},
                {label: 'Artwork', button: 'artworkLibrary'}
            ],
            pos: 'left', // 'left' or 'bottom'
            allowToggle: true,
            toggled: true,
            bg: '#ffffff',
            border: '#e2e2e2',
            panelBg: '#ffffff',
            icon: '#000000',
            iconOver: '#3858e9',
            btnBg: 'rgba(255, 255, 255, 0.1)',
            btnBgOver: 'rgba(56, 88, 233, 0.1)'
        },
    
        // Products module previews.
        products: {
            priceColor: '#FFFFFF',
            priceBg: 'rgba(0,0,0,.7)',
            bg: '#ffffff',
            btnBg: 'rgba(56, 88, 233, 1)',
            btnBgOver: 'rgba(56, 88, 233, 0.7)',
            btnText: '#FFFFFF',
            btnTextOver: '#FFFFFF',
            close: '#111111',
            closeOver: '#3858e9',
            itemBg: '#ffffff',
            itemBgOver: 'rgba(56, 88, 233, 0.2)',
            titleColor: '#FFFFFF',
            titleBg: 'rgba(0,0,0,.7)',
            titleSize: 14
        },
    
        // Saved Designs module.
        savedDesigns: {
            json: './content/saved-designs.json',
            inputPlaceholder: 'Optional title',
            btn: 'Save design',
            bg: '#ffffff',
            btnBg: 'rgba(56, 88, 233, 1)',
            btnBgOver: 'rgba(56, 88, 233, 0.7)',
            btnText: '#FFFFFF',
            btnTextOver: '#FFFFFF',
            removable: true,
            close: '#111111',
            closeOver: '#3858e9',
            itemBg: '#ffffff',
            itemBgOver: 'rgba(56, 88, 233, 0.2)',
            titleColor: '#FFFFFF',
            titleBg: 'rgba(0,0,0,.7)',
            titleSize: 12,
            inputBg: '#ffffff',
            inputText: '#000000',
            inputBorder: '#e2e2e2',
            inputBorderFocus: '#3858e9',
            canSave: true,
            cooldownSeconds: 10,
            loginText: 'Log in to save',
            disabledText: 'Disabled for {seconds}'
        },
    
        // Layers list colors.
        layers: {
            bg: '#ffffff',
            canEdit: true,
            itemBg: 'rgba(56, 88, 233, 0)',
            itemBgOver: 'rgba(56, 88, 233, 0.1)',
            icon: '#333333',
            iconOver: '#3858e9'
        },
    
        // Add Text module defaults and colors.
        addText: {
            json: './content/text.json',
            btn: 'Add text',
            price: 0,
            removable: true,
            canDuplicate: true,
            colorPicker: true,
            colors: ['#3858e9', '#B65A3C', '#D8A24A', '#C2413A', '#111111'],
            canReset: true,
            canMove: true,
            canRotate: true,
            canResize: true,
            canDelete: true,
            canReorder: true,
            font: 'Roboto',
            size: 30,
            lineH: 1,
            letter: 0,
            curveType: 'normal',
            radius: 0,
            curve: 0,
            offset: 0,
            fill: '#ffffff',
            stroke: null,
            strokeW: 0,
            bg: '#ffffff',
            priceColor: '#FFFFFF',
            priceBg: 'rgba(0,0,0,.7)',
            btnBg: 'rgba(56, 88, 233, 1)',
            btnBgOver: 'rgba(56, 88, 233, 0.7)',
            btnText: '#FFFFFF',
            btnTextOver: '#FFFFFF',
            inputBg: '#ffffff',
            inputText: '#000000',
            inputBorder: '#d2d2d2'
        },
    
        // Add Images module defaults and colors.
        addImg: {
            json: './content/images.json',
            btn: 'Add images',
            price: 0,
            removable: true,
            colorPicker: true,
            colors: ['#3858e9', '#B65A3C', '#D8A24A', '#C2413A', '#111111'],
            canDuplicate: true,
            canReset: true,
            canMove: true,
            canRotate: true,
            canResize: true,
            canDelete: true,
            canReorder: true,
            priceColor: '#FFFFFF',
            priceBg: 'rgba(0,0,0,.7)',
            bg: '#ffffff',
            dropBg: '#f6f6f6',
            dropBorder: '#d2d2d2',
            dropText: 'Drop your images here',
            dropColor: '#000000',
            btnBg: 'rgba(56, 88, 233, 1)',
            btnBgOver: 'rgba(56, 88, 233, 0.7)',
            btnText: '#FFFFFF',
            btnTextOver: '#FFFFFF',
            close: '#111111',
            closeOver: '#3858e9',
            itemBg: '#ffffff',
            itemBgOver: 'rgba(56, 88, 233, 0.2)'
        },
    
        // Add Shapes module. Uses built-in SVG shapes.
        addShapes: {
            json: './content/shapes.json',
            price: 4,
            priceColor: '#FFFFFF',
            priceBg: 'rgba(0,0,0,.7)',
            fill: '#000000',
            colors: ['#3858e9', '#B65A3C', '#D8A24A', '#C2413A', '#000000'],
            colorPicker: true,
            removable: true,
            canDuplicate: true,
            canReset: true,
            canMove: true,
            canRotate: true,
            canResize: true,
            canDelete: true,
            canReorder: true,
            bg: '#ffffff',
            close: '#111111',
            closeOver: '#3858e9',
            itemFill: '#000000',
            itemBg: '#ffffff',
            itemBgOver: 'rgba(56, 88, 233, 0.2)'
        },
    
        // Artwork Library module. Supports categories and search.
        artworkLibrary: {
            json: './content/artwork_library.json',
            searchPlaceholder: 'Search artwork',
            allCategoriesLabel: 'All',
            price: 4,
            removable: false,
            colorPicker: true,
            colors: ['#3858e9', '#B65A3C', '#D8A24A', '#C2413A', '#111111'],
            canDuplicate: true,
            canReset: true,
            canMove: true,
            canRotate: true,
            canResize: true,
            canDelete: true,
            canReorder: true,
            notFoundText: 'No artwork found',
            bg: '#ffffff',
            priceColor: '#FFFFFF',
            priceBg: 'rgba(0,0,0,.7)',
            close: '#111111',
            closeOver: '#3858e9',
            itemBg: '#ffffff',
            itemBgOver: 'rgba(56, 88, 233, 0.2)',
            searchBg: '#ffffff',
            searchText: '#000000',
            searchBorder: '#e2e2e2',
            searchBorderFocus: '#3858e9',
            catBg: 'rgba(0, 0, 0, 0.02)',
            catBgOver: 'rgba(56, 88, 233, 0.1)',
            catText: '#000000',
            catTextOver: '#3858e9'
        },
    
        // Canvas background and object-control buttons.
        canvas: {
            showDimensions: true,
            dimenstionsBg: 'rgba(0,0,0,.9)',
            dimenstionsText: '#FFFFFF',
            objBg: '#3858e9',
            bg: '#FFFFFF',
            icon: '#000000',
            iconOver: '#ffffff',
            iconBg: 'rgba(255, 255, 255, 1)',
            iconBgOver: 'rgba(56, 88, 233, 1)',
            zoomLevels: [1, 1.25, 1.5, 2],
            zoomStep: 0.01,
            rulerBg: 'rgba(255, 255, 255, 0.72)',
            rulerText: 'rgba(0, 0, 0, 0.68)',
            rulerTick: 'rgba(56, 88, 233, 1)',
            rulerTickMajor: 'rgba(0, 0, 0, 0.65)',
            rulerBorder: 'rgba(0, 0, 0, 0.2)',
            toggleRuler: true,
        },
    
        // Floating object toolbar.
        toolbar: {
            buttons: [
                {label: 'Color', button: 'color'},
                {label: 'Transform', button: 'transform'},
                {label: 'Text', button: 'textFormat'},
                {label: 'Curved Text', button: 'curvedText'},
                {label: 'Align', button: 'position'},
                {label: 'Reset', button: 'reset'},
                {label: 'Duplicate', button: 'duplicate'},
                {label: 'Remove', button: 'delete'}
            ],
            align: [
                {label: 'Top', button: 'top'},
                {label: 'Middle', button: 'middle'},
                {label: 'Bottom', button: 'bottom'},
                {label: 'Left', button: 'left'},
                {label: 'Center', button: 'center'},
                {label: 'Right', button: 'right'}
            ],
            curve: [
                {label: 'Normal Text', button: 'normal'},
                {label: 'Curved Up', button: 'curvedUp'},
                {label: 'Curved Down', button: 'curvedDown'},
                {label: 'Oblique', button: 'oblique'},
                {label: 'Bridge', button: 'bridge'},
                {label: 'Radius', button: 'radius'},
                {label: 'Font Size', button: 'fontSize'},
                {label: 'Letter Spacing', button: 'letterSpacing'},
                {label: 'Curve', button: 'curve'},
                {label: 'Offset', button: 'offset'}
            ],
            color: [
                {label: 'Fill Color', button: 'fill'},
                {label: 'Transparency', button: 'transparency'},
                {label: 'Shadow', button: 'shadow'},
                {label: 'Blur', button: 'blur'},
                {label: 'Stroke Color', button: 'strokeColor'},
                {label: 'Stroke Width', button: 'strokeWidth'},
                {label: 'Font Family', button: 'fontFamily'},
                {label: 'Font Size', button: 'fontSize'},
                {label: 'Line Height', button: 'lineHeight'},
                {label: 'Letter Spacing', button: 'letterSpacing'},
                {label: 'Offset X', button: 'offsetX'},
                {label: 'Offset Y', button: 'offsetY'},
            ],
            transform: [
                {label: 'Scale X', button: 'scaleX'},
                {label: 'Scale Y', button: 'scaleY'},
                {label: 'Rotate', button: 'rotate'},
                {label: 'Skew X', button: 'skewX'},
                {label: 'Skew Y', button: 'skewY'},
                {label: 'Flip horizontal', button: 'flipHorizontal'},
                {label: 'Flip vertical', button: 'flipVertical'}
            ],
            objectToolbarMode: 'floating', // 'floating' or 'fixed'
            toggled: false, // Auto-open the first available panel in fixed mode.
            maxW: 393,
            textMaxW: 460,
            maxScale: 6,
            maxSkew: 20,
            defRadius: 40,
            bg: 'rgba(255, 255, 255, 1)',
            icon: '#000000',
            iconOver: '#3858e9',
            sliderBg: '#f6f6f6',
            sliderBorder: '#e2e2e2',
            sliderFill: '#3858e9',
            sliderHandle: '#f6f6f6',
            sliderInput: '#f6f6f6',
            sliderHandleBorder: '#3858e9',
            back: 'Back',
            secBg: 'rgba(0, 0, 0, 0.02)',
            secBgOver: 'rgba(56, 88, 233, 0.1)',
            secIcon: '#000000',
            secIconOver: '#3858e9',
            secBorder: '#e2e2e2'
        }
    
    });
}

The id value also becomes the global API instance name. With id: 'fwdipd0', methods are available through window.fwdipd0 or directly as fwdipd0.

<button type="button" onclick="fwdipd0.export()">Export</button>
<button type="button" onclick="fwdipd0.destroy()">Destroy</button>

Multiple products

The product setting accepts one JSON path, one literal product object, or an array containing any combination of paths and objects. Only the selected product is rendered; the remaining entries are kept as product references for the Products module.

product: [
    './products/shirt/product.json',
    './products/cap/product.json',
    literalProductObject
],
productIndex: 0 // Also accepts a product title.

Each product keeps its own canvas size, views, printing boxes, base price and initial state. Switching products reloads that product from its original data and resets zoom, view controls, selection, history and synchronized-view state.

Responsive layout

The editor measures its real parent container, not only the browser viewport. The module bar can be placed on the left or bottom. At compact widths the module content fills the available editor area and the object toolbar is attached to the bottom of the browser for reliable touch access.

maxW, resizeW, maxH and minH control the outer editor. Per-view canvas_width and canvas_height control the internal design stage.

Settings

Settings use short grouped names to keep initialization readable. Library JSON and product JSON can override the corresponding defaults at item or element level.

Core settings

Configure product sources, editor sizing, startup behavior, working units, pricing and the main appearance.

Lightbox

Configure the full-browser overlay, generated Customize button and close button used by display: 'lightbox'. Closing only hides the viewer, so reopening it preserves the current product, edits and history. When both maxW and maxH are '100%', the close button becomes the final button in the action bar's right section instead of overlapping it.

lightbox: {
    label: 'Customize',
    bg: 'rgba(0, 0, 0, .7)',
    btnBg: '#3858e9',
    btnBgOver: 'rgba(56, 88, 233, .7)',
    btnText: '#FFFFFF',
    btnTextOver: '#FFFFFF',
    closeW: 34,
    closeH: 34,
    closeBg: '#3858e9',
    closeBgOver: '#FFFFFF',
    closeIcon: '#FFFFFF',
    closeIconOver: '#3858e9'
}

Bounds and snapping

Control object boundaries, clipping, editable printing boxes and center-snapping behavior.

Supported boundingBoxMode values

A single value applies to every configured product:

boundingBoxMode: 'clipping'

For multiple products, array positions follow the order of the product setting. In this example the first product uses its printing box, while the second uses the visible shape of an element titled Bounding Box:

product: [
    './products/shirt/product.json',
    './products/cap/product.json'
],
boundingBoxMode: ['clipping', 'Bounding Box']

Keyboard settings

Enable keyboard controls and configure movement, rotation and scaling increments.

Loader and fonts

Customize the loading screen and define the system, web and custom fonts available for text.

font: {
    def: 'Roboto',
    list: [
        {label: 'Arial', family: 'Arial'},
        {
            label: 'Roboto',
            family: 'Roboto',
            url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'
        },
        {
            label: 'MD Nichrome',
            family: 'MDNichrome',
            files: [
                {url: './content/fonts/MDNichrome-Regular.otf', weight: 400, style: 'normal'},
                {url: './content/fonts/MDNichrome-Bold.otf', weight: 700, style: 'normal'}
            ]
        }
    ]
}

Dialog settings

Customize confirmation, error and information dialogs, including their content, colors and buttons.

Action bar

The action bar is divided into equal left, center and right arrays. Button order is exactly the order in actionBar.nav. Remove an entry to hide that action.

Supported actionBar.nav[].button values: 'savedDesign', 'savedDesigns', 'preview', 'print', 'download', 'productionExport', 'undo', 'redo', 'ruler', 'zoom', 'fullscreen', 'snapToCenter', 'prevView', 'nextView', 'reset', 'info', 'export' and 'done'. Fullscreen expands the complete designer to the browser viewport and automatically returns to its configured size when the browser exits fullscreen.

Download and preview

Configure how customers preview the product and download the current view or all available views.

Views

Configure the navigation used to switch between product views, including its position, colors and thumbnail grid.

The view navigation is automatically hidden when the selected product contains only one view.

Modules

Configure the module bar, its position and the tools customers can open while customizing a product.

Products and saved designs

Configure product selection and saved-design management, including thumbnails, titles and removal controls.

Saved designs can be loaded from savedDesigns.json: './content/saved-designs.json'.

Layers

Configure the layers panel, layer editing and the visual states of layer items and controls.

Add Text

Configure text templates, default typography, object permissions, pricing and module appearance.

The demo text-template library is loaded from addText.json: './content/text.json'.

Add Images

Configure the image library and upload area, including defaults, permissions, pricing and visual states.

The demo image library is loaded from addImg.json: './content/images.json'.

Add Shapes

Configure the shape library, default colors, permissions, pricing and thumbnail appearance.

The demo shapes library is loaded from addShapes.json: './content/shapes.json'.

Artwork Library

Configure categorized artwork, search behavior, object defaults, pricing and library appearance.

The demo artwork library is loaded from artworkLibrary.json: './content/artwork_library.json'.

Canvas

Configure the canvas appearance, object controls, dimensions, zoom behavior and ruler styling.

Object toolbar

Configure the actions and editing panels shown for selected objects, including colors, transforms and text tools.

Working with Colors

Colors are configured independently for the interface, product layers and module content. Every color option accepts browser-supported CSS colors such as hex, RGB, RGBA, HSL, HSLA, named colors and transparent. Use RGBA or transparent when opacity is required.

Interface theme

Theme each interface area through its own settings group. Update normal, hover and selected states together so the accent remains consistent across the action bar, modules, object toolbar, canvas controls, rulers and dialogs.

new FWDIPD({
    actionBar: {
        bg: ''#d62828'',
        icon: ''#ffffff'',
        iconOver: ''#ffe0e0''
    },
    modules: {
        iconOver: ''#d62828'',
        btnBgOver: ''rgba(214, 40, 40, .1)''
    },
    toolbar: {
        iconOver: ''#d62828'',
        sliderFill: ''#d62828'',
        sliderHandleBorder: ''#d62828''
    },
    canvas: {
        objBg: ''#d62828'',
        rulerTick: ''#d62828''
    }
});

Only the properties you define are replaced. Unspecified color properties keep their defaults.

Content palettes

Text, Images, Shapes and Artwork can expose preset swatches through colors. Enable colorPicker when customers may also choose colors outside the preset palette.

addShapes: {
    fill: ''#000000'',
    colorPicker: true,
    colors: [''#d62828'', ''#2f5f8f'', ''#111111'']
}

A palette provides selectable choices. Its first color is not applied automatically. Individual templates and library items can define their own palette, which takes precedence over the module defaults for that item.

SVG and image colors

• SVG: editable fills remain sharp at every size. Multi-path SVG files can preserve their original colors while exposing configured choices.
• White PNG: works as an accurate tint mask and displays the selected color cleanly.
• Shaded PNG: tinting can preserve dark shading and texture, but the result depends on the source pixels.
• JPG: use mainly for photographs because recoloring affects the complete rectangular image.

Color changes are stored with the design element and reproduced in previews, saved designs and exports. The original source asset is not modified.

Color precedence

1. The color saved on the current view element.
2. The individual template or library-item color.
3. The module default fill, tint or palette.
4. The product or constructor fallback.

When color synchronization is enabled, matching product elements can share a customer color choice across views. Unrelated elements retain their own saved colors.

Editable Printing Box

The editable printing box is a product-setup tool for positioning and sizing the real customizable area directly on the canvas. Enable it when preparing a product, then export the product JSON after the box is correct.

1. Define the physical print area

"options": {
    "canvas_width": "922",
    "canvas_height": "749",
    "print_width_mm": "95",
    "print_height_mm": "117",
    "dpi": 300,
    "bleed": 3,
    "printing_box": {
        "left": 179,
        "top": 62,
        "width": 518,
        "height": 638
    }
}

The canvas values and printing_box geometry are editor pixels. The print_width_mm and print_height_mm values are the authoritative physical print size. The designer preserves their ratio when the box is loaded or resized.

2. Enable visual editing

Add these options to the main FWDIPD configuration:

boundingBoxEditable: true,
boundingBoxInputs: true,
boundingBoxColor: '#FF0000'

boundingBoxEditable enables canvas selection and transform handles. boundingBoxInputs adds the floating X, Y, W and H fields. The ruler automatically displays canvas pixels while this setup mode is enabled.

3. Adjust and export

1. Select: click the red dashed printing box. Its translucent fill and resize controls appear only while selected.
2. Move: drag the selected box, use its X/Y inputs, or press an Arrow key. Shift + Arrow uses the configured large movement step.
3. Resize: drag a resize control, change W/H, or use Ctrl/Cmd + Arrow. Add Shift for the large resize step.
4. Center: when Snap To Center is active, the box snaps to the horizontal and vertical canvas center and displays the configured guides.
5. Finish: click outside the canvas to deselect it, then use Product Export to save the updated printing-box values.

boundingBoxMode and boundingBoxEditable have different jobs. The mode controls how added objects are constrained or clipped; the editable option controls whether the product administrator can modify the view's rectangular printing box.

Production Export and Unit Conversion

Production Export creates a print-ready file from the customizable area of a product. It crops the design to the printing box, adds bleed when required, and generates the final file at the configured physical size and DPI.

Setting up a print area

Start by asking the printer or product manufacturer for the real size of the area that can receive artwork.

1. Enter the real print size. Set print_width_mm and print_height_mm in millimeters.
2. Position the printing box. Place it over the customizable area of the product image. Its X, Y, width and height use canvas pixels. Width and height are automatically constrained to the ratio defined by print_width_mm and print_height_mm.
3. Position the product artwork. Align the base image, SVG colors, shading and overlays around the printing box.
4. Set DPI and bleed. A DPI above 0 controls physical raster resolution. DPI 0 keeps the printing box at its editor-pixel resolution. Bleed adds extra millimeters around every edge.
5. Test the result. Run Production Export and confirm the crop and final file size before publishing the product.

Example: if the printer specifies a 95 × 117 mm printable area, enter those values and place a similarly shaped printing box over the product preview. You do not need to calculate the pixel-to-millimeter conversion yourself.

The root unit only controls how measurements are displayed in the editor. Normally keep unitScale: 1. Change it only when the complete product requires an additional measurement multiplier.

Setting the printing-box width and height

The physical print dimensions determine the shape of the printing box. The printing box itself is positioned and sized in whole canvas pixels, so its pixel width can be chosen to fit the product preview. Its pixel height must then be calculated from the physical ratio.

When choosing the pixel width

Choose a printing_box.width that visually covers the customizable area, then calculate its height:

printing_box.height = Math.round(
    printing_box.width * print_height_mm / print_width_mm
);

When choosing the pixel height

If the height is easier to determine from the product preview, calculate the width instead:

printing_box.width = Math.round(
    printing_box.height * print_width_mm / print_height_mm
);

"options": {
    "canvas_width": "922",
    "canvas_height": "749",
    "print_width_mm": "95",
    "print_height_mm": "117",
    "printing_box": {
        "left": 179,
        "top": 62,
        "width": 518,
        "height": 638
    }
}

• Width and height: control the printing-box size in canvas pixels.
• Left and top: position the finished box over the customizable part of the product.
• If the box does not fit: reduce the chosen pixel width or height and recalculate the other dimension. Do not distort one dimension independently.
• Whole-pixel rounding: a tiny ratio difference after rounding is normal and does not change the configured physical print size.
• Automatic correction: when JSON dimensions do not match, the designer keeps printing_box.width and recalculates printing_box.height on load.
• Editable box: canvas handles, keyboard resizing and W/H inputs preserve the same ratio automatically. While boundingBoxEditable: true, both the ruler and bounds inputs display canvas pixels.

Canvas pixels and physical output size

The printing box determines which part of the canvas is rendered. Its pixel dimensions and configured physical output establish the scale independently for each axis:

mmPerPixelX = print_width_mm / printing_box.width * unitScale;
mmPerPixelY = print_height_mm / printing_box.height * unitScale;

canvasWidthMm = canvas_width * mmPerPixelX;
canvasHeightMm = canvas_height * mmPerPixelY;

For example, the mug uses a 518 × 638 px printing box for a 95 × 117 mm print size. This produces approximately 0.183 mm/px on both axes. Setting unitScale: 2 doubles those physical measurements; unitScale: 1 leaves them unchanged.

Physical-size conversion formulas

There are exactly 25.4 millimeters in one inch. The renderer first converts all production values to millimeters and then calculates the final raster dimensions:

trimWidthPx = Math.round(outputWidthMm * dpi / 25.4);
trimHeightPx = Math.round(outputHeightMm * dpi / 25.4);

finalWidthPx = Math.round((outputWidthMm + bleedMm * 2) * dpi / 25.4);
finalHeightPx = Math.round((outputHeightMm + bleedMm * 2) * dpi / 25.4);

The selected display unit does not change the resulting pixel count. It only changes how the same physical measurement is presented:

centimeters = millimeters / 10;
inches = millimeters / 25.4;

// All three values describe the same physical width.
240 mm = 24 cm = 9.449 in;

PDF page dimensions are calculated in points after rasterization:

pdfWidthPoints = finalWidthPx / dpi * 72;
pdfHeightPoints = finalHeightPx / dpi * 72;

Printing-box crop and bleed

Bleed uses the same physical scale as the configured print output. Because this project stores production sizes in print_width_mm and print_height_mm, bleed is also measured in millimeters. Resolution order is runtime API, view JSON, global constructor, then 0. The renderer maps the physical bleed proportionally into each printing-box axis:

bleedCanvasX = bleedMm / print_width_mm * printing_box.width;
bleedCanvasY = bleedMm / print_height_mm * printing_box.height;

cropLeft = printing_box.left - bleedCanvasX;
cropTop = printing_box.top - bleedCanvasY;
cropWidth = printing_box.width + bleedCanvasX * 2;
cropHeight = printing_box.height + bleedCanvasY * 2;

Every exported object is cloned, moved relative to the expanded crop origin, and scaled into the final raster canvas. Object clip paths are transformed by the same values. excludeFromExport: true removes a layer from every download, while excludeFromProductionExport: true removes it only from print-ready production files.

For objects using rectangular clipping, production export expands the clip to the bleed crop so available artwork can reach the exported image edges. Normal editor and preview rendering continue to use the printing-box trim boundary. Image-based bounding masks retain their original shape and include every source pixel whose alpha is greater than zero.

Worked 300-DPI example

The included mug JSON uses a ratio-corrected 518 × 638 px box representing 95 × 117 mm, with no bleed:

{
    "unit": "cm",
    "unitScale": 1,
    "views": [{
      "options": {
        "canvas_width": "922",
        "canvas_height": "749",
        "print_width_mm": "95",
        "print_height_mm": "117",
        "dpi": 300,
        "bleed": 0,
        "printing_box": {
            "left": 179,
            "top": 62,
            "width": 518,
            "height": 638
        }
      }
    }]
}

The physical output is 95 × 117 mm. At 300 DPI, the generated raster dimensions are:

bleedCanvasX = 0 / 95 * 518;  // 0 canvas px per edge
bleedCanvasY = 0 / 117 * 638; // 0 canvas px per edge

width  = Math.round(95 * 300 / 25.4);  // 1122 px
height = Math.round(117 * 300 / 25.4); // 1382 px

With zero bleed, the source crop remains exactly left: 179, top: 62, 518 × 638 px. The root display unit is cm, but the authoritative production values remain in millimeters.

API, overrides, and generated files

The production API accepts PNG, JPG, or PDF. By default it exports every view. Use currentViewOnly, viewIndex, or viewIndexes to select specific views.

// Export every view using its product JSON production settings.
await fwdipd0.productionExport('png');

// Export only the active view.
await fwdipd0.productionExport('jpg', {
    currentViewOnly: true,
    quality: 0.92,
    fileName: 'shirt-front-production.jpg'
});

// Deliberately override the configured physical size for this export only.
// Keep the override ratio aligned with the printing box.
await fwdipd0.productionExport('pdf', {
    viewIndex: 0,
    outputWidth: 240,  // millimeters
    outputHeight: 400, // millimeters
    bleed: 3,          // millimeters per edge
    dpi: 300,
    outputUnit: 'cm'
});

• A single PNG or JPG view downloads as one image.
• Multiple PNG or JPG views are packaged into one ZIP file.
• PDF combines the rendered production views into one PDF document.
• jpeg is normalized to jpg.
• Production SVG is not supported because production output is rasterized at the configured DPI.
• Without API overrides, production uses the view's configured print_width_mm and print_height_mm, calibrated against its printing box and multiplied by unitScale.
• Runtime outputWidth, outputHeight, and bleed are interpreted as canonical millimeters. Runtime bleed overrides view JSON, which overrides the global fallback. unit/outputUnit controls converted presentation metadata.

Production validation checklist

• Define canvas_width and canvas_height in pixels for every view.
• Define an accurate printing_box inside the canvas.
• Set the real printing size in print_width_mm and print_height_mm.
• Keep the output aspect ratio equal to the printing-box aspect ratio.
• Set one positive root unitScale only when an additional multiplier is needed; omitted values default to 1.
• Product export preserves the configured physical output values instead of replacing them with printing-box pixels.
• If API size overrides are used, keep their aspect ratio equal to the printing-box ratio.
• Use a suitable DPI, typically 300 for high-quality print output.
• Confirm with the print provider whether bleed is required and how many millimeters to use.
• Use sufficiently large source images; increasing DPI cannot restore detail missing from a low-resolution asset.
• Run a production export and inspect its pixel dimensions before delivering the product configuration.

Product JSON

A product is portable data: product metadata, one or more views, elements and per-view production geometry. Asset paths are resolved relative to the JSON file that declares the product.

Product root

{
    "title": "Men Standard",
    "thumbnail": "preview-front.png",
    "basePrice": 20,
    "startAtView": 0,
    "unit": "mm",
    "unitScale": 1,
    "views": [
        {
            "title": "Front",
            "thumbnail": "preview-front.png",
            "elements": [],
            "options": {}
        }
    ]
}

View and production options

"options": {
    "canvas_width": "600",
    "canvas_height": "650",
    "print_width_mm": "240",
    "print_height_mm": "400",
    "dpi": 300,
    "bleed": 3,
    "printing_box": {
        "left": 178,
        "top": 139,
        "width": 240,
        "height": 400
    }
}

Element schema

{
    "title": "Logo",
    "source": "logo.svg",
    "type": "image",
    "parameters": {
        "left": 300,
        "top": 325,
        "originX": "center",
        "originY": "center",
        "fill": "#3858e9",
        "colors": ["#3858e9", "#B65A3C", "#D8A24A"],
        "colorPicker": true,
        "showInLayers": true,
        "canDuplicate": true,
        "canReset": true,
        "canMove": true,
        "canRotate": true,
        "canResize": true,
        "canDelete": true,
        "canReorder": true,
        "scaleX": 1,
        "scaleY": 1,
        "minScaleLimit": 0.04,
        "lockUniScaling": true,
        "angle": 0,
        "price": 0,
        "boundingBoxMode": "clipping",
        "opacity": 1,
        "locked": false,
        "alwaysOnTop": false,
        "excludeFromExport": false,
        "excludeFromProductionExport": true,
        "visible": true
    }
}

shadow accepts {color, blur, offsetX, offsetY}. Blur 0 removes the visible shadow and disables offsets while preserving the chosen shadow color for later use.

filter accepts one filter or a list. Supported important filters include grayscale, sepia, invert, brightness, contrast, saturation, vibrance, blur, pixelate and noise.

Color palettes and SVG fills

• fill is the initial single fill/tint.
• Module-level colors define the default swatches for Text, Images, Shapes or Artwork.
• Item-level colors, either directly on the item or inside parameters, replace the module palette for that item.
• An explicit empty colors: [] removes preset swatches from that item.
• svgFill stores one color per detected SVG fill group for multi-fill SVG editing.
• colorPicker: false keeps the Color section and swatches but prevents opening the custom picker.
• An empty fill with an empty colors array leaves a PNG/SVG in its original appearance.
• The transparent/reset swatch restores original image pixels or original SVG fill colors.

"fill": "",
"colors": ["#3858e9", "#B65A3C", "#D8A24A"],
"svgFill": ["#3c33e0", "#818cf8", "#0d277a", "#120e69"],
"colorPicker": true

Text parameters

Text uses source as its editable content. This keeps the element schema consistent and avoids a separate top-level text property.

{
    "title": "Personalized name",
    "source": "YOUR TEXT",
    "type": "text",
    "parameters": {
        "fontFamily": "Roboto",
        "fontSize": 42,
        "fontWeight": 700,
        "fontStyle": "normal",
        "underline": false,
        "textAlign": "center",
        "fill": "#3858e9",
        "strokeColor": "#000000",
        "strokeWidth": 0,
        "lineHeight": 1.2,
        "letterSpacing": 0,
        "curvable": true,
        "curvedType": "normal",
        "curveRadius": 80,
        "curve": 0,
        "curveOffset": 0,
        "maxLines": 0,
        "minFontSize": 1,
        "maxFontSize": 1000,
        "textTransform": "none",
        "widthFontSize": false
    }
}

Bounding modes

• none: no clipping or inside constraint.
• inside: keep the object's transformed bounds inside the current view printing box without masking it.
• clipping: clip the object to the current view printing box.
• An element title such as Overlay: use that view element's visible SVG shape or PNG alpha as a clipping mask.

SVG targets use their vector alpha. Transparent PNG targets use image alpha; transparent areas clip while partially/fully opaque pixels preserve the edited object at full visual opacity.

When printing_box exists, the red dotted guide always displays its exact rectangle. Object-title modes affect the clipping target only.

Library JSON

Image, text, shape, artwork and artwork-category entries can define an optional itemBg CSS color. It changes only that entry's thumbnail background; it does not affect the canvas object, overlay, price badge or close button.

Images JSON

{
    "removable": true,
    "images": [
        {
            "type": "svg",
            "name": "Mushroom",
            "src": "./content/svg/mushroom.svg",
            "itemBg": "#e2e2e2",
            "price": 9.99,
            "removable": false,
            "parameters": {
                "canMove": true,
                "canDelete": true,
                "colors": ["#3858e9", "#B65A3C"]
            }
        }
    ]
}

The browser upload list is also maintained in memory. Duplicate detection uses src; no separate key is required. Set an item's optional itemBg CSS color to override the global thumbnail background, which is useful for displaying white artwork.

Text templates JSON

{
    "removable": true,
    "texts": [
        {
            "text": "YOUR\nTEXT",
            "parameters": {
                "fontFamily": "MDNichrome",
                "fontSize": 42,
                "fontWeight": 700,
                "fill": "#3858e9",
                "colors": ["#3858e9", "#B65A3C", "#D8A24A"],
                "textAlign": "center",
                "curvedType": "bridge",
                "curve": 45,
                "curveOffset": 50,
                "price": 10
            }
        }
    ]
}

Template thumbnails are rendered from the same text parameters used by the canvas, including custom fonts, multiple lines, curved up/down, oblique and bridge modes.

Shapes JSON

{
    "removable": true,
    "shapes": [
        {
            "label": "Circle",
            "button": "circle",
            "svg": "<svg viewBox='0 0 100 100'><circle cx='50' cy='50' r='38' fill='currentColor'/></svg>",
            "price": 4,
            "parameters": {
                "fill": "#3858e9",
                "colors": ["#3858e9", "#B65A3C", "#D8A24A"]
            }
        }
    ]
}

Use inline svg or a source URL. Inline paths should use currentColor so the configured shape fill and color toolbar can update them.

Each shape can define a currency-free, non-negative price directly on the shape or inside parameters. A value greater than 0 is used for that shape. A missing value or 0 inherits addShapes.price. The global currency, addShapes.priceColor and addShapes.priceBg control its thumbnail badge.

Artwork Library JSON

{
    "search": true,
    "categories": [
        {
            "label": "Animals",
            "button": "animals",
            "removable": false,
            "search": ["animals", "wildlife", "pets"]
        }
    ],
    "artworks": [
        {
            "label": "Panda",
            "button": "animals_panda",
            "category": "animals",
            "src": "./artwork_library/animals/panda.svg",
            "price": 0,
            "search": ["panda", "animal", "bear"],
            "parameters": {
                "colors": ["#3858e9", "#B65A3C", "#D8A24A"]
            }
        }
    ]
}

The main window shows category thumbnails first. Opening a category reveals its artwork, back button and search field. Category removable controls removal for artwork in that category unless an item overrides it.

Saved designs JSON

{
    "removable": true,
    "designs": []
}

Each runtime design contains id, title, createdAt, productIndex, productTitle, productBasePath, currentViewIndex, thumbnail and a complete productData snapshot.

Important Workflows

Preview download

download() renders the current visual product. It supports PNG, JPG, SVG and PDF and can include the current view or all views. This is intended for customer previews and normal downloads.

Product ZIP export

export() synchronizes the editable printing box, serializes the live product state, removes deprecated/internal properties, respects excludeFromExport, gathers only assets referenced by product elements, and downloads one ZIP containing product.json plus those assets.

Module library JSON and unused Add Images media are not included. Product root basePrice and startAtView are always exported with safe defaults.

Saved designs

Saving creates an in-memory snapshot and dispatches an event containing everything required for database persistence. No localStorage is used. Reloading the page starts from the configured saved-design JSON unless your application supplies saved records again.

Keyboard Shortcuts

Methods

Every instance is available under its configured ID, for example window.designer0.

download

await designer0.download(format = 'png', options = {})

Downloads normal rendered views. Formats: png, jpg/jpeg, svg, pdf.

await designer0.download('png', {currentViewOnly: true});
await designer0.download('pdf', {currentViewOnly: false, fileName: 'customer-design.pdf'});

productionExport

await designer0.productionExport(format = 'png', options = {})

Downloads print-ready cropped output. Formats: PNG, JPG and PDF. Options can include currentViewOnly, viewIndex, fileName, dpi, bleed, outputWidth, outputHeight and unit/outputUnit. Runtime bleed is in millimeters and overrides both the view JSON and global fallback.

await designer0.productionExport('png', {
    currentViewOnly: true,
    dpi: 300,
    bleed: 3,
    unit: 'mm'
});

print

await designer0.print(options = {})

Renders product previews into an isolated print document and opens the browser's normal print dialog. The current view is printed by default; pass {currentViewOnly: false} for all views.

export

await designer0.export(options = {})

Downloads the editable product JSON and referenced assets as a ZIP. Options: fileName for the ZIP and productFileName for the JSON inside it. Resolves to {productData, assets, blob} or null on error.

saveDesign

designer0.saveDesign(title = '')

Creates an in-memory saved-design snapshot, refreshes all saved-design windows and dispatches FWDIPD.SAVED_DESIGN_CREATED.

Product and view methods

undo / redo

await designer0.undo() / await designer0.redo()

Moves through the current view's history. Slider and color-picker drags commit one history entry when released rather than one entry for every pointer movement.

getCurrentPrintingBoxInfo

designer0.getCurrentPrintingBoxInfo(viewIndex?)

Returns debugging/integration data for a view:

{
    viewIndex: 0,
    viewTitle: 'Front',
    unitScale: 1,
    millimetersPerPixel: {x: 1, y: 1},
    canvasPx: {width: 600, height: 650},
    printingBoxPx: {left: 178, top: 139, width: 240, height: 400},
    output: {unit: 'mm', width: 240, height: 400},
    sourceOutput: {unit: 'mm', width: 240, height: 400}
}

destroy

designer0.destroy()

Removes listeners, timers, dialogs, responsive windows, color pickers, Fabric canvas resources, component references, the global instance and all generated DOM. In normal embedded modes it also removes the configured parent holder; in lightbox mode it removes the generated launch button and overlay.

Events

Register events on the instance with addEventListener. Event constants are available on the global FWDIPD class after initialization.

designer0.addEventListener(FWDIPD.SAVED_DESIGN_CREATED, function(event){
    console.log(event.design);
    // Send event.design to your database/API.
});

designer0.addEventListener(FWDIPD.MODULE_ITEM_REMOVED, function(event){
    console.log(event.section, event.type, event.item || event.media);
});

designer0.addEventListener(FWDIPD.PRICE_CHANGED, function(event){
    console.log(event.total);
});

designer0.addEventListener(FWDIPD.DONE, function(event){
    console.log(event.total);
});

FWDIPD.SAVED_DESIGN_CREATED

'savedDesignCreated'

Dispatched after a design snapshot is created. Payload: design, savedDesign, id, title, createdAt, productIndex, productTitle, productBasePath, currentViewIndex, thumbnail and productData.

FWDIPD.MODULE_ITEM_REMOVED

'moduleItemRemoved'

Dispatched when a removable Text, Image, Shape or Artwork Library item/category is deleted. Payload always includes section and type, plus the relevant item/media/category data.

FWDIPD.PRICE_CHANGED

'priceChanged'

Dispatched when the product total changes. The total payload contains the current base price plus all priced design elements.

FWDIPD.DONE

'done'

Dispatched when the Done action is clicked. The total payload contains the current product total and can be used by storefront integrations.