Skip to main content


The @affects decorator is used to mark properties that affect another property of a block. That allows the builder to update certain elements when the property changes. For example, if a property is used in the label of the block, decorating it with @affects("#label") indicates the builder that the label should update when the decorated property changes.

Decorator type

Property ℹ️

Applies to

Decorator signature

what: "#name" | "#label" | "#icon" | "#required" | "#condition" | "#slots" | "#collection" | "#refresh",
collectionProperty: string

Decorator parameters

what"#name" | "#label" | "#icon" | "#required" | "#condition" | "#slots" | "#collection" | "#refresh"NoSpecifies what the decorated property affects. It can be one of the following values:
- #name: Affects the name of the block;
- #label: Affects the label of the block;
- #icon: Affects the icon of the block;
- #required: Affects the required state (that specifies if a block is required or optional) of the block;
- #condition: Affects a condition block;
- #slots: Affects the slots of the block;
- #collection: Affects the collection that is supplied as argument;
- #refresh: Affects a collection item.
collectionPropertystringYesSpecifies the property name that holds the affected collection when what is set #collection.


import { tripetto, affects, NodeBlock } from "@tripetto/builder";

type: "node",
identifier: "example-block",
label: "Example",
icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
class ExampleBlock extends NodeBlock {
// This example property will trigger a label update when the value of the property changes
example: boolean;

// This generates the label for the block that is shown in the builder
get label() {
return this.example ? "True" : "False";