Introduction

The Editor Arguments JSON is the universal instruction set used to initialize a TronDesigner session. Whether you are using the Web Script or a URL-based integration, you are simply "packaging" this specific JSON structure.

Core Data Blocks

Below are blocks of JSON with examples and explanations.

1. Strategy: Operating Modes

Before defining products, you must tell the editor what the user is doing and how much data you are providing.

Opening Modes

Are we starting from scratch or opening a saved design? The printJobGuid is a unique identifier (string) generated by TronDesigner every time a user saves a design.

• If you have a printJobGuid: You have to be in Edit or View mode. The Editor will ignore any product or print data you send and will instead load the design exactly as it was saved in our database.

• If you DON'T have a printJobGuid: You have to be in Create mode.

"openMode": "CREATE|EDIT|VIEW"

• Create → Starts a blank canvas. (New orders from a webshop.)

• Edit → Loads an existing printJobGuid. (Customer changes their design in the cart.)

• View → Read-only mode for an existing printJobGuid. (Internal staff checking a design.)

Calling Modes (Data Modes)

How much data you pass in your call? What is a required data minimum for each mode?

"dataMode": "EXACT|PARTIAL|OWN"

Content of Products and Printings blocks may differ, the rest stays the same for all modes. Partial can be referred as Free. Own can be referred as Custom.

2. Product Definition

You need to tell the editor exactly which product to load using Suppliers and Models.
If you are starting a new design, the product block is your "Instruction Manual."

Product Identification:

• Product: Product information, required when creating a new print job

• supplierCode: The ID of the supplier. Find this in your Admin Portal under Suppliers.

  • You should manually set this code in the Admin Portal under Suppliers.

  • Example: If you are integrating products from supplier comany “PF Concept International Cooperatief U.A.”, your supplierCode needs to be PFC.

• modelCode: The SKU/Model of the product. Product identification using model code instead of specific variants list. Only allowed in FREE (PARTIAL) data mode, user will be asked to select specific variants before opening the editor.

• model object allows you to "rename" the product for the user.

  • title / description: These override the default values. Use this if your webshop uses different names than the supplier.

• variants: List of product variants to be added to the print job (must be at least one).

  • dim1Title / dim1Colors: Explains the "Dimension" (Color).

  • productCode: The code of variant, should be available in your own system (TronCloud supplier’s product code).

• overrides (optional): Overrides for setting own product name / code what will be displayed to user (without modifying the underlying supplier catalog).

  • productCode (optional): Overrides product code shown in editor / print output.

  • productName (optional, required for OWN data mode): Overrides product name shown in the Editor / Print output.

Example

"product": {
     "supplierCode": "PFC",  // From Admin Portal
     "modelCode": "100002",  
     "model": {       
       "title": "Nápojová láhev Oregon", 
       "description": "Custom description for your customers...",
       "dimCount": 1 
     },
     "variants": [
       {
         "productCode": "10000200", // The specific variant ID from your system
         "quantity": 10,
         "dim1Title": "Zelené jablko",
         "dim1Colors": ["00FF00"], // Hex code for the color picker
         "overrides": {
           /* USE THIS TO RENAME PRODUCTS IN THE EDITOR UI */
           "productCode": "PFC-10000200", // Your internal shop SKU
           "productName": "Green Bottle - Promo" // Your internal name
         }
       }
     ]
}

Overrides

{
   printJob: {
    addProducts: {
      variants: [
        {
          productCode: "AAP003-160",
          overrides: {
            productCode: "003-160",
            productName: "White",
          },
        },
        {
          productCode: "AAP003-103",
          overrides: {
            productCode: "003-103",
            productName: "Green",
          },
        },
      ],
      /* ...rest of print job arguments */
    },
  }
   /* ...rest of arguments */
}

3. Printing Definition

The printings array defines where and how the product can be decorated. This is a list of printings that should be added to the Print Job, required when creating a new Print Job. Each object in this array represents a Position (where) and a Technology (how).

Core Identification

• printPositionCode: Print position identification code (TronCloud supplier’s print position code), e.g., FRONT.

