Publixx Elemente & Inspector Properties
Dokumentation v1.0.0
Diese Dokumentation beschreibt alle verfügbaren Elementtypen im Publixx Template Designer sowie ihre Properties im Inspector und die Unterstützung in verschiedenen Export-Formaten.
1. Elementtypen im Field Explorer (Palette)
Die Elemente sind in der linken Seitenleiste in fünf Kategorien gruppiert:
📝 Text
| Element | Typ-ID | Beschreibung |
|---|---|---|
| Freier Text | text |
Dynamischer Text aus Daten-Binding |
| Fixer Text | fixedText |
Statischer Text ohne Daten-Binding |
📊 Daten
| Element | Typ-ID | Beschreibung |
|---|---|---|
| Liste | list |
Bullet- oder nummerierte Listen |
| Tabelle | table |
Tabellarische Daten mit Zeilen/Spalten |
| Diagramm | chart |
Chart.js Diagramme (Bar, Line, Pie, etc.) |
🖼️ Medien
| Element | Typ-ID | Beschreibung |
|---|---|---|
| Bild | image |
Bilder aus URLs oder Daten-Binding |
| Video | video |
Video-Elemente mit Player-Controls |
| Audio | audio |
Audio-Elemente für TTS oder Dateien |
| Barcode | barcode |
CODE39 Barcodes |
| QR-Code | qrcode |
QR-Codes für URLs oder Text |
📐 Formen
| Element | Typ-ID | Beschreibung |
|---|---|---|
| Linie | line |
Horizontale oder vertikale Linien |
| Rechteck | rect |
Rechtecke mit Rahmen und Füllung |
✨ Spezial
| Element | Typ-ID | Beschreibung |
|---|---|---|
| Karte | map |
OpenStreetMap Karten mit Marker |
| EXIF Daten | exif |
EXIF-Metadaten aus Bildern extrahieren |
| Standort | location |
Reverse Geocoding (Koordinaten → Adresse) |
| API Element | api |
Externe REST-API Integration |
2. Export-Format Kompatibilität
Legende
- ✅ Vollständig unterstützt
- ⚠️ Eingeschränkt unterstützt
- ❌ Nicht unterstützt
| Element | PPTX | Word | Bild | Player | Website | Microsite | |
|---|---|---|---|---|---|---|---|
| text | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| fixedText | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| image | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| table | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ |
| list | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ |
| barcode | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| qrcode | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| line | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| rect | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| exif | ✅ | ✅ | ⚠️ | ✅ | ✅ | ✅ | ❌ |
| video | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ |
| audio | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ |
| map | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ |
| location | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ |
| api | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ⚠️ |
| chart | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ |
Erläuterungen zur Kompatibilität
Nur Web/Player-Elemente (rot markiert):
video,audio: Benötigen Browser-Umgebung für Wiedergabemap: Erfordert Live-Kartenrendering via OpenStreetMaplocation: Erfordert Netzwerkzugriff für Nominatim Reverse Geocodingapi: Erfordert Netzwerkzugriff für externe API-Callschart: Chart.js benötigt Canvas-Rendering im Browser
Einschränkungen:
exifin Word: Nur Textausgabe, kein spezielles Stylingtable/listin Microsite: Vereinfachte Darstellungapiin Microsite: Nur Pre-Fetch-Daten, keine Live-Calls
3. Inspector Sektionen & Properties
Die Inspector-Sektionen sind modular aufgebaut. Jede Sektion ist nur für bestimmte Elementtypen sichtbar.
3.1 Universelle Sektionen (alle Elementtypen)
📍 Position & Größe
| Property | Beschreibung | Einheit |
|---|---|---|
x |
X-Position | px |
y |
Y-Position | px |
w |
Breite | px |
h |
Höhe | px |
rotation |
Drehwinkel | ° (0-360) |
📊 Daten-Binding
| Property | Beschreibung | Typ |
|---|---|---|
bind |
Feldpfad aus Datenquelle | string |
| Datentyp-Anzeige | Kompatibilitätsinfo | info |
👁️ Sichtbarkeit (Visibility Rules)
| Property | Beschreibung | Typ |
|---|---|---|
visibility.enabled |
Regeln aktiviert | boolean |
visibility.mode |
'all' (AND) / 'any' (OR) | enum |
visibility.rules[] |
Array von Regeln | array |
└ field |
Zu prüfendes Feld | string |
└ operator |
Vergleichsoperator | enum |
└ value |
Vergleichswert | string |
Verfügbare Operatoren:
exists/notExists- Wert vorhanden/nicht vorhandenequals/notEquals- Ist gleich/ungleichcontains/notContains- Enthält/enthält nichtgreaterThan/lessThan- Größer/kleiner als
🎨 Formatting Rules (Bedingte Formatierung)
| Property | Beschreibung | Typ |
|---|---|---|
formattingRules.enabled |
Regeln aktiviert | boolean |
formattingRules.mode |
'first' / 'merge' | enum |
formattingRules.rules[] |
Array von Formatierungsregeln | array |
└ condition |
Bedingung (wie Visibility) | object |
└ styles |
Anzuwendende Styles | object |
└ customCSS |
Zusätzliches CSS | string |
⚙️ Layout-Optionen
| Property | Beschreibung | Typ |
|---|---|---|
canGrow |
Element kann bei Überlauf wachsen | boolean |
canMove |
Element verschiebt nachfolgende | boolean |
invisible |
Element im Export unsichtbar | boolean |
locked |
Element gesperrt (nicht bearbeitbar) | boolean |
editable |
Element editierbar im Template | boolean |
3.2 Typografie-Sektion
Gilt für: text, fixedText, list, table, exif, location
| Property | Beschreibung | Wertebereich |
|---|---|---|
style.fontSize |
Schriftgröße | 6-200 px |
style.fontWeight |
Schriftstärke | 100-900 |
style.fontFamily |
Schriftfamilie | string |
style.fontStyle |
Schriftstil | normal/italic |
style.textColor |
Textfarbe | hex color |
style.textAlign |
Horizontale Ausrichtung | left/center/right/justify |
style.verticalAlign |
Vertikale Ausrichtung | top/middle/bottom |
style.lineHeight |
Zeilenhöhe | 1.0-3.0 |
style.letterSpacing |
Zeichenabstand | -5 bis 20 px |
3.3 Formatierung-Sektion
Gilt für: text, fixedText, list, table, image
| Property | Beschreibung | Typ |
|---|---|---|
style.padding |
Innenabstand | 0-100 px |
style.bg |
Hintergrundfarbe | hex color |
style.radius |
Eckenradius | 0-200 px |
style.textRuleEnabled |
Unterstreichlinie aktiv | boolean |
style.textRulePos |
Position der Linie | top/bottom |
style.textRuleWidth |
Linienbreite | 1-20 px |
style.textRuleInset |
Linien-Einzug | 0-50 px |
3.4 Prefix/Suffix-Sektion
Gilt für: text, barcode, qrcode, exif
| Property | Beschreibung | Typ |
|---|---|---|
style.prefix |
Text vor dem Wert | string |
style.suffix |
Text nach dem Wert | string |
3.5 Zahlen- & Datumsformatierung
Gilt für: text
Zahlenformat
| Property | Beschreibung | Typ |
|---|---|---|
numberFormat.enabled |
Formatierung aktiv | boolean |
numberFormat.decimals |
Dezimalstellen | 0-10 |
numberFormat.thousandsSeparator |
Tausendertrennzeichen | string |
numberFormat.decimalSeparator |
Dezimaltrennzeichen | string |
numberFormat.prefix |
Prefix (z.B. "€ ") | string |
numberFormat.suffix |
Suffix (z.B. " kg") | string |
Datumsformat
| Property | Beschreibung | Typ |
|---|---|---|
dateFormat.enabled |
Formatierung aktiv | boolean |
dateFormat.format |
Format-String | string |
dateFormat.locale |
Lokalisierung | de-DE/en-US/etc. |
Verfügbare Format-Tokens:
DD- Tag (01-31)MM- Monat (01-12)YYYY- Jahr (4-stellig)HH:mm- Uhrzeit
3.6 Header-Sektion
Gilt für: text, fixedText
| Property | Beschreibung | Typ |
|---|---|---|
showHead |
Header anzeigen | boolean |
headerTitle |
Header-Text | string |
headerPos |
Position | top/left |
headerGap |
Abstand zum Inhalt | 0-200 px |
3.7 Hyperlink-Sektion
Gilt für: text, fixedText, image
| Property | Beschreibung | Typ |
|---|---|---|
link.enabled |
Link aktiv | boolean |
link.mode |
Link-Modus | fromData/fromField/fixed |
link.href |
Feste URL | string |
link.hrefBind |
Feld-Binding für URL | string |
link.text |
Anzeige-Text | string |
link.newWindow |
In neuem Fenster öffnen | boolean |
3.8 Bild-Sektion
Gilt für: image
| Property | Beschreibung | Typ |
|---|---|---|
imageStyle.objectFit |
Skalierung | cover/contain/fill/none |
imageStyle.objectPosition |
Ausrichtung | center/top/bottom/left/right |
imageStyle.grayscale |
Graustufen | boolean |
imageStyle.opacity |
Deckkraft | 0.0-1.0 |
urlConfig.useAssetBase |
Asset-Base verwenden | boolean |
urlConfig.prefix |
URL-Prefix | string |
urlConfig.suffix |
URL-Suffix | string |
isPrimary |
Primärbild (für Thumbnail) | boolean |
isThumbnail |
Als Thumbnail verwenden | boolean |
3.9 Tabellen-Stil-Sektion
Gilt für: table
| Property | Beschreibung | Typ |
|---|---|---|
tableStyle.borderVisible |
Rahmen sichtbar | boolean |
tableStyle.borderColor |
Rahmenfarbe | hex color |
tableStyle.borderWidth |
Rahmenstärke | 1-5 px |
tableStyle.columnDistribution |
Spaltenverteilung | equal/custom |
tableStyle.columnWidths |
Custom Spaltenbreiten | number[] |
tableStyle.headerRow |
Erste Zeile als Header | boolean |
tableStyle.headerBold |
Header fett | boolean |
tableStyle.headerBg |
Header-Hintergrund | hex color |
tableStyle.alternatingRows |
Alternierende Zeilen | boolean |
tableStyle.alternateColor |
Alternierfarbe | hex color |
3.10 Listen-Stil-Sektion
Gilt für: list
| Property | Beschreibung | Typ |
|---|---|---|
listStyle.bulletType |
Bullet-Typ | disc/circle/square/none/custom |
listStyle.customBullet |
Eigenes Bullet-Zeichen | string |
listStyle.bulletColor |
Bullet-Farbe | hex color |
listStyle.itemSpacing |
Abstand zwischen Items | 0-50 px |
3.11 Linien-Sektion
Gilt für: line
| Property | Beschreibung | Typ |
|---|---|---|
style.lineColor |
Linienfarbe | hex color |
style.lineWidth |
Linienstärke | 1-20 px |
style.lineOrientation |
Ausrichtung | horizontal/vertical |
3.12 Rechteck-Sektion
Gilt für: rect
| Property | Beschreibung | Typ |
|---|---|---|
style.strokeColor |
Rahmenfarbe | hex color |
style.strokeWidth |
Rahmenstärke | 0-20 px |
style.fillColor |
Füllfarbe | hex color |
style.radius |
Eckenradius | 0-200 px |
3.13 Video-Sektion ⚠️ Nur Web
Gilt für: video
| Property | Beschreibung | Typ |
|---|---|---|
videoConfig.src |
Feste Video-URL | string |
videoConfig.srcBind |
Feld-Binding | string |
videoConfig.poster |
Poster-Bild URL | string |
videoConfig.posterBind |
Poster Feld-Binding | string |
videoConfig.autoplay |
Automatisch abspielen | boolean |
videoConfig.loop |
Wiederholen | boolean |
videoConfig.muted |
Stumm | boolean |
videoConfig.controls |
Steuerelemente | boolean |
videoConfig.objectFit |
Skalierung | contain/cover/fill |
videoConfig.controlSlideDuration |
Slide = Video-Länge | boolean |
3.14 Audio-Sektion ⚠️ Nur Web
Gilt für: audio
| Property | Beschreibung | Typ |
|---|---|---|
audioConfig.src |
Feste Audio-URL | string |
audioConfig.srcBind |
Feld-Binding | string |
audioConfig.autoplay |
Automatisch abspielen | boolean |
audioConfig.loop |
Wiederholen | boolean |
audioConfig.volume |
Lautstärke | 0.0-1.0 |
audioConfig.controlSlideDuration |
Slide = Audio-Länge | boolean |
3.15 Karten-Sektion ⚠️ Nur Web
Gilt für: map
| Property | Beschreibung | Typ |
|---|---|---|
mapConfig.source |
Koordinaten-Quelle | fields/exif |
mapConfig.latBind |
Breitengrad-Feld | string |
mapConfig.lonBind |
Längengrad-Feld | string |
mapConfig.imageUrlBind |
Bild-URL für EXIF | string |
mapConfig.zoom |
Zoom-Level | 1-18 |
mapConfig.markerEnabled |
Marker anzeigen | boolean |
mapConfig.markerColor |
Marker-Farbe | hex color |
mapConfig.mapStyle |
Kartenstil | standard/satellite/terrain |
mapConfig.showExifFooter |
EXIF-Info anzeigen | boolean |
3.16 EXIF-Sektion ⚠️ Nur Web (außer Textausgabe)
Gilt für: exif
| Property | Beschreibung | Typ |
|---|---|---|
exifConfig.imageUrlBind |
Bild-URL Feld | string |
exifConfig.exifField |
Auszulesendes Feld | enum |
Verfügbare EXIF-Felder:
camera- KameramodelldateTime- AufnahmedatumimageSize- Bildgröße (Breite × Höhe)focalLength- Brennweiteaperture- BlendeexposureTime- Belichtungszeitiso- ISO-Wertlat- Breitengradlon- Längengradaltitude- Höhe über Meeresspiegel
3.17 Standort-Sektion ⚠️ Nur Web
Gilt für: location
| Property | Beschreibung | Typ |
|---|---|---|
locationConfig.source |
Koordinaten-Quelle | exif/fields/fixed |
locationConfig.imageUrlBind |
Bild für EXIF | string |
locationConfig.latBind |
Breitengrad-Feld | string |
locationConfig.lonBind |
Längengrad-Feld | string |
locationConfig.latFixed |
Fester Breitengrad | string |
locationConfig.lonFixed |
Fester Längengrad | string |
locationConfig.displayFormat |
Anzeige-Format | enum |
locationConfig.customTemplate |
Eigenes Template | string |
Anzeigeformate:
full- Vollständige Adressecity- Nur StadtcityCountry- Stadt, LandcityState- Stadt, BundeslandcityStateCountry- Stadt, Bundesland, LandstateCountry- Bundesland, Landcountry- Nur LandcountryCode- Ländercodepostcode- Postleitzahlroad- Straßecustom- Eigenes Template
3.18 API-Sektion ⚠️ Nur Web
Gilt für: api
| Property | Beschreibung | Typ |
|---|---|---|
apiConfig.preset |
Preset | custom/google-translate/deepl/etc. |
apiConfig.presetConfig |
Preset-spezifische Config | object |
apiConfig.targetField |
Zielfeld für Pre-Fetch | string |
apiConfig.endpoint |
REST-API URL | string |
apiConfig.method |
HTTP-Methode | GET/POST/PUT |
apiConfig.headers |
Custom Headers | object |
apiConfig.params |
Query/Body Parameter | object |
apiConfig.paramBindings |
Parameter-Bindings | object |
apiConfig.responseType |
Antwort-Typ | json/text/image/html/audio |
apiConfig.responseMapping.valuePath |
JSONPath zum Wert | string |
apiConfig.cache.enabled |
Caching aktiv | boolean |
apiConfig.cache.ttl |
Cache-Lebenszeit | number (Sekunden) |
3.19 Chart-Sektion ⚠️ Nur Web
Gilt für: chart
| Property | Beschreibung | Typ |
|---|---|---|
chartConfig.chartType |
Diagramm-Typ | bar/horizontalBar/line/pie/doughnut/radar/polarArea |
chartConfig.showLegend |
Legende anzeigen | boolean |
chartConfig.legendPosition |
Legende-Position | top/bottom/left/right |
chartConfig.animationDuration |
Animation in ms | number |
chartConfig.beginAtZero |
Y-Achse bei 0 starten | boolean |
chartConfig.tension |
Kurvenglättung (Line) | 0-1 |
chartConfig.fill |
Fläche füllen (Line) | boolean |
chartConfig.pointRadius |
Punktgröße (Line) | number |
chartConfig.cutout |
Innerer Radius (Doughnut) | string |
chartConfig.colors |
Custom Farben | string[] |
3.20 Text-Transformation-Sektion
Gilt für: text, fixedText, barcode, qrcode, list
| Property | Beschreibung | Typ |
|---|---|---|
textTransform.enabled |
Transformation aktiv | boolean |
textTransform.rules[] |
Array von Transformationsregeln | array |
Verfügbare Transformationen:
uppercase/lowercase- Groß-/Kleinschreibungcapitalize- Erster Buchstabe jedes Worts großcapitalizeFirst- Nur erster Buchstabe großtrim/normalizeSpace- Leerzeichen bereinigenreplace- Suchen & Ersetzenremove- Text entfernensubstring/truncate- Text kürzenpadStart/padEnd- Text auffüllenprefix/suffix- Text hinzufügensplit- Text aufteilenslugify- URL-freundlich machenstripHtml- HTML-Tags entfernen
3.21 Text-to-Speech-Sektion
Gilt für: text, fixedText
| Property | Beschreibung | Typ |
|---|---|---|
tts.enabled |
TTS aktiv | boolean |
tts.lang |
Sprache | de-DE/en-US/etc. |
tts.rate |
Sprechgeschwindigkeit | 0.5-2.0 |
tts.pitch |
Tonhöhe | 0.5-2.0 |
tts.order |
Reihenfolge bei mehreren TTS | number |
3.22 Animation-Sektion (nur Player)
Gilt für: alle Typen (nur im Player-Export)
| Property | Beschreibung | Typ |
|---|---|---|
animation.enabled |
Animation aktiv | boolean |
animation.type |
Animationstyp | fade/slide/zoom/etc. |
animation.duration |
Dauer in ms | number |
animation.delay |
Verzögerung in ms | number |
animation.easing |
Timing-Funktion | string |
4. Datenformate
4.1 Text (Scalar)
{ "Titel": "Beispieltext" }
4.2 Listen (Array)
{
"Bullets": ["Punkt 1", "Punkt 2", "Punkt 3"]
}
Oder als Pipe-separierter String: "Punkt 1|Punkt 2|Punkt 3"
4.3 Tabellen (Object-Array)
{
"Daten": [
{ "label": "Länge", "value": "120 cm" },
{ "label": "Breite", "value": "80 cm" }
]
}
4.4 Chart-Daten
{
"verkaufszahlen": [
{ "label": "Januar", "value": 125000 },
{ "label": "Februar", "value": 142000 }
]
}
4.5 Verschachtelte Objekte (Value/Unit Pattern)
{
"Merkmale": {
"Gewicht": { "value": "4,8", "unit": "KG" },
"Höhe": { "value": "180", "unit": "CM" }
}
}
5. Zusammenfassung: Web-Only Features
Die folgenden Elemente und Features funktionieren nur in Web-basierten Exporten (Player, Website, Microsite):
| Feature | Grund |
|---|---|
video |
Browser-Wiedergabe erforderlich |
audio |
Browser-Wiedergabe erforderlich |
map |
Live-Kartenrendering via OpenStreetMap |
location |
Netzwerkzugriff für Nominatim API |
api |
Netzwerkzugriff für externe APIs |
chart |
Chart.js Canvas-Rendering im Browser |
| Animation | CSS/JS Animation nur im Browser |
| TTS | Web Speech API nur im Browser |
Tipp: Für statische Exporte (PDF, PPTX, Word) diese Elemente vermeiden oder Alternativen nutzen (z.B. Screenshot einer Karte als Bild).
Dokumentation generiert am: Januar 2026 Publixx Version: ~135.000 Lines of Code, 151 Module