How to Build and Serve Web Pages with the Web Console

How to Build and Serve Web Pages with the Web Console

Build operator-facing web pages directly inside Backstage and serve them to any browser on the network. Use the built-in drag-and-drop page editor to lay out controls that connect to your show logic -- steppers, sequencers, volume faders, calibration controls, and live data bindings -- without writing code.

Note: This page covers the Web Console -- a first-class show-control entity with its own window and embedded page editor. It is not the same as the Node Editor Presenter (the drag rectangle inside a node graph). The Node Editor Presenter places ImGui widgets on a canvas for Backstage Hub operators; the Web Console produces HTML pages served over the network to any standard web browser. If you need the Node Editor Presenter, see Build a Presenter Interface for Operators.

[USER-ACTION-REQUIRED: Attach a screenshot of the Web Consoles window (left entity list + right page editor area) here]

Before you start

• Backstage is running and you have a project open
• The built-in web server is enabled (Settings > Webserver)
• If you want to bind page elements to node data, you have a node graph with labelled datatype nodes (String, Float, Int, Color, or Bang)
• If you want show-control blocks (Stepper, Sequencer, Broadcast Scheduler, Calibrator Lite, Output, Matrix Mixer), the corresponding entities or labelled nodes exist in your project

Steps

1. Open the Web Consoles window

Open the Web Consoles window from View > Web Consoles, or switch to the Web Console workview preset with Ctrl+5.

The window has two panes: a narrow entity list on the left and the page editor on the right.

2. Create a Web Console entity

In the entity list, click + Add Web Console. A new entity appears in the list with a default name (e.g. "Web Console 1"). Double-click the name to rename it.

The page editor loads immediately on the right. On a brand-new entity, the block palette opens automatically so you can start building.

3. Add blocks to the page

Drag blocks from the block palette (right sidebar of the page editor) onto the canvas. Blocks are grouped into categories:

Backstage (show-control blocks that reference entities directly):

• Stepper -- transport controls and step buttons bound to a Backstage stepper entity

• Sequencer -- play/pause/stop and progress bar bound to a sequence

• Broadcast Scheduler -- read-only week plan with legend, current time, and enable toggle

• Calibrator Lite -- start alignment, black level, cancel, status, progress, and snapshot restore

• Output -- audio output volume (master fader + optional per-channel faders + mute)

• Matrix Mixer -- audio matrix mixer volume and mute

Node (blocks that follow whatever entity a labelled node currently drives):

• Stepper (Node), Sequencer (Node), Broadcast Scheduler (Node) -- same controls as above, but bound by node label rather than entity

Ui Elements:

• Heading, Text Block, Text Input, Text Area, Image, Button, Slider, Color Picker, Divider, Link

Layout:

• 2 Columns, 3 Columns, Container, Section, Grid (configurable rows/columns), Sidebar Layout

Display:

• Badge, Progress Bar, Table (configurable rows/columns/header), Ticker (scrolling text)

Media:

• Video, Audio, Embed / iFrame

Each block shows a tooltip on hover describing what it does and how it binds.

[USER-ACTION-REQUIRED: Attach a screenshot of the block palette showing the Backstage and Ui Elements categories]

4. Configure block properties

Select any element on the canvas. Its properties appear in the right sidebar of the page editor (this is the GrapesJS component panel, not the Backstage Inspector).

• Show-control blocks (Stepper, Sequencer, etc.) are pre-bound to their entity when dropped. You can change the binding in the properties panel.

• Ui Elements can be bound to labelled datatype nodes using the Value Node, Text Colour Node, Background Node, and Click Node dropdowns. These bindings make the element update live from the node graph.

• Tables and Grids have Columns and Rows properties to resize the grid. Table cells are drop targets -- drop other blocks into them.

• Images use a Source dropdown to pick from page media files. Drag an image file onto the canvas to add it; local file:// images are embedded automatically so the page works on any machine.

5. Manage multiple pages

The page editor has a page tab bar above the canvas.

• Click + to add a new page

• Double-click a tab to rename a page

• Right-click a tab for Set as Default, Duplicate, or Delete

The default page (marked with a * prefix on its tab) is served when a browser visits the base serve path.

6. Apply your changes

Use the toolbar buttons at the top of the page editor:

If you click Open in Browser or Open in Window while there are unsaved changes, Backstage warns you and offers to save first.

7. Configure serving in the Inspector

Select the Web Console entity in the list. Its properties appear in the Inspector on the right side of the main Backstage window under a Web Console header.

A green status dot next to the entity name in the list indicates the page is being served. A red/stopped dot means it is not.

8. Open the page from a browser

Once Serve on web server is enabled and a Serve path is set, any device on the same network can open:

http://<server-hostname>:<port>/<serve-path>

The port is the Brainsalt API port (shown in Settings). The page updates live -- show-control blocks reflect real-time state, and datatype-node bindings push changes automatically.

Options explained

Page editor blocks -- datatype binding

Any UI element that supports bindings shows these dropdowns in its component properties:

Page body background

Select the page body (click the empty canvas area) to access per-page background properties:

Theming (CSS variables)

The page and all control blocks reference a set of CSS variables for consistent styling. Export the theme to see (and edit) these variables:

Quick-switch colour presets are available per control block: Brainsalt Blue, Deep Blue, Cyan, Orange, Amber, Green.

Common Mistakes

• Page shows stale content after editing -- You edited the page but did not click Apply. The served page only updates after you save. Backstage warns you if you try to open the page with unsaved changes.

• "Open in Browser" is greyed out -- The entity has no Serve path set, or Serve on web server is not enabled. Configure both in the Inspector.

• Show-control blocks are missing from the palette -- The block palette only lists entities and labelled nodes that already exist. Create the stepper, sequencer, broadcast scheduler, calibrator, or mixer entity first, then reopen the page editor. The palette refreshes automatically.

• Datatype binding dropdowns are empty -- Only datatype nodes with a Label set appear in the binding dropdowns. Open the node editor and assign a label to each String, Float, Int, Color, or Bang node you want to bind.

• Images do not display on another machine -- If you used a local file path, the image is embedded automatically. However, if the image was added via an external URL, that URL must be reachable from the browser viewing the page.

Tips

• The Web Console workview preset (Ctrl+5) arranges the workspace with the Web Consoles window and Inspector side by side for efficient page editing.

• Dropping a show-control block onto the page pre-assigns its binding to the entity or node it represents. You do not need to configure the reference manually after dropping.

• Tables and Grids have configurable Columns and Rows properties. Their cells are droppable containers -- nest other blocks inside them for complex layouts.

• Use Export Style to download the CSS theme, edit the CSS variables in a text editor, and Import Style to apply your custom branding across all pages and served output.

• The WebConsole node in the node graph is a lightweight reference to a Web Console entity -- it does not host the page. Use it to programmatically switch which page is served (via its "Page" input) or to resolve entity IDs (via the GetWebConsole node).

Related

• Build a Presenter Interface for Operators -- The Node Editor Presenter (ImGui-based, for Backstage Hub). Different from the Web Console.

• Your First Graph -- Getting started with the Node Editor, where datatype nodes and show-control entities are created.

• Build a Multi-Step Show -- Creating Stepper-based shows that Web Console pages can control.

• Settings Window Reference -- Includes the Webserver setting that enables page serving.