Pro Editor

Vollzugriff auf Overlay-HTML/CSS/JS. Fuer Streamer, die genau wissen was sie wollen.

Pro Editor Grundlagen

Pro Editor Grundlagen

Der Pro Editor liegt unter /overlay/editor.php und ist server-side PHP plus ein Canvas-basierter JS-Editor. Im Gegensatz zum Builder arbeitest du hier pixelgenau auf einer 1920×1080-Fläche.

Aufbau

Drei-Spalten-Layout:

Dazu Top-Bar mit « Speichern », « Szene »-Selector, « Vorschau », « Browser-Source-URL », « Versionen ».

Element platzieren

Linkes Panel: Element ziehen, auf Canvas droppen. Position via Drag oder im rechten Panel direkt als x, y, width, height in Pixel eintragen.

Getting startet, kommt schnell der Reflex zum Drag - aber pixelgenaue Werte sind oft schneller, vor allem für Wiederholungen ("alle Text-Elemente auf x=120").

Z-Order

Unten in der Mitte: Layer-Liste. Element selektieren, Pfeile « Nach oben » / « Nach unten ». Oben in der Liste = vorne im Stack.

Tastenkürzel:

Szenen

Oben: Szenen-Selector. + Neue Szene legt eine zusätzliche Szene im selben Overlay an. Szenen teilen sich Browser-Source-URL und Token. Das aktive Szenen-Wechseln steuerst du in OBS - du wählst, welche Szene gerade rendert, über die URL-Parameter:

/overlay/view.php?token=<token>&scene=gameplay

Oder ohne scene-Parameter rendert die als "Default" markierte Szene.

Versionen

« Versionen » zeigt die Historie. Jedes « Speichern » legt einen Eintrag an mit Timestamp + User. « Wiederherstellen » lädt eine alte Version in den Editor - bestätigen + speichern, dann ist die alte Version wieder aktiv.

Versionen helfen vor allem bei:

Token rotieren

« Sicherheit » → « Token erneuern ». Achtung: alle existierenden Browser-Quellen bekommen sofort HTTP 401. Du musst die neue URL nach OBS kopieren.

Useful, wenn:

Tastenkürzel

Kürzel Aktion
Strg+Z Undo
Strg+Y / Strg+Shift+Z Redo
Strg+C / Strg+V Copy / Paste Element
Strg+D Element duplizieren
Entf Element löschen
[ / ] Z-Order
Pfeiltasten Element 1 px verschieben
Shift+Pfeil 10 px verschieben
Strg+S Speichern

Undo / Redo greift auf den letzten 50 Aktionen, browser-lokal (kein Server-Roundtrip). Beim Reload ist die Undo-Historie weg, die Versionen-Liste nicht.

Vom Builder zum Pro Editor

Vom Builder zum Pro Editor

Wenn du im Builder gestartet bist und an dessen Grenzen stößt, lohnt der Wechsel. Diese Seite erklärt den Migrations-Workflow ohne Datenverlust.

Wann lohnt der Wechsel

Typische Symptome, die für den Pro Editor sprechen:

Import-Workflow

  1. Im Dashboard /dashboard/overlays öffnen.
  2. Bei dem Builder-Overlay auf « Aktionen » → « In Pro Editor importieren ».
  3. Es entsteht ein neues Overlay (das Builder-Original bleibt unangetastet, falls du zurück willst).
  4. Name des neuen Overlays anpassen (z. B. Suffix _pro).

Der Import übernimmt:

Der Import übernimmt nicht:

OBS-URL aktualisieren

Da der Token neu ist, musst du in OBS die Browser-Source-URL austauschen:

  1. Pro Editor → « Browser-Source-URL » kopieren.
  2. OBS, Quellen-Liste, Rechtsklick auf bestehende Browser-Quelle → Eigenschaften.
  3. URL ersetzen, OK.
  4. Quelle aktualisiert sich automatisch.

Alternative: das alte Builder-Overlay parallel laufen lassen, in OBS eine zweite Szene mit dem neuen Pro-Overlay anlegen, beide ein paar Streams nebeneinander testen, dann das alte abschalten.

Rückweg

Gibt es nicht. Pro-Editor-Overlays können nicht in den Builder zurückgewandelt werden, weil sie Features nutzen (Szenen, Z-Order, Custom-CSS), die der Builder nicht abbildet.

Deshalb: das Builder-Original nicht löschen, bis du im Pro Editor ein paar Streams ohne Probleme hattest. Im Notfall ist es dein Rollback.

Sauberer Schnitt

Wenn du den Pro Editor mehrere Wochen produktiv genutzt hast und nichts vermisst: Builder-Original archivieren (/dashboard/overlays → « Archiv »). Archivierte Overlays werden nicht mehr gerendert (URL wird 410), zählen nicht auf dein Overlay-Limit, lassen sich aber innerhalb von 90 Tagen wiederherstellen.

Templates statt Re-Import

