Discord Webhook Embed Builder • Live Notifications Made Easy [WEB•UI]

sorylokan · February 17, 2026, 11:10pm

Description

WEB•UI (or webwui for friends) is a project born from the desire to make Discord announcements and event notifications feel more personal and intimate, especially for live streams powered by Streamer.bot.

The goal is to give people full creative control over how their messages look and feel, instead of relying on generic Discord bot announcements. In that sense, WEB•UI aims to replace – or at least offer an alternative to – bots like Wizebot, Streamcord, MEE6, Pingcord, and similar tools.

Technically, WEB•UI is a combination of:

a web-based interface
and Streamer.bot actions

The web interface generates a JSON payload that is stored in a global variable inside Streamer.bot.
This payload is then used by a custom C# script I wrote, which can either send or edit a Discord message (typically via webhooks).

The idea behind creating a complete visual embed system came from a personal frustration:
Streamer.bot currently provides a “Basic Webhook” action that only sends plain text messages. While functional, it feels very limiting when you want rich, expressive Discord embeds.

WEB•UI exists to fill that gap – turning webhook embeds into a first-class, visual, and reusable part of Streamer.bot workflows.
It focuses on a visual-first workflow:

What you see in the interface is what Discord will show.

Video Tutorial

External Media

Import File

WEBWUI-import.sb | attachment (17.0 KB)

Resources

Web UI interface
https://sorylokan.github.io/content/streamerbot/web-ui/
Import String (GitHub) In case you haven’t been able to download it before
https://github.com/Sorylokan/sorylokan.github.io/blob/main/content/streamerbot/web-ui/Script/WEBWUI-import.sb
Detailed Project Page
https://sorylokan.github.io/?p=content/streamerbot/extensions/webhook-embed-builder

Installation

Importing the `.sb` file

In Streamer.bot, click the Import button in the top menu.
Drag the WEBWUI-import.sb file into the Import String field.

Additional Setup

Ensure the Streamer.bot WebSocket is enabled.
Open the WEB•UI interface in your browser.
Connect to Streamer.bot using the Connect button (top-right).
Build your embed visually (colors, fields, images, etc.).
Click Save to Streamer.bot.

The webhook payload is now stored in a global variable.

Configuration

Global Variable

By default, WEB•UI stores the webhook payload in the following global variable: WEBWUI_WebhookPayload

You can save and use different payload names.
If you want to use a custom variable name for a payload, add a “global (get)” sub-action like so:

Retrieve your variable using Core > Globals > Global (get)
Set Variable Name to your custom variable (e.g., MyCustomPayload)
Set Destination Variable to WEBWUI_WebhookPayload

image637×542 19.5 KB

Using the Payload in an Action

To send or edit an embed:

Add a Core > C# > Execute C# Method action
Method Group: [WEB•UI] > Mode
Method:
- SendOnly → Send only
- EditMode → Edit an existing message

Supported Variable System

WEB•UI supports dynamic variables inside embed fields:

Global variables ~myGlobalVar~
Action arguments %myActionArg%

How It Works

Open the web interface
Build your embed visually
Preview it in real time
Save it to Streamer.bot
Use it in any action

From design to automation in under 5 minutes.

Changelogs

WEB•UI INTERFACE v1.4.0

[02-03-26] # WEBUI-Builder (v1.4.0 - Copy JSON Enhancement)
+ Added:
  • Ctrl+Click support on "Copy JSON" button for compact (one-line) JSON output
  • Normal click: copies formatted JSON (indented, readable)
  • Ctrl+Click: copies minified JSON (one line, compact)
  • Notification feedback adapts to copy mode (shows "compact" when Ctrl is used)

**Impact**: Enhanced flexibility for JSON copying, supporting both human-readable and compact formats for different use cases

===

[01-31-26] # WEBUI-Builder (v1.3.2 - Architecture & Bug Fixes)
* Fixed:
  • Thumbnail not updating in preview when URL is removed or cleared
  • Thumbnail not reappearing when URL is re-added
  • Payload not including empty fields (prevented Discord message edits from removing deleted fields)
+ Added:
  • Dedicated modals.js module for modular modal management
~ Changed:
  • Modals: moved from 160+ lines of HTML in index.html to modular modals.js (6 modals now dynamically generated)
  • Thumbnail rendering: improved dynamic creation/removal based on URL presence
  • ModalsManager class: centralized modal initialization and management
  • buildJSON(): now always includes all fields (content, username, avatar_url, embeds) even when empty
  • Payload structure: empty fields are sent with `null` or empty string to allow backend to detect field deletions

**Impact**: Cleaner HTML structure, modular components architecture, better thumbnail preview behavior, proper field deletion support for message edits

===

[01-30-26] # WEBUI-Builder (v1.3.0 - "Less is More" UI Refinement & Theme System)
* Fixed:
  • Discord-like markdown rendering in preview
  • Image bouncing/flashing occurring at each letter input
  • Embed Fields not displaying correctly
  • Thumbnail alignment issues
  • Footer alignment issues
  • Preview window rendering glitches
  • Author fields appearing before Body fields (field order)
  • Timestamp dropdown text readability (was white on light gray)
  • Notifications color adaptation to light/dark themes
  • Embed preview background adaptation to themes
  • Color picker functionality
