Custom property slots

Formo's built-in properties (position, fill, opacity, and so on) cover a lot, but not everything a specific object or component needs to expose. A custom property slot lets you add a genuinely new, named property to an object, with its own type, its own widget in the panel, and full formula-bindability like any built-in property.

Why add a custom property slot

The clearest case is a component you're building for reuse: give it a slot instead of hardcoding a value, and every instance can set its own value for that slot independently, without touching the shared definition — this is the exact mechanism component slots use for per-instance overrides, covered in the Components article; a component slot isn't a separate system, it's this same custom-property mechanism, just scoped to a component definition instead of a single object.

Adding a slot and choosing its type

Opening the type picker on a new (or existing) custom slot shows every available type grouped under seven category headers, in this order: Basic, Numeric, Visual, Choice, Reference, Compound, Time. Two of these are worth knowing upfront aren't fully live yet - more below.

Basic: Number, Integer, Boolean, String, Multiline. The plain-value primitives; Multiline is a text field that accepts and displays line breaks, distinct from a single-line String.

Numeric: Range, Percent, Angle. Range is a number with a required min and max (so the panel can show it as a bounded slider); Percent is a 0–1 value with its own dedicated percent widget; Angle interpolates via shortest-arc rotation when animated, the same convention rotation itself uses.

Visual: Color, Paint, Point. Color is a plain RGBA value; Paint is the full fill/stroke object (solid, gradient, image, or shader — everything covered in Color, Fills, and Gradient sand Shader Fills), meaning a custom slot can expose an entire swappable paint, not just a flat color; Point is an {x, y} pair.

Choice: Enum. A dropdown with a configurable option list — each option carries a stored value and an optional separate display name, plus a per-option icon, hover hint, and a visibility flag for hiding an option without deleting it.

Reference: Node. Today, Node is the only reference type actually offered when you create a custom slot — it lets the slot hold a live reference to another object in the document, resolved by that object's stable ID rather than by name, so it survives a rename. (Two other reference-shaped types, Library File and Class, exist in the underlying type system for internal uses like shader and image references, but aren't currently exposed in the custom-slot picker.)

Compound and time: visible, but not usable yet. Compound (Object, Array) and Time (Date, Time, DateTime) both appear in the type picker under their category headers, exactly like every other type — but every entry in both categories is rendered disabled (grayed out, not clickable, skipped by keyboard navigation), because none of them is implemented in the current UI yet. This is worth knowing precisely rather than guessing from the picker alone: it's not a bug if clicking "Object" or "Date" does nothing - they're genuinely reserved for a future version, shown honestly as disabled rather than hidden.

Using custom slots in the properties panel and formulas

Once added, a custom slot appears in the object's properties panel exactly like a built-in property — with its own widget matched to its type (a slider for Range, a swatch for Color, a dropdown for Enum, and so on), and it's bindable and readable from a formula the same way any built-in property is, by name, on that object.

On this page

Formo

The browser studio where drawings become animations, toys, and games. Your files, open HTML export, nothing to install.