CitrusTools v0.20.0: Visual Editor V3, StreamElements-Import & Chatbot-Updates

Ehrlich gesagt war es in den letzten Wochen etwas ruhiger als sonst – und dafür gibt es einen Grund: Fast die gesamte Entwicklungszeit ist in den Visual Editor V3 geflossen. Nicht in ein Quick-Feature, sondern in einen vollständigen Neuaufbau. V3 ist jetzt für alle Nutzer*innen freigeschaltet.

Wer den Designer öffnet, wird sofort merken, dass er sich grundlegend anders anfühlt als der bisherige Editor. Das ist Absicht.

Ein echter Editor – nicht nur ein Formular

V3 hat eine vollständige Editor-Oberfläche im Photoshop-Stil: dunkles Interface, Topbar mit allen wichtigen Aktionen, und drei Zonen – linkes Panel, Canvas in der Mitte, rechtes Panel. Was das von einem normalen Webformular unterscheidet: alle Panels sind verschiebbar.

Jedes Panel kann per Drag aus seiner Dock-Zone gelöst werden und schwebt dann frei über dem Canvas – inklusive Größenänderung per Ziehgriff. Wer mehr Platz für den Canvas braucht, schiebt die Panels einfach zur Seite oder dockt sie auf der anderen Seite an. Das Layout passt sich dem eigenen Workflow an, nicht umgekehrt.

• Frei verschiebbare Panels: Aus dem Dock lösen, frei positionieren, skalieren, wieder andocken (links oder rechts)
• 3-Spalten-Layout: Ebenen-Panel links, Canvas in der Mitte, Eigenschaften rechts – alles gleichzeitig sichtbar
• Accordion-Sektionen in jedem Panel: nur aufklappen, was man gerade braucht
• Topbar mit Overlay-Name, Zoom-Kontrolle, Undo/Redo und Speichern-Status
• Canvas-Auflösung frei wählbar: 1920×1080, 1280×720, eigene Größe oder aus einer Liste
• Design-Symbol pro Overlay für die Übersicht in der Bibliothek

Alertbox

Die Alertbox hat ein komplett überarbeitetes Konfigurations-Interface. Statt einer langen scrollbaren Liste gibt es jetzt Tabs und eine direkte Bearbeitung pro Variation – der Asset- und Sound-Picker ist direkt eingebaut, kein Wechsel zwischen Bereichen nötig.

Es gibt vier vorgefertigte Templates: Neon, Retro, Elegant und Clean. Der Canvas-Preview zeigt exakt, was später in OBS läuft – inklusive Animationen, Rahmen und Transparenz. Ein Test-Alert lässt sich direkt aus dem Editor an OBS senden.

• Vier Templates (Neon, Retro, Elegant, Clean) mit vollständiger OBS-Parität
• Asset- und Sound-Picker direkt pro Variation – kein Umweg mehr
• Farbpicker mit Transparenz-Slider
• Test-Alert direkt an OBS senden

Chatbox

Die Chatbox-Vorschau zeigt jetzt Emotes korrekt an – inklusive 7TV und BTTV. Pronomen erscheinen vor dem Doppelpunkt, der horizontale Ticker ist korrekt ausgerichtet, Demo-Badges funktionieren im Preview. Dazu kommen neue Overlay-Elemente, die direkt im Editor konfiguriert werden können.

• Emote-Rendering (Twitch, 7TV, BTTV) direkt im Canvas-Preview
• Neue Overlay-Elemente: Subathon-Timer, Chat-Highlights, Emote-Only-Modus, Goal-Meilensteine, Alert-Queue
• Announcements als eigenständiger Chat-Box-Typ
• Chatbox-Presets optisch klar unterscheidbar (Spiky, Angular, Boxed und weitere)

Custom Widgets

Custom Widgets verhalten sich im V3-Editor wie in StreamElements – fit-content ist standardmäßig aktiv, Code-Editor und Einstellungsformular sind direkt im Eigenschaften-Panel. Für den Test gibt es Live-Chat direkt im Editor: echte Nachrichten kommen rein, das Widget reagiert in Echtzeit.

• Live-Chat im Editor – Widget auf echte Nachrichten testen, ohne OBS öffnen zu müssen
• Widget-Command-Bridge: Widgets können auf Bot-Commands reagieren
• fit-content-Verhalten standardmäßig aktiv (SE-kompatibel)
• Code-Editor und Fields-Formular direkt im Widget-Panel

Globaler Emulator

Der Emulator ist jetzt ein schwebendes Panel, das alle Event-Typen gleichzeitig zugänglich macht – Follow, Sub, Bits, Raid und weitere. Es lässt sich wie jedes andere Panel frei positionieren und bleibt dabei immer über dem Canvas. Kein Menü mehr, kein Hin- und Herwechseln.

StreamElements-Import: Overlays und Punkte mitbringen

Wer von StreamElements zu CitrusTools wechselt, hat bislang vieles von Hand neu aufgebaut. Mit v0.20.0 gibt es dafür jetzt einen ersten Schritt.

