Pro Editor Grundlagen

Der Pro Editor ist der Overlay-Editor unter /overlay/editor.php?id=<overlay_id>. Du erreichst ihn nie durch freies Eintippen der URL, sondern über /dashboard/overlays: dort klickst du auf einer Overlay-Karte auf ✨ Im Pro Editor öffnen. Das öffnet den Editor in einem neuen Tab. Technisch ist es eine server-seitig gerenderte PHP-Seite mit einem Canvas-basierten JS-Editor obendrauf. Du arbeitest pixelgenau auf einer Canvas, deren Größe pro Overlay festgelegt ist (Standard 1920×1080, andere Auflösungen sind je nach Overlay möglich — steht direkt neben dem Overlay-Namen in der Titelzeile).

Wichtig, falls du aus älteren Anleitungen oder von Kollegen etwas anderes gehört hast: Es gibt keinen separaten "kostenlosen" und "Pro"-Editor mehr, zwischen denen du als Premium-Feature wechselst. Der Pro Editor ist der einzige aktive Overlay-Editor für alle Accounts, unabhängig vom Plan. Was sich nach Plan unterscheidet, ist ausschließlich die Anzahl der Elemente, die du in ein Overlay packen darfst (siehe unten). Details zur Geschichte und zum inzwischen abgeschalteten Overlay Builder findest du auf Vom Builder zum Pro Editor.

Aufbau der Editor-Oberfläche

Drei-Spalten-Layout, oben eine Top-Bar:

Bereich	Inhalt
Top-Bar	Zurück-Link zur Übersicht, Overlay-Name (editierbar), Canvas-Größe, Twitch-Channel-Bindung (Pille mit 🔗/⚠), sowie rechts: Undo/Redo/Copy/Paste, Raster-Toggle, Vorlagen-Galerie, OBS-URL, Versionen, Speichern
Links	Element-Palette (nach Kategorien mit Trennlinien gruppiert), darunter Szenen-Manager-Button, darunter die Layer-Liste mit Elemente-Zähler
Mitte	Szenen-Tab-Leiste direkt über dem Canvas, darunter die Canvas-Fläche
Rechts	Eigenschaften-Panel des aktuell gewählten Elements (bei Mehrfachauswahl: Bulk-Eigenschaften)

Es gibt keinen separaten "Vorschau"-Button in der Top-Bar (falls du danach suchst: die Canvas selbst ist bereits die Live-Vorschau, inklusive echter Chat-/Event-Daten, sobald ein Twitch-Channel gebunden ist). Ohne gebundenen Channel bleibt die Live-Vorschau leer — die Channel-Pille oben links zeigt dir das mit einem ⚠-Icon an, ein Klick darauf öffnet den Bindungsdialog.

Element-Palette: was du wirklich reinziehen kannst

Die Palette ist deutlich umfangreicher, als man auf den ersten Blick denkt. Aktuell (Stand dieser Seite) stehen dir zur Verfügung:

Text & Medien: Text, Box, Bild, Bilder-Slider
Kamera & Chat: Kamera (Camera-Sync-Quelle), Chat, Alert
Zähler & Ziele: Follower-Zähler, Sub-Zähler, Viewer-Zähler, Donation-Goal, Custom-Counter
Widgets: Poll/Umfrage, Hype-Train, Event-Liste, Leaderboard, Timer, Goal-Widget, Flip-Uhr
Fußball-Widgets: Live-Spielstand, Match-Center/Aufstellung, Tor-Ticker, Match-Info, WM-Wetten, Match-Insights (nützlich, wenn du zu Turnierzeiten streamst)
Sonstiges: Sponsor/Werbung, Latest-Label (letzter Follower/Sub/Tip/Raid/Cheer/Top-Spender), Giveaway, Stream-Pet

Klick auf ein Element in der Palette platziert es mittig auf der Canvas. Position danach per Drag oder direkt im rechten Panel als x/y/width/height in Pixel eintragen — bei Wiederholungen ("alle Text-Elemente auf x=120") ist Tippen fast immer schneller als Ziehen.

Element-Limit nach Plan

Jedes Overlay hat ein Maximum an Elementen, das sich nach deinem Abo richtet. Der Zähler oben in der Layer-Liste zeigt dir live aktuell/Limit:

Plan	Elemente pro Overlay
Free / Starter	20
Creator / Pro	50
Pro Max / Elite / Studio	100
Team	150 (absolutes Hardlimit für alle Pläne)

Beim Erreichen des Limits blockt der Editor das Hinzufügen neuer Elemente mit einem Toast ("Element-Limit erreicht (X/Y). Lösche unnötige Elemente oder erhöhe dein Limit."). Es ist kein Bug und keine Bandbreiten-Bremse — reduzier die Elementzahl oder splitte das Layout in mehrere Szenen, bevor du ein Upgrade in Erwägung ziehst.

Element platzieren