• printTechnologyCode: The identification code for the print technology (e.g., SCREEN_PRINTING, LASER_ENGRAVING).

  • Where to find these? These codes are visible in the Admin Portal under the specific Model's configuration.

Overrides (optional)

Overrides for setting own print POSITION / TECHNOLOGY name / code what will be displayed to the user.

• printPositionCode: Overrides print position code shown in the Editor / Print output

• printPositionName (optional, but required for OWN data mode): Overrides print position name shown in the Editor / Print output.

• printTechnologyCode: Overrides print technology code shown in the Editor / Print output.

• printTechnologyName (optional, required for OWN data mode): Overrides print technology name shown in the Editor / Print output.

• Production Constraints:

  • maxColors: Limit the user to 4 colors even if the technology allows more.

  • maxWidth / maxHeight: Set hard limits for the design size in millimeters.

• Color Modes: Define which color palettes the user can use (e.g., only Pantone or only CMYK).

Mockups & Print Areas

This is the visual "engine" of the editor.

• backgroundUrls: These are the images of the product that appear behind the design.

• pxToMm: This is the scaling factor. It ensures that a logo uploaded by the user is rendered at the correct real-world size on the product mockup.

• printArea: Defines the "Bounding Box" where the user is allowed to place their design. It includes the shape (RECTANGLE, CIRCLE), dimensions, and rotation.

Example

"printings": [
  {
    "printPositionCode": "FRONT",
    "printTechnologyCode": "PAD03",
    "overrides": {
      "printPositionName": "Přední strana", // Rename for UI
      "maxColors": 4, // Constraint for pricing
      "maxWidth": 40,
      "maxHeight": 50
    },
    "mockup": {
      "backgroundUrls": ["https://cdn.com/front.png"],
      "pxToMm": 10,
      "printArea": {
        "shape": "RECTANGLE",
        "width": 40,
        "height": 50
      }
    }
  },
  {
    "printPositionCode": "BACK",
    "printTechnologyCode": "PAD03"
    /* No mockup provided? Editor uses default from TronCloud */
  }
]

Overrides

{
   printJob: {
    addPrintings: [
      {
        printPositionCode: "CUSTOM-FRONT",
        printPositionName: "Custom Front",
        printTechnologyCode: "CUSTOM-PAD03",
        printTechnologyName: "Custom PAD03",
      }
    ],
    /* ...rest of print job arguments */
  }
   /* ...rest of arguments */
}

4. Metadata & Tracking (Customer & Custom)

This block handles the "handshake" between TronDesigner and your database. This data is not displayed to the user; it is stored and returned to you to help you identify the order.

Customer & Order Identification

TronDesigner doesn't use this data to render anything; it simply stores it and returns it back to you in the result webhook or JS event.

• orderCode / orderItemCode: Essential for matching the design to a specific line in your database.

• customerEmail / customerIdentity: Useful for tracking which user created which design.

Example

"customer": {
  "customerCompany": "Abc Corp",
  "customerEmail": "JohnDoe@gmail.com",
  "customerIdentity": "USER-12345",
  "customerPerson": "John Doe",
  "orderCode": "ORDER-999",
  "orderItemCode": "ITEM-001",
  "orderTitle": "Summer Campaign T-Shirts"
}

Custom Properties

If the standard customer fields aren't enough, you can pass any key-value pairs here.

• Example: "key1": "loyalty-member-gold".

• Use Case: Pass internal flags that your system needs to see when the user returns to your cart.

Example

"customProperties": {
  "internal_erp_id": "88776655",
  "discount_applied": "true",
  "source_campaign": "winter_2026"
}

5. Editor Behavior & Results

This block controls the user’s "exit" experience and toggles specific UI features within the editor.

Editor Result Actions & Redirects

This defines the user's "exit" experience.

• resultAction:

  • NONE: Does nothing (stays on the editor).

  • CLOSE: Closes the modal/window immediately.

  • DIALOG: Display a dialog with a button to close the Editor, optionally can display custom message. (Close Dialog)

• redirectUrl: The URL the browser navigates to after the session ends.

Example: Default Behavior (No Redirect)

