Web UI

The Web UI plugin draws your novel in the browser. It runs the React interface, renders your artwork with WebGL, and turns Novel’s draw instructions into what the reader sees.

Web UI has no commands of its own. It decorates commands from Core and Novel, and provides selectors for its React components and hooks.

Page	What it covers
Transitions	The scene transitions Web UI draws, and how to add your own
Selectors	Getting and replacing components, hooks, and interface text
Components	The React components the interface is built from
Hooks	Positioning your own interface against the artwork

Decorated commands

Command	What Web UI adds
init	Creates the page element for the interface, and starts the React app in it.
draw	Publishes the result to the shared view state, including the frames to show, the active cue, and whether the reader is rewinding.
resolveShaders	Adds shaders for characters and transitions.

View state

After each draw, Web UI merges the update into what it’s showing, and publishes the result to the shared view state. Read it with getViewState.

interface ViewState {
  presented: Presented;
}

For each slot, presented holds the current frame and its enter shaders, plus the frame that’s leaving and its replace shaders. It also holds the slot order, the declared timers, and the draw id each part came from. A leaving frame is removed once the renderer has finished with it.

See draw updates for what each draw sends.