Linkes Panel: Element anklicken, es landet mittig auf der Canvas. Ziehen zum Verschieben, Eckpunkte zum Skalieren, oder rechts im Eigenschaften-Panel x, y, width, height direkt als Zahl eintragen. Bei Mehrfachauswahl (Shift-Klick oder Rahmen aufziehen) erscheint rechts ein Bulk-Panel mit gemeinsamen Feldern.

Z-Order (Ebenen-Reihenfolge)

Jedes Element hat ein Z-Index-Feld im Eigenschaften-Panel — höherer Wert liegt weiter vorne. Bei Mehrfachauswahl gibt es im Bulk-Panel Buttons für ▲ (eine Ebene vor), ▼ (eine Ebene zurück), sowie zwei Buttons, die den Z-Index direkt auf das Maximum bzw. auf 0 setzen (ganz nach vorne / ganz nach hinten). Es gibt keine Tastenkürzel [/] für die Z-Order — falls du die aus einer alten Notiz kennst, die stimmen nicht mehr (oder haben nie gestimmt). Nutze das Z-Index-Feld oder die Bulk-Buttons.

Raster & Snap

Taste G blendet ein visuelles Raster ein/aus. Shift+G schaltet Snap-to-Grid um (Elemente rasten beim Ziehen am Raster ein) — hältst du beim Ziehen zusätzlich Shift gedrückt, wird Snap kurzzeitig deaktiviert, falls du mal exakt "dazwischen" positionieren willst. Beide Zustände zeigt ein kurzer Toast unten an.

Szenen

Über der Canvas findest du eine Szenen-Tab-Leiste; zusätzlich gibt es links den Button 🎬 Szenen-Manager für die Übersicht mit Presets (Starting Soon, Just Chatting, Gameplay, BRB, Stream Ending). Wichtig, weil hier viele stolpern: Szenen teilen sich dieselbe OBS-Browser-Source-URL. Es gibt keinen ?scene=-URL-Parameter, mit dem du in OBS zwischen Szenen umschalten könntest. Stattdessen schaltest du die aktive Szene im Dashboard/Editor um; in OBS reicht danach ein einmaliger Rechtsklick auf die Browser-Quelle → Cache der aktuellen Seite aktualisieren, damit der neue Stand geladen wird. Neue Szene anlegen: im Szenen-Manager Namen eintippen und 💾 Aktuelles Layout als Szene klicken, oder direkt eines der Presets wählen.

Vorlagen-Galerie

Der Button 🎨 Vorlagen öffnet /overlay/templates.php — die kuratierte Template-Bibliothek von chatlix. Das sind vorgefertigte Layouts, die du mit einem Klick als neues Overlay übernehmen kannst (technisch: POST /v1/overlay-templates/{id}/use). Wichtig: Es ist derzeit keine Funktion vorhanden, mit der du dein eigenes Overlay als Template speicherst — die Galerie ist eine Einbahnstraße von chatlix zu dir, nicht umgekehrt.

Versionen

🕘 Versionen in der Top-Bar öffnet den Versions-Verlauf. Jedes 💾 Speichern legt automatisch eine neue Version an. Klick auf Wiederherstellen bei einer alten Version fragt zur Bestätigung, legt vom aktuellen Stand vorher selbst noch eine Sicherungsversion an und stellt dann sofort den alten Stand her — das passiert direkt beim Klick, ohne dass du danach noch extra auf Speichern klicken musst. Mehr Details dazu (inklusive was schiefgehen kann) auf Pro Editor Troubleshooting.

OBS-URL und Token rotieren

Es gibt keine eigene "Sicherheit"-Sektion im Editor. Klick auf 🔗 OBS-URL in der Top-Bar öffnet ein Modal mit der fertigen Browser-Source-URL (Format /overlay/view?id=<id>&token=<64-stelliger Hex-Token>) zum Kopieren, plus dem Button ↻ Token rotieren (alte URL ungültig) direkt im selben Modal. Rotieren erzeugt sofort einen neuen Token; die alte URL zeigt danach nicht mehr das Overlay, sondern eine Setup-Hinweiskarte (kein HTTP-401 im normalen Browser-Aufruf) — du musst die neue URL in OBS eintragen. Sinnvoll, wenn ein Co-Streamer das Team verlässt oder der Token versehentlich sichtbar wurde (z. B. in einem Discord-Screenshot).

Tastenkürzel

Kürzel	Aktion
Strg+Z	Undo
Strg+Y / Strg+Shift+Z	Redo
Strg+C / Strg+V	Copy / Paste Element
Strg+S	Speichern
Entf / Rücktaste	Ausgewählte Elemente löschen
G	Raster ein/aus
Shift+G	Snap-to-Grid ein/aus
Pfeiltasten	Element(e) 1 px verschieben
Shift+Pfeil	Element(e) 10 px verschieben

Es gibt kein Strg+D zum Duplizieren als globales Tastenkürzel — Duplizieren geht über den ⎘ Duplizieren-Button im Bulk-/Eigenschaften-Panel bei ausgewählten Elementen. Undo/Redo greift auf einen browser-lokalen History-Stack (kein Server-Roundtrip); beim Neuladen der Seite ist die Undo-Historie weg, die serverseitige Versionen-Liste dagegen nicht.