Print Areas

Print areas define the printable regions on a product view. Elements are visually constrained within print areas, and print areas provide SVG export for production output.

Defining Print Areas

Add printAreas to a view in your product data:

const product = {
    views: [{
        title: 'Front',
        elements: [...],
        printAreas: [
            {
                printingBox: {
                    left: 310,
                    top: 140,
                    width: 280,
                    height: 320,
                },
            },
        ],
    }],
};

Configuration (CVPrintAreaConfig)

Property	Type	Default	Description
id	string	auto	Unique identifier.
printingBox	PrintingBox	required	Position and dimensions in canvas pixels: { left, top, width, height }.
output	PrintAreaOutput | null	null	Physical output size in mm: { width, height }. Used for DPI calculations and ruler display.
mask	PrintAreaMask | null	null	SVG mask configuration for non-rectangular print areas.
printProfile	Partial<ChamevoPrintAreaOptions>	—	Option overrides scoped to this print area.
showIndicator	boolean	true	Show selection checkmark icon.
showZoom	boolean	true	Show zoom icon.
showRuler	boolean	true	Show ruler icon.
color	string	'#2196F3'	Color for bounding box and icons (active state). Inactive state uses 90% opacity.
exportOnly	boolean	false	Export-only "view" print area — shows its bounding box + bleed box and is non-interactive in the end-user frontend (fully placeable in editorMode). On export it composes the whole view. See Export-only view print area.

Multiple Print Areas

A single view can have multiple print areas (e.g., a mug with front and back print zones):

{
    title: 'Mug',
    elements: [...],
    printAreas: [
        {
            id: 'front',
            printingBox: { left: 100, top: 150, width: 300, height: 200 },
            output: { width: 90, height: 60 },
        },
        {
            id: 'handle-side',
            printingBox: { left: 500, top: 150, width: 200, height: 200 },
            output: { width: 60, height: 60 },
        },
    ],
}

Export-only view print area

Set exportOnly: true to define a print area that represents the whole view's print output. It is configured and placed exactly like any other print area, but behaves differently depending on context:

• End-user frontend (editorMode: false) — it shows its bounding box and bleed box / crop marks (so the user can see the export region and bleed) but is otherwise non-interactive: no selection checkmark, zoom, ruler or placeholder, and it can't be selected, zoomed, or targeted by drag-and-drop — elements are never bound to it. Use showBoundingBox: false / showBleedBox: false to hide those outlines.
• Editor (editorMode: true) — it renders and can be placed like a normal print area, so you can position it visually.
• Export — it composes everything inside its printingBox into a single output: the interactive print areas placed within it, their elements, and any shared backgrounds. It also renders its own bleed/crop marks (from output.bleed). Containment is geometric — whatever falls inside its box is included.

{
    title: 'T-Shirt Front',
    elements: [...],
    printAreas: [
        // Interactive areas the customer edits
        { id: 'chest', printingBox: { left: 250, top: 150, width: 200, height: 120 } },
        { id: 'pocket', printingBox: { left: 300, top: 300, width: 90, height: 90 } },

        // Whole-view print output — hidden in the frontend, exported as one file
        {
            id: 'view',
            printingBox: { left: 40, top: 40, width: 720, height: 520 },
            output: { width: 360, height: 260, bleed: 3 },
            exportOnly: true,
        },
    ],
}

printAreasToSVG() is additive: it still emits one SVG per interactive area and one for the view area. To list only the customer-facing areas, use canvas.getInteractivePrintAreas().

Per-Print-Area Options (printProfile)

Each print area can override a subset of options:

{
    printingBox: { left: 200, top: 100, width: 400, height: 500 },
    printProfile: {
        maxPrice: 25,
        customTextParameters: {
            maxLength: 30,
            colors: ['#000000', '#ffffff'],
        },
        customImageParameters: {
            minDPI: 300,
        },
        disabledModules: ['text-to-image'],
    },
}

Print-area-scoped keys: elementParameters, textParameters, imageParameters, customTextParameters, customImageParameters, maxPrice, disabledModules.

SVG Export

Export print areas as production-ready SVG:

// Export a specific print area
const svg = await canvas.exportPrintAreaToSVG(printArea);

// Export all print areas
const svgs = await canvas.printAreasToSVG();

Output Dimensions

The output property maps canvas pixels to physical dimensions. This enables:

• Ruler display in real-world units (mm, cm, inches)
• DPI quality ratings for uploaded images
• Area-based pricing calculations

{
    printingBox: { left: 200, top: 100, width: 400, height: 500 },
    output: {
        width: 300,  // 300mm physical width
        height: 400, // 400mm physical height
    },
}

Next Steps

• Products & Views — How print areas fit into the data model
• Elements — Element parameters including printAreaId
• Options Cascade — How printProfile merges with view and global options