Which StoryFlow UI elements can fire a click event?

Button, Image and Box. A Button offers the full set of On Click, On Pressed, On Released, On Hover, On Unhover, On Double Click and On Right Click. Image offers On Click, On Pressed and On Double Click. Box offers those three plus On Released. Text and containers fire no pointer events, so the usual approach is to wrap them in a Box.

How do I bind a UI element to a variable?

Text Input, Checkbox, Dropdown, Slider and Progress each show an inline bind button on their value row in Element Settings. Pick a global variable and the element is driven by it, and the first four also write the player's changes back. Text Input takes string, integer or float; Checkbox takes boolean; Dropdown takes an enum; Slider and Progress take integer or float.

Can a whole interface be used as a tooltip?

Yes. The Tooltip section has a Tooltip Widget row that takes any User Interface file in the project, which is then rendered as the tooltip at a size you set. It takes precedence over the plain Tooltip Text row.

What happened to the dialogue input elements?

They were removed in v1.6.0. The UI editor's Text Input, Checkbox, Dropdown, Slider and Progress elements replace them and bind to variables directly. Opening an older project clears the leftover elements and their connections in one pass.

UI Elements Reference

An interface is a tree of elements. There are eighteen kinds, split into primitives that draw content, containers that arrange other elements, controls that take input, the Options element for dialogue choices and Instances, which are whole User Interface files placed inside another one.

Overview

You add elements from the Elements palette in the Designer, and every one of them shares the same universal settings: a name, an Is Variable flag that exposes it to scripts, layout and anchoring, Is Enabled, Visibility, a Cursor, drag and drop properties, a tooltip, rotation, scale and render opacity. What follows is what makes each type different.

Names are the handle

Every element carries a unique, non-empty name. That name is what the Hierarchy shows, what Global Search finds and what a script node references. Renaming an element updates every reference to it, so there is no cost to naming things properly as you go.

Primitives

The five building blocks, listed in palette order.

Text

A piece of text: headings, labels or any words you want on screen. Its Appearance section holds font, size, color and alignment, a Line Height row, an Outline sub-group, a Shadow sub-group with its own blur and a Scrollbar sub-group for text that can overflow.

Text also owns the Typewriter section: an Enabled toggle, a Speed in characters per second (30 by default) and Skip on Click, which lets a click on empty space complete the line instantly. On the element driving the main dialogue typewriter the section header also carries a Play button once Enabled is ticked, so you can watch the reveal on the canvas. Text is the only element that fires On Typewriter Finished.

Image

Shows a picture from your project's images. Its Appearance section sets how the picture fits its box, a Position row for which part of the picture wins when it is cropped, a Tint and an Image Size pair. Image Size only appears when the element is laid out by a container, since a canvas-positioned image takes its size from the Layout section instead.

Button

A clickable button with a full set of interaction states. It holds exactly one child in a content slot, so the element you put inside it gets horizontal and vertical alignment plus padding in its own Layout section. Button is the element with the richest event list.

Box

A simple panel. Give it a color, a border or an image brush and put other elements inside it. Box is also the standard way to make an arbitrary region clickable, since Text and the layout containers fire no pointer events of their own. It supports Clip Content and Max Width.

Spacer

An invisible gap that pushes elements apart. Inside a Vertical Box or Horizontal Box, give it a Fill weight and it stretches to absorb the leftover space, which is how you push one element to the far end of a row.

Containers

Element	What it does	Notable settings
Vertical Box	Arranges its children in a column, top to bottom.	Gap, Justify, Align, Clip Content, Max Width. Children get Fill, Align and Padding.
Horizontal Box	Arranges its children in a row, side by side.	The same set as Vertical Box.
Overlay	Stacks its children on top of each other for layered looks.	Clip Content, Max Width.
Scroll Box	Scrolls when its contents are taller than it. Good for backlogs, long lists or settings pages.	Orientation, Gap and a Scrollbar sub-group.
Grid Box	Arranges its children into a grid of equal columns. Good for inventories, save slots or icon grids.	Columns, Gap, Clip Content. Children have no layout controls, since the grid places them.
Switcher	Shows one of its children at a time. Good for tabbed menus, settings pages or multi-page screens.	Active Index, counting from 0. Scripts change it to flip pages.

Containers are not clickable

