Field Explorer & Inspector Reference
Complete guide to the two essential sidebars in Publixx Template Designer: understand every control, option, and feature.
Interface Overview
The Publixx interface is divided into three main areas: the left sidebar (Element Palette & Field Explorer), the central canvas, and the right sidebar (Inspector). This guide covers the left and right sidebars in detail.
Element Palette
The Element Palette provides quick access to all available element types. Elements are organized into five categories. Click any element to add it to your canvas.
Element Type Reference
| Element | Category | Description | Data Type |
|---|---|---|---|
| Dynamic Text | Text | Text element bound to a data field. Content changes per record. | String, Number |
| Fixed Text | Text | Static text that remains the same across all records. | None (manual input) |
| Bullet List | Data | Displays array data as a formatted bullet list. | Array |
| Table | Data | Displays structured data as a two-column table (label/value pairs). | Array of Objects, Key-Value Object |
| Smart Table | Data | Advanced table with PTL configuration: sorting, filtering, merging, pivot mode. | Array of Objects |
| Chart | Data | Visualize numeric data as bar, line, or pie charts. | Array of Numbers, Key-Value Object |
| Group | Data | Container element to group multiple elements together. | None |
| Image | Media | Display images from URL or data field. | URL String, Base64 |
| Video | Media | Embed video for digital outputs (HTML, Player). | URL String |
| Audio | Media | Embed audio for digital outputs. | URL String |
| Barcode | Media | Generate barcodes (EAN-13, Code128, etc.) from data. | String, Number |
| QR Code | Media | Generate QR codes from URLs or text data. | String, URL |
| Line | Shapes | Decorative line element (horizontal, vertical, or angled). | None |
| Rectangle | Shapes | Colored rectangle for backgrounds or design elements. | None |
| Map | Special | Display interactive maps with markers from coordinates. | Lat/Lng coordinates |
| EXIF | Special | Extract and display EXIF metadata from images. | Image reference |
| Location | Special | Display formatted location data (address, coordinates). | Location Object |
| API | Special | Fetch dynamic content from external APIs (AI text, translations, etc.). | API Response |
Field Explorer
The Field Explorer displays all data fields available in your loaded dataset. Click any field to instantly create a matching element on the canvas. Color-coded indicators show which fields are already in use.
Usage Indicators
| Indicator | Color | Meaning |
|---|---|---|
| Blue Bullet | Blue (#3B82F6) | Field is bound to an element on the canvas (fully used) |
| Yellow Bullet | Yellow (#F59E0B) | Some sub-fields of this group are used, but not all |
| No Bullet | None | Field is not used in any element |
Features
- Click to Add: Click any field name to instantly create an element bound to that field
- Auto-Type Detection: Publixx automatically selects the best element type based on data structure (text, list, table, image)
- Collapsible Groups: Nested data structures are displayed as expandable groups
- Single-Field Shortcut: Groups with only one field can be clicked directly on the header
- Live Updates: Indicators update in real-time as you add or remove elements
Inspector Panel
The Inspector shows all properties of the currently selected element. Properties are organized into collapsible sections, color-coded by category. Available sections depend on the element type.
Beginner vs Expert Mode
The Inspector has two modes to reduce complexity for new users:
| Mode | Visible Sections | Best For |
|---|---|---|
| Beginner | Core sections only: Data, Typography, Position, Actions | New users, simple templates, quick edits |
| Expert | All sections including: Formatting Rules, Visibility, Animation, TTS, API | Power users, complex conditional logic, advanced styling |
Inspector Sections Reference
Data / Text
Configure the data source for your element. This is the primary section for binding elements to your dataset.
| Control | Description |
|---|---|
| Bind Path | Dropdown to select which data field this element displays. Shows compatible fields based on element type. |
| Show All Fields | Checkbox to show all available fields, including those with incompatible data types (marked with ⚠️). |
| Text (Fixed Text only) | Text area for entering static content that doesn't change per record. |
Typography & Layout
Control text appearance including font, size, color, alignment, and spacing.
| Control | Description |
|---|---|
| Font Size | Text size in pixels (default: 14) |
| Font Weight | Light (300), Normal (400), Medium (500), Semibold (600), Bold (700) |
| Font Family | Select from system fonts or custom loaded fonts |
| Alignment | Horizontal: Left, Center, Right, Justify |
| Vertical Align | Top, Middle, Bottom alignment within the element box |
| Padding | Inner spacing in pixels |
| Text Color | Color picker for text. Supports Brand Kit colors. |
| Line Color | Color for underlines, borders, and rules |
| Background | Element background color (transparent by default) |
| Border Radius | Corner rounding in pixels |
| Divider Line | Add a rule line above or below the text |
Header
Add a label/title above or beside your element. Useful for tables and specification blocks.
| Control | Description |
|---|---|
| Show Header | Toggle to enable/disable the header label |
| Header Title | Text for the header (can use {field} syntax for dynamic titles) |
| Position | Top, Left, Right, Bottom relative to the element |
| Gap | Spacing between header and content in pixels |
| Show Divider | Add a line between header and content |
Prefix / Suffix
Add static text before or after the data value. Perfect for units, currency symbols, or labels.
| Control | Description |
|---|---|
| Prefix | Text to display before the value (e.g., "€", "Part No:") |
| Suffix | Text to display after the value (e.g., "mm", "kg", "%") |
Formatting
Apply number and date formatting to your data values.
| Control | Description |
|---|---|
| Number Format | Decimal places, thousands separator, locale (e.g., 1,234.56 or 1.234,56) |
| Date Format | Format date strings (DD.MM.YYYY, YYYY-MM-DD, etc.) |
| Currency | Format as currency with symbol placement |
Formatting Rules (Expert)
Apply conditional formatting based on data values. Change colors, font weight, or visibility based on conditions.
| Control | Description |
|---|---|
| Add Rule | Create a new conditional formatting rule |
| Field | Which data field to evaluate |
| Condition | Equals, Not Equals, Contains, Greater Than, Less Than, etc. |
| Value | The value to compare against |
| Style Changes | Text color, background color, font weight to apply when condition matches |
Visibility (Expert)
Control when an element appears based on data conditions. Hide elements when data is missing or doesn't meet criteria.
| Control | Description |
|---|---|
| Condition Field | Which data field controls visibility |
| Operator |
Scalar: Exists, Not Exists, Equals, Contains, Starts With, Matches (RegEx) Array: Has Items, Is Empty, Length Equals, Contains Value Object: Has Property, Property Equals |
| Value | Comparison value (if required by operator) |
| Invisible (Ghost) | Element visible in editor but hidden in all exports |
Hyperlink
Make elements clickable in digital outputs (HTML, PDF with links, Player).
| Control | Description |
|---|---|
| Link Source | Fixed URL or data field containing the URL |
| URL Field | Select data field for dynamic links |
| Fixed URL | Static URL (can include {field} placeholders) |
| Link Text | Alternative text for screen readers |
Position & Size
Precise control over element placement and dimensions.
| Control | Description |
|---|---|
| X | Horizontal position from left edge (pixels) |
| Y | Vertical position from top edge (pixels) |
| W | Element width (pixels) |
| H | Element height (pixels) |
| Rotation | Rotation angle in degrees (0-360) — for text and images |
Actions
Quick actions for the selected element.
| Action | Description | Shortcut |
|---|---|---|
| Delete | Remove element from canvas | Delete |
| Duplicate | Create a copy of the element | Ctrl+D |
| Layer Up | Move element forward (on top) | — |
| Layer Down | Move element backward (behind) | — |
| Primary | Mark as primary element for navigation/naming | — |
Layout (Image Elements)
Image-specific display options.
| Control | Description |
|---|---|
| Scaling Mode |
Contain: Fit entire image, may have empty space Cover: Fill entire area, may crop Fill: Stretch to fill (distorts) None: Original size |
| Position | Alignment within frame (top-left, center, bottom-right, etc.) |
| Padding | Space between image and frame edge |
| Background | Color shown in empty areas (for Contain mode) |
| Border Radius | Round the corners of the image |
| Thumbnail | Mark as thumbnail for special export handling |
Image URL Composition
Build image URLs from multiple data fields or add prefixes/suffixes.
| Control | Description |
|---|---|
| URL Field | Data field containing the image path or filename |
| URL Prefix | Base URL to prepend (e.g., "https://cdn.example.com/images/") |
| URL Suffix | Extension or parameters to append (e.g., ".jpg" or "?size=large") |
| Fallback URL | Image to show if the data field is empty |
Table Styling
Customize table appearance.
| Control | Description |
|---|---|
| Column Widths | Set fixed or proportional column widths |
| Header Bold | Bold font for the first column (labels) |
| Header Background | Background color for the header row/column |
| Alternating Rows | Enable zebra striping for better readability |
| Alternate Color | Background color for alternating rows |
| Cell Padding | Space inside each table cell |
| Border Color | Color for table grid lines |
List Styling
Customize bullet list appearance.
| Control | Description |
|---|---|
| Bullet Style | Disc (●), Circle (○), Square (■), Dash (–), Arrow (→), Check (✓), None |
| Bullet Color | Color for the bullet character |
| Indent | Space between bullet and text |
| Line Spacing | Vertical space between list items |
Line
Line element properties.
| Control | Description |
|---|---|
| Stroke Color | Line color |
| Stroke Width | Line thickness in pixels |
| Dash Pattern | Solid, Dashed, Dotted |
Rectangle
Rectangle/shape element properties.
| Control | Description |
|---|---|
| Fill Color | Background fill color |
| Stroke Color | Border color |
| Stroke Width | Border thickness |
| Border Radius | Corner rounding |
| Opacity | Transparency level (0-100%) |
Animation (Expert)
Add entrance/exit animations for digital outputs (Player, Video).
| Control | Description |
|---|---|
| Animation In | Entrance effect: Fade, Slide, Zoom, Bounce |
| Animation Out | Exit effect for the element |
| Duration | Animation length in seconds |
| Delay | Wait time before animation starts |
Text-to-Speech (Expert)
Enable audio narration for digital outputs.
| Control | Description |
|---|---|
| Enable TTS | Toggle text-to-speech for this element |
| Language | Voice language (German, English, French, Spanish, Italian, etc.) |
| Speed | Speech rate (0.5x to 2x) |
| Pitch | Voice pitch adjustment |
| Order | Reading sequence when multiple TTS elements exist |