Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/PloutusLab/krafta-web/llms.txt

Use this file to discover all available pages before exploring further.

After selecting a product, color, and size on the product detail page, Krafta sends you to the design editor — a full-screen canvas workspace where you upload your artwork, position it precisely over the product’s print area, and generate a preview image that travels with your order all the way to the workshop.

​
How the editor works

The editor is built on top of Fabric.js, a powerful HTML5 canvas library. At the center of the interface sits the product’s SVG mockup, rendered inside a div container. Fabric.js then mounts a transparent canvas element positioned exactly over the print area element inside that SVG — matched by querying for elements whose id contains krafta-print-area or _x23_krafta-print-area — so anything you place on the canvas sits precisely within the printable zone of the mockup. When the page loads, the editor:
  1. Fetches the product’s SVG blueprint from the server.
  2. Parses the SVG for elements whose id contains krafta-print-area or _x23_krafta-print-area to determine canvas placement.
  3. Measures the print area’s bounding box and positions the Fabric.js canvas to match it exactly, accounting for the current zoom level.
  4. Hides the print area vector guide (sets its opacity to 0) so it does not interfere with your design.
  5. Draws a dashed purple border (2 px, rgba(94, 48, 250, 0.5)) on the canvas to show the printable boundary.
  6. Scans the SVG for any elements whose id contains krafta-var- or _x23_krafta-var- and exposes them as color pickers in the right sidebar.
The entire mockup and canvas scale together using the zoom controls, so you can inspect fine detail without leaving the editor.

​
Uploading a design

Click the Upload button in the left toolbar to open your file picker. Supported formats: Any image file accepted by your browser (image/*) — PNG and JPG are the most common choices. Once a file is selected, Fabric.js loads the image, scales it to 80% of the canvas width, and centers it inside the print area. You can then reposition, resize, or rotate it freely.
For the sharpest print results, use an image with an effective resolution of at least 150 DPI at your intended print size. A 2400 × 2400 px PNG is a safe starting point for a standard T-shirt chest print.
Only PNG files support transparent backgrounds. If you upload a JPG, any white areas in the image will print as solid white ink. Use PNG with a transparent background for designs that should show the product color underneath.

​
Manipulating your design on the canvas

Once your image is on the canvas, Fabric.js gives you full interactive control:
ActionHow to do it
MoveClick and drag the image to any position inside the canvas
ResizeDrag any of the eight corner or edge handles
RotateDrag the circular rotation handle above the selection box
Zoom in / outUse the + and − buttons in the bottom-left zoom control
Zoom affects the entire viewport (SVG + canvas together) and does not change your design’s actual output dimensions — it is purely for your viewing comfort.

​
Adjusting product colors

SVG elements with krafta-var- (or _x23_krafta-var-) in their id attribute represent customizable fill zones on the product — for example, the base fabric color of a hoodie or a background panel on a tote bag. Each such element appears as a labeled color picker in the Variants & Layers right sidebar. The label shown for each variable is derived from the element’s id by stripping the krafta-var- or _x23_krafta-var- prefix and replacing underscores with spaces. Clicking a color picker opens the browser’s native color chooser. As you select a color, the corresponding SVG element updates its fill in real time, giving you an accurate preview of the final product. If no krafta-var- elements are found in the SVG blueprint, the sidebar shows a message indicating there are no dynamic color variables for that product.
A dashed purple border is always visible on the canvas to mark the exact boundary of the printable zone. This border is a non-selectable Fabric.js Rect object — it cannot be accidentally moved or deleted.
Any part of your design that extends beyond the dashed purple border will be clipped during printing. Keep all important elements — logos, text, fine details — visibly inside the boundary.

​
Saving and previewing

When you are happy with the placement, click Finish Design in the right sidebar. Krafta calls fabricCanvas.toDataURL({ format: 'png', quality: 1 }) to render the canvas contents into a PNG data URL and passes it to the parent page via the onSave callback with the following shape: 
{
  hasDesign: boolean, // true if the canvas contains objects beyond the border guide
  previewUrl: string  // base-64 PNG data URL of the canvas contents
}
This preview image is:
  • Displayed on the checkout and order pages so you and the admin can verify what was designed.
  • Attached to the order record so the assigned workshop sees exactly what to print.
  • Used for the product thumbnail on your order history page.
After saving, Krafta returns you to the product page where you can proceed to checkout.

Build docs developers (and LLMs) love

Get started for freeTalk to us