+ Added:
  • Dark/Light theme switcher with moon/sun icon in header
  • Theme persistence via localStorage
  • Dedicated theme.js module for theme management
  • Custom SVG chevron for select dropdowns
~ Changed:
  • Timestamp UI: replaced 2 checkboxes with single dropdown (None/Auto/Custom)
  • Color picker: redesigned as Pickr Nano style (color square + hex input side by side)
  • Field inline checkbox: moved to same line as Name input for compact layout
  • Theme colors: aligned with main site tokens (dark and light themes)
  • CSS tokens: added :root[data-theme="light"] selector system
  • Select elements: custom styling with appearance:none and SVG arrow
  • Web-UI Footer updated with link to Streamer.bot website

**Impact**: Streamlined "less is more" interface, full theme support matching main site design, improved UX clarity and visual consistency

===

[01-28-26] # WEBUI-Builder (v1.1.0 - Discord Markdown Support)
* Fixed:
  • Thumbnail alignment
  • Footer alignment
  • Preview window glitch
  • Author fields appearing before Body fields (field order)
+ Added:
  • Discord Title markdown support (h1, h2, h3, -h) to preview and embed
~ Changed:
  • CSS adjustments for the preview rendering

**Impact**: Markdown support for Discord formatting, improved visual consistency

===

[01-28-26] # WEBUI-Builder (v1.0.1 - Layout & Display Fixes)
* Fixed:
  • Thumbnail alignment
  • Footer alignment
  • Preview window glitch
  • Author fields appearing before Body fields
~ Changed:
  • CSS adjustments for the preview rendering

**Impact**: Improved visual consistency and layout stability

===

[01-27-26] # WEBUI-Builder (v1.0.0 - Initial Release)
+ Added:
  • Visual web interface for Discord embed builder
  • Real-time Discord preview
  • Streamer.bot WebSocket integration
  • JSON import / export functionality
  • Multiple embeds & fields support
  • Dynamic Streamer.bot variables
  • Optimized C# sender script
- Removed:
  • Herobrine (But... He was there!?)

**Impact**: Complete Discord embed builder with real-time preview and Streamer.bot integration

WEB•UI SCRIPT v1.1.2

[02-14-26] # WEBWUI-Sender (v1.1.2 - Retry Flow & Logging Cleanup)
+ Added:
  • `GetRetryDelayMilliseconds()` to compute retry delay from headers or JSON
  • `Truncate()` helper for consistent log truncation
  • `EnsureWaitTrue()` to append `wait=true` to webhook URLs for message ID parsing
  • Added `System.Linq` import for header parsing
~ Changed:
  • Replaced duplicated direct HTTP POST handling with centralized `PostWithRetryAsync()` to handle 429 retry logic using `Retry-After` header or JSON `retry_after`
  • Simplified `SendWebhookAsync()` and `SendWebhookWithIdStorageAsync()` to use the new retry flow and store message ID/timestamp when present
  • Improved logging to truncate long response bodies

**Impact**: Unified retry logic with proper rate-limit handling, consistent message ID capture, and cleaner logs

===

[01-31-26] # WEBWUI-Sender (v1.1.1 - Critical Fixes & Full Replace EditMode)
* Fixed:
  • Timestamp not being replaced in EditMode when `__AUTO_TIMESTAMP__` placeholder present (critical)
  • JSON injection vulnerability: special characters in variables/arguments now properly escaped via `JsonConvert.ToString()`
* Added:
  • `NormalizeEditPayload()` ensures EditMode behaves as true full-replacement: missing `content`, `embeds`, or `fields` are explicitly cleared instead of Discord keeping old values
* Changed:
  • `ReplaceAutoTimestampsWithValue()` now called after `RestoreTimestampInPayload()` in EditMode pipeline
  • EditMode PATCH now sends complete payload with explicit empty values for removed fields

**Impact**: EditMode now intuitive and predictable - what you see in UI matches Discord perfectly, JSON payloads secure against injection attacks

===

[01-31-26] # WEBWUI-Sender (v1.1.0 - HttpClient Refactor & URL Override)
* Fixed:
  • Resolved resource leak issue caused by creating new HttpClient instance on every webhook send
  • Fixed socket pool exhaustion that could cause "Address already in use" errors under high webhook frequency
  • Fixed "This instance has already started one or more requests" error by moving property initialization to static constructor
+ Added:
  • Implemented static readonly HttpClient field for connection reuse across all webhook methods
  • Added static constructor to initialize HttpClient properties once at startup
  • Webhook URL argument now takes priority over payload `WebHookUrl` for dev/test/prod workflow
~ Changed:
  • Refactored `SendWebhookAsync()`, `SendWebhookWithIdStorageAsync()`, and `EditExistingMessageAsync()` to use shared HttpClient instance
  • Removed `using` statements around HttpClient (no longer needed with static instance)
  • Moved `Timeout` and `DefaultRequestHeaders` initialization from individual methods to static constructor
  • Inverted priority logic: `WEBWUI_WebhookURL` argument now overrides payload value for consistency
- Removed:
  • Eliminated redundant `using (HttpClient client = new HttpClient())` blocks in all three HTTP methods
  • Removed per-request header and timeout modifications

**Impact**: Complete fix for concurrent webhook execution, stable EditMode functionality, cleaner dev/test/prod workflow, significant performance improvement under load