None of the six containers fires pointer events, and neither does Text. If you need a clickable region around them, wrap the group in a Box or a Button. Right-click the element and use Wrap With to do that without rebuilding anything.

Controls

Element	What it does	Its own settings
Text Input	A field the player can type into.	Placeholder, Default Value, Placeholder Color.
Checkbox	An on/off box the player can tick.	Label, Checked by Default. Styled as a Box part and a Check Mark part, with checked colors, a checked border and both a checked and unchecked image.
Dropdown	A list of choices that opens when clicked.	An editable option list, an Arrow sub-group and a List sub-group covering the open surface, its rows, an alternate row color, the selected row and its scrollbar.
Slider	A draggable handle for picking a number within a range.	Min, Max, Step, Default Value. Styled as Track, Fill and Thumb parts.
Progress	A bar that fills to show a value like health, reputation or loading.	Min, Max, Default Value. Styled as Track and Fill parts. Read-only, so it fires no value event.

When a Dropdown is bound to an enum variable its option list is not editable, because the options come from the enum. The panel says so in place of the Add button.

The Options Element

Options is the dialogue choices surface. It has no authored content, because the real buttons come from whichever dialogue line is running. On the canvas it draws placeholder buttons instead, and its settings are all about how and when the real ones appear:

Show Options: Immediately paints the buttons with the line, or After Text Reveals waits for the typewriter to finish.
Fade In and Fade Duration: fade the buttons in when they appear, over a duration in milliseconds. These only apply to a reveal, so they are hidden when Show Options is set to Immediately.
Arrangement: Vertical, Horizontal or Grid. A grid gets an extra Columns row.
Preview Buttons: how many placeholders the canvas draws. Play and exports always show the real options.
Gap: the space between the buttons.

The buttons themselves wear the Options element's own button styling, including its per-state colors and image brushes, so restyling the element restyles every choice.

Instances

Any User Interface file in the project is an element in its own right. Place one and you get an Instance: a live copy of that file's tree, rendered inside this one.

There are three ways to place one:

Drag its row out of the User Interfaces category in the Elements palette. Every file in the project has a row there, except the one you are editing.
Drag the file itself out of the Content Browser onto the canvas or the Hierarchy.
Spawn one at runtime from the script graph.

An Instance's Content section shows a read-only UI File row naming the file it points at. That reference is fixed at creation, so swapping an Instance to a different file means deleting it and placing the other file. If the referenced file is deleted, the row reads Missing (file deleted).

Build once, reuse everywhere

A save slot, an inventory cell or a settings row is worth building as its own User Interface file. Place it as many times as you like, and every copy updates when you edit the source file. Each Instance also plays its own animations, so two copies of the same file never fight over playback.

Which Events Each Element Fires

Wiring an event creates a node on the file's script canvas. The Events section at the bottom of Element Settings lists every event the selected element offers, with a description on each row, and clicking one jumps you to its node or creates it if it does not exist yet.

Element	Events beyond the universal drag set
Button	On Click, On Pressed, On Released, On Hover, On Unhover, On Double Click, On Right Click
Box	On Click, On Pressed, On Released, On Double Click
Image	On Click, On Pressed, On Double Click
Text	On Typewriter Finished
Text Input	On Value Changed (carries a string), On Text Committed (carries the final string), On Focus, On Blur
Checkbox	On Value Changed (carries a boolean)
Dropdown	On Value Changed (carries a string), On Opened
Slider	On Value Changed (carries a number), On Drag Start, On Drag End
Progress, Spacer, Options, Instance and the six containers	None. Only the universal drag events.

Every element type, without exception, also offers the six drag and drop events: On Drag Detected, On Drag Enter, On Drag Leave, On Dropped, On Moved and On Drag Cancelled. Those are covered on the drag and drop page.

On Value Changed versus the slider's grab pair

A slider fires On Value Changed continuously while the player drags the handle. On Drag Start and On Drag End fire once each, when the handle is grabbed and let go. Use the pair when you want to react to the gesture rather than to every intermediate value.

Binding Elements to Variables

Five controls bind to a project variable. Their value row in Element Settings carries an inline bind button: pick a variable and the control's own value field locks, because the variable now drives it. Four of the five work both ways, so the player changing the control writes straight back to the variable. Progress is the exception, since a progress bar takes no input, and it only displays what the variable holds.

