MediaSFU Blog

Introducing Widget Studio: Design MediaSFU Widgets Before You Publish

· Guide

Introducing Widget Studio: Design MediaSFU Widgets Before You Publish

A manual-first visual editor for MediaSFU widgets with real state previews, optional AI handoff, and a clean CSS/JSON handoff into Widget Builder.

Why Widget Studio Exists

Most widget customization flows break in the same place: you change configuration in one tool, preview something approximate in another, and only find the real issues after you save and publish.

Widget Studio closes that gap. It gives you a dedicated design surface for MediaSFU widgets so you can edit visually, inspect real user-facing states, and verify the experience before it reaches production.

💡 The key idea Widget Studio is manual-first. AI assist is available, but it is not required. You can work entirely through the visual controls, preview canvas, and inspector.

What You Can Design Today

Widget Studio currently opens with Studio-ready templates for the widgets teams customize most often:

Template What You Can Verify
Click-to-Call Idle, info-form, authenticating, ringing, connected, and error states.
Meeting Join Entry flow, labels, layout, and join-facing UI before embed.
AI Agent Shell appearance, content presentation, and visible interaction states.
AI Agent Plus Richer branded surfaces and more advanced layout/content combinations.
Agents Dashboard Operational layout, session views, transcript surfaces, and guide-facing UI.

Widget Studio currently covers five of our six core widgets. The remaining core widget, Calls (Cloud Phone / SoftPhone), is in progress and will be available soon.

What Makes Widget Studio Different

1. It is manual-first

Use the left controls for widget-level settings, the center preview for direct selection, and the right inspector for precise edits. No prompt engineering needed to get started.

2. You preview real states, not just a static mockup

The workflow is built around the screens real users actually see. That helps you catch spacing, hierarchy, copy, and interaction issues before they land in production.

3. AI assist is available when you want it

Copy the AI Handoff Prompt to give your model current config plus rendered preview context. Ask for CSS or JSON, then bring the results back into Studio.

4. The output is portable

Studio is the design surface. Widget Builder is where the final widget configuration lives. The handoff is explicit: copy Custom CSS and Custom JSON Overrides into Builder advanced fields.

How the Workflow Actually Works

  1. Choose a template in Widget Studio.
  2. Edit directly in Studio using controls, preview selection, and inspector refinements.
  3. Switch flows and states until the exact user-facing screen looks right.
  4. Optionally use AI handoff if you want help generating CSS or JSON changes.
  5. Keep the results in Studio as Custom CSS and Custom JSON Overrides.
  6. Apply them in Widget Builder via advanced customization fields, then save and publish.

What Actually Carries Forward

Output Use It For Where It Goes
Custom CSS Spacing, color, typography, borders, surfaces, shadows, and state styling. Widget Builder → Advanced → Custom CSS
Custom JSON Overrides Labels, icons, copy, layout flags, and mapped content overrides. Widget Builder → Advanced → Custom JSON
AI Handoff Prompt Working context for your AI model. Useful for generating CSS or JSON, but not a publishable artifact on its own. Use externally, then bring the resulting CSS/JSON back into Studio or Builder

Who This Helps

  • Teams shipping faster: catch UI issues before they make it into a live widget.
  • Designers and operators: shape widget surfaces visually without touching code first.
  • Developers: use Studio for first-pass layout and state verification, then fine-tune through Builder and code where needed.

Try Widget Studio

Design in Studio first. Use AI only if you want it. Then ship the final CSS/JSON through Builder.

Open Widget Studio Read the Guide