Im Visual Editor (Bereich Streaming Tools) findet ihr ein Migrations-Tool, mit dem ihr bestehende SE-Overlays importieren könnt. Widgets werden dabei so gut wie möglich übersetzt – Chatboxen, Alertboxen und Custom Widgets werden direkt als CitrusTools-Elemente angelegt.

Zusätzlich lassen sich StreamElements Loyalty-Punkte über ein JWT-Token importieren. Punkte werden übernommen, Nutzerdaten bleiben erhalten.

• SE-Overlay-Import (einmalige Migration, direkt im Brand Manager)
• Chat- und Alertbox-Widgets werden automatisch übersetzt
• SE-Loyalty-Punkte-Import via JWT-Token

Hinweis: Die direkte Konvertierung bestehender V2-Overlays in V3-Overlays ist aktuell noch nicht möglich. Wir arbeiten daran – das wird eines der nächsten größeren Features.

Asset-Uploads: mehrere Dateien, sauberer Drag & Drop

In der Asset Library lassen sich Dateien jetzt mehrfach gleichzeitig hochladen. Die Uploads laufen nacheinander durch, mit einem klaren Fortschrittsindikator (z. B. „Upload 2/5"). Drag & Drop funktioniert jetzt auch zuverlässig auf allen Browsern. Gängige Formate wie PNG, JPG, GIF, WEBM und MP4 gehen direkt durch, ohne unnötige Konvertierung im Hintergrund.

/me-Nachrichten in Chat-Overlays

Wenn jemand im Chat /me benutzt, wurde das bisher wie eine normale Nachricht behandelt. Jetzt erkennt das Chat-Widget /me-Nachrichten und stellt sie anders dar – so wie es auch in anderen Chat-Clients aussieht.

Chatbot: Feedback-Updates

Auf Basis eures Feedbacks haben wir mehrere Dinge im Chatbot nachgezogen.

Mehrzeilige Command-Antworten: Wenn ihr in einem Command-Textfeld mehrere Zeilen schreibt (Enter-Taste), sendet der Bot jede Zeile als eigene Nachricht – mit kurzem Abstand dazwischen. Praktisch für Shoutouts oder Infobefehle, die strukturierter wirken sollen. Maximal fünf Zeilen pro Antwort.

Event-Alerts im Chat testen: In den Event-Alert-Einstellungen gibt es jetzt einen Button „Im Chat testen". Damit wird die Vorschau-Nachricht direkt als Bot in euren Chat gesendet – mit einem 🧪 [Test]-Prefix, damit es für Zuschauer:innen eindeutig ist.

Reaktionen: Hashtags werden erkannt: Beim Match-Typ „Ganzes Wort" hat der Bot bislang Trigger wie #Gewinnspiel oder #Fail nicht erkannt. Das ist jetzt behoben. Hashtags funktionieren damit als Reaktions-Trigger.

!roll ohne Spam: Bei mehr als 15 Würfeln erscheint jetzt eine kompakte Zusammenfassung (Gesamtwert, höchster und niedrigster Wurf), statt jedes Ergebnis einzeln aufzulisten.

• Chatgames-Punkte werden direkt in das Loyalty-System gebucht
• Trivia unterstützt einen Marathon-Modus mit konfigurierbarer Fragen-Anzahl
• Aktivitäts-Feed: einzelne Aktivitäts-Typen lassen sich gezielt ausblenden
• Shop-Einlösungen können eine eigene Chat-Nachricht auslösen
• Neuer Bot-Befehl zum Verschenken von Loyalty-Punkten an andere Nutzer:innen
• Chat-Statistiken: Top Commands erscheinen jetzt über Top Chatters/Emotes

Discord-Bot: Live-Rolle

Der Discord-Bot vergibt jetzt automatisch eine Live-Rolle an Mitglieder, die gerade auf Twitch streamen. Die Erkennung basiert auf dem Discord-Presence-Status und greift für alle Servermitglieder – nicht nur für den Channel-Owner. Die Rolle kann frei konfiguriert werden.

Kappa-Gen: Event-Trigger mit Emote-Auswahl

Im Kappa-Emote-Generator können Emotes jetzt direkt an Stream-Events gebunden werden. Über einen Emote-Picker wählt ihr aus, welche Emotes bei welchem Event fliegen sollen – inklusive Anzahl und Flugmuster.

Feedback-Bereich: eigenes Dashboard

Nutzer*innen können sich ab sofort direkt im Feedback-Bereich anmelden und haben dort ein eigenes Dashboard mit Benachrichtigungen – zum Beispiel wenn ein gemeldetes Ticket umgesetzt wurde.

Ausblick auf v0.21.0

Mit v0.20.0 haben wir einen großen Schritt beim Visual Editor gemacht und gleichzeitig viele Alltagsverbesserungen eingebaut. Als Nächstes geht es weiter mit dem Ausbau der SE-Importfunktionen, weiteren Chatbot-Features und Verbesserungen rund um Analytics und den Streamplaner.

Wenn euch noch etwas fehlt oder ihr uns Feedback zum Update geben möchtet, nutzt wie immer den Feedback-Bereich oder diskutiert direkt auf unserem Community-Discord.

Bis dahin, happy streaming! 💛