Wenn du nicht migrieren, sondern "das Builder-Layout als Startpunkt für mehrere Pro-Overlays nutzen" willst: aus dem importierten Pro-Overlay ein Template machen (« Speichern als Template »). Dann kannst du in /v1/overlay-templates/ darauf zugreifen und neue Overlays als Klone anlegen.

Verfuegbare APIs im Overlay

Verfügbare APIs im Overlay

Der Pro Editor spricht mit dem Backend über ein paar REST-Routen. Wenn du "nur" Overlays baust, brauchst du nichts davon - aber wenn du ein Custom-Element scripten oder mit der Chatlix-API automatisieren willst, ist hier der Überblick.

Overlay-Routen

Alle Routen unter /v1/overlays/. Authentifizierung: API-Token im Header Authorization: Bearer <token>, anlegbar unter /dashboard/api-tokens.

Route Methode Zweck
/v1/overlays GET Alle Overlays des Accounts auflisten
/v1/overlays/{id} GET Einzelnes Overlay laden (Definition + Metadaten)
/v1/overlays POST Neues Overlay anlegen
/v1/overlays/{id} PUT Definition updaten
/v1/overlays/{id} DELETE Overlay löschen
/v1/overlays/{id}/duplicate POST Klon mit eigenem Token
/v1/overlays/{id}/versions GET Historie
/v1/overlays/{id}/elements GET / POST / PUT Element-CRUD direkt (für scripted edits)
/v1/overlays/{id}/regen-token POST Browser-Source-Token rotieren

Szenen

Separat unter /v1/overlay-scenes/:

Route Methode Zweck
/v1/overlay-scenes/{overlay_id} GET Szenen eines Overlays
/v1/overlay-scenes/{overlay_id} POST Neue Szene
/v1/overlay-scenes/{id}/duplicate POST Szene innerhalb desselben Overlays klonen

Templates

/v1/overlay-templates/ bietet die geteilte Template-Library:

Route Methode Zweck
/v1/overlay-templates GET Alle eigenen + öffentliche Templates
/v1/overlay-templates POST Aus Overlay ein Template machen
/v1/overlay-templates/{id}/apply POST Template auf neues Overlay anwenden

Builder

Der Builder spricht mit einer eigenen Route /v1/overlay-builder/ - die wird ausschließlich von der SvelteKit-Komponente konsumiert und ist nicht Teil der offiziellen API. Wenn du Builder-Layouts programmatisch erzeugen willst, der saubere Weg ist: über /v1/overlays ein Layout im Pro-Editor-Format anlegen.

Camera-Sync

/v1/cam/ ist die Camera-Sync-API. Sie hält Cam-Frames in mehreren Quellen (z. B. Webcam + Telefon-Cam + Capture-Card) in Sync.

Route Methode Zweck
/v1/cam/sources GET Verfügbare Cam-Quellen
/v1/cam/active POST Aktive Quelle setzen

Das Camera-Element im Pro Editor zeigt automatisch die gerade aktive Quelle. Wechsel = ein POST.

WebSocket

Laufzeit-Updates (Alerts, Counter, Hype-Train) kommen über WebSocket. Das ist intern und nicht als öffentliche API dokumentiert - die Browser-Source verbindet sich selbst. Wenn du custom JS in einem Pro-Editor-Element schreibst, kannst du das globale Chatlix -Objekt im Render-Kontext nutzen:

Chatlix.on('follow', (event) => {
  console.log('Neuer Follower:', event.username);
});

Das funktioniert nur im Render-Kontext (/overlay/view.php), nicht im Editor-Preview.

Pro Editor Troubleshooting

Pro Editor Troubleshooting

Die häufigsten Probleme im Pro Editor und ihre Lösungen.

Editor lädt nicht / weißer Bildschirm

Element lässt sich nicht verschieben

Speichern schlägt fehl

Browser-Source bleibt schwarz

  1. URL prüfen: enthält ?token= und ist vollständig?
  2. Token noch gültig? Im Editor « Browser-Source-URL » neu kopieren, vergleichen.
  3. Im Browser direkt öffnen: dieselbe URL in Chrome/Firefox eingeben. Wenn dort das Overlay erscheint, liegt's an OBS - Refresh cache of current page. Wenn auch im Browser schwarz: Editor-Layout prüfen.
  4. Debug-Modus aktivieren (« Debug » im Editor), Browser-Source neu laden, Konsole im Browser-Source-Inspektor (in OBS: Rechtsklick → Interact → F12) zeigt Trace-Logs.

Animation läuft nicht / ruckelt

Counter zeigt falsche Zahl

Versions-Rollback macht nichts

Pro Editor öffnet sich aus dem Builder mit leerem Canvas

Wenn nichts hilft

Debug-Logs ziehen:

  1. Editor öffnen, « Debug » aktivieren.
  2. Fehler reproduzieren.
  3. « Debug-Logs herunterladen ».
  4. Datei beim Support anhängen.

Die Logs enthalten Element-IDs, API-Responses und Browser-Konsole. Keine Passwörter, keine Tokens (Token wird vor Export geschwärzt).