{
 "openMode": "CREATE",
 "dataMode": "EXACT",
 "printJob": {...},
 "editor": {
   "result": {
     "resultAction": "NONE"
   }
 }
}

Example: Custom Success Dialog & Redirect

{
 "openMode": "CREATE",
 "dataMode": "EXACT",
 "printJob": {...},
 "editor": {
   "result": {
     "resultAction": "dialog",
     "redirectUrl": "https://shop.example.com/cart",
     "closeDialog": {
       "title": "Print Graphics ready",
       "message": "Print Graphics has been successfully created and saved.",
       "buttonText": "Continue to cart"
     }
   }
 }
}

Feature Toggles

Use the featureClassPath to disable specific modules (like 3D visualizations) if they aren't needed for your product.

Example

"editor": {
  "result": {
    "resultAction": "dialog", // Options: NONE, CLOSE, DIALOG
    "redirectUrl": "https://yourshop.com/cart",
    "closeDialog": {
      "title": "Design Ready!",
      "message": "Your design has been saved. You can now proceed to checkout.",
      "buttonText": "Continue to Cart"
    }
  },
  "features": [
    {
      /* Example: Disabling the 3D Visualization feature */
      "featureClassPath": "Application.TronDesigner.Instance.Features.Visualizations",
      "enabled": false
    }
  ]
}

Behavior Options (UI Toggles)

Controls what UI elements are shown and how interactive the Editor is.

Example

window.tronDesigner.openDesigner(
  { /* editor arguments */ },
  {
    editorOptions: {
      alwaysShowImageSelect: false,
      showQuantityInputs: true,
      showSelectedPrintOptions: "Selected",
      showSelectedVariants: true
    }
  }
);

Integration Styles: UI Strategies. These styles represent how you combine Data Modes with UI Toggles to create a specific user experience.

• Exact Mode (Fixed configuration): Use these flags to hide selection UIs (quantities, variants) if those details are already locked in your system.

• Free (Partial) / Own (Custom) Modes (Flexible Configuration): Enable these flags to let the user choose their own product variants and quantities directly within the Editor.

6. Pricing & Calculations (Beta)

Calculation Mode (Beta): The calculation block is currently intended for integrations where price is calculated based on design complexity (number of colors, size).

• NONE: No pricing shown in editor.

• STATIC: Shows a fixed price passed from your shop.

• DYNAMIC: (Consult with support before use) Communicates with an external calculator.

"calculation": {
  "mode": "NONE" // Options: NONE, STATIC, DYNAMIC
}

Code Examples in different data modes

Exact data mode

Example 1:

Creating a new Print Pob with 1x printing (no overrides - minimum valid example for EXACT mode).

Example 2:

Creating new print job with 2 printings (with all overrides)

Free (Partial) data mode

Example 1:

Creating a new Print Job (minimum valid example for PARTIAL mode)

Example 2:

Creating a new Print Job (just product data).

Own (Custom) data mode

Host provides all the necessary data, if needed the user will be asked to complete missing data (same as in Free/Partial mode). No PromoTron data is used.

Example 1:

Creating a new Print Job (just product data).
*User will need to input print options including mockup.

Example 2:

Creating a new Print Job (product and print data without mockups).
*User will need to provide at least mockup background for every print option.

Example 3:

Creating a new Print Job (product and print data with mockups).
*Host provides complete data, the user goes directly to the editor without any inputs.

The Master JSON Example

Below is a complete payload featuring every available block. Check the TypeDoc Reference.

Summary & Validation

Before you move to implementation, keep these two rules in mind:

• The "Key" Rule: If you have a printJobGuid, the editor loads a saved design. If not, it uses your product and printing blocks to build a new one.

• The "Override" Rule: Use overrides to map TronDesigner’s technical data to your shop's internal SKUs and names.

Next Steps:

• Web Integration Script – Implementation via JavaScript (Overlay mode).

• Integration via URL – Implementation via URL parameters (Standalone mode).

• JS Event Subscriptions – Learn how to capture the results.

• TypeDoc Reference – View the full technical schema.

• Integration Recipes – For specific examples.

• Calling Modes – For technical explanation of Data Modes.