Element	Variable types it accepts	Row the bind button sits on
Text Input	string, integer, float	Default Value
Checkbox	boolean	Checked by Default
Dropdown	enum	Options
Slider	integer, float	Default Value
Progress	integer, float	Default Value

Array variables are never offered, since a control holds a single value rather than a list.

Two elements also display a value without writing back:

Text can show the live value of a string, integer, float, boolean or enum variable, or one of the dialogue data sources Character Name and Dialogue Text. Its manual text field locks while it is bound.
Image can bind to an image variable, which holds a project-relative asset path that the runtime resolves exactly like an authored source. It can also bind to the dialogue data sources Character Image and Scene Background.

One value can feed several elements

Nothing stops two elements binding to the same source. A shared hover card, for instance, can be one Image and four Text elements all bound to the variables your script writes as the cursor moves, so a single card serves every item in an inventory.

Dialogue input elements were removed

The input elements that used to live inside dialogue nodes are gone as of v1.6.0. Text Input, Checkbox, Dropdown, Slider and Progress replace them, and they bind to variables directly, which is what those inputs were doing by hand. Opening an older project clears out the leftover elements and their connections in one pass, so no dead wires are left behind.

Tooltips

Every element type has a Tooltip section. Two rows decide what shows:

Tooltip Text: plain text that appears near the cursor on hover. Leave it empty for no tooltip.
Tooltip Widget: any User Interface file in the project except the one you are editing, rendered as the tooltip. It takes precedence over Tooltip Text, which stays as a fallback if the file ever goes missing from a bundle. Setting one reveals a Tooltip Size pair, which defaults to 320 by 180 pixels.

Once either is set, three more rows appear:

Attach To: Cursor makes the tooltip follow the pointer, and Element pins it to a side of the element and leaves it there.
Placement: shown only for Element. A picker draws the element as a block in the middle with twelve cells around it, three per side. Each cell is the spot the tooltip will occupy, so clicking the bottom-right cell docks it below the element with the right edges flush. One click sets side and alignment together.
Offset: the gap in pixels, 14 by default.

At runtime a tooltip appears after a short hover delay and fades in. When the preferred spot would take it off screen it flips to the opposite side automatically and then clamps into view. Tooltips are suppressed while a drag is in progress, and they never appear on the Designer canvas.

A widget tooltip is a picture, not a live copy

An interface used as a tooltip is rendered statically. Its controls are not interactive and its script graph does not run. Its bound values are painted live, which is what makes a data-driven hover card work. If every bound text in it resolves empty, the tooltip is suppressed rather than shown as an empty box.

The Dialogue Box Is Elements Now

The dialogue box used to be a fixed layout with a handful of style knobs. It is now built out of the same ordinary elements as everything else, which means every part of it can be selected, moved anywhere in the tree, restyled, wrapped in a container or deleted outright.

The Dialogue category in the Elements palette lets you add fresh dialogue parts at any time. It holds seven rows:

Palette item	Underlying element	What it is
Typewriter Text	Text	Text that reveals one letter at a time. Bind it to a value to feed what it types.
Character Name	Text	Shows the name of whoever is speaking the current line.
Character Image	Image	Shows the portrait of the character speaking the current line.
Click to Advance	Text	The continue hint that appears once a line finishes typing.
Character Container	Horizontal Box	Groups the character name and portrait so they move together.
Content Area	Box	The body of the dialogue box, where text and choices live. Has its own Fixed Height section.
Options	Options	Shows the current dialogue choices as buttons, one per option.

Character Name and Character Image arrive already bound to the dialogue data they display, and Click to Advance arrives bound to the advance action. Typewriter Text arrives unbound, so you choose what feeds it. Bind it to Dialogue Text and it becomes the main line of dialogue. Bind it to something else and it types that instead. Typewriter Text arrives unbound, so you choose what feeds it. Bind it to Dialogue Text and it becomes the main line of dialogue. Bind it to something else and it types that instead.

The role and the value are separate

A dialogue part carries two independent things. Its role is fixed when the element is created and decides its behavior, such as a name element hiding itself for narration or a portrait wiring itself to character images. Its binding is the value pipe and can be repointed at any time. Rebinding a part changes what flows into it, never how it behaves.

The background is elements too. A scene background is an ordinary Image bound to Scene Background, sitting behind everything else, which is why you can put a color box under it or an overlay on top without any special support.