Skip to main content


The @editor decorator is used to mark a method that defines the visual editor that a user can use to manage the properties of the NodeBlock, ConditionBlock or Collection.Item. The builder will invoke this method when it wants to render an editor panel for an item.

Decorator type

Method ℹ️

Applies to

Decorator signature


Decorated method signature

(editor: EditorOrchestrator): void

Decorated method parameters

editorEditorOrchestratorNoReference to the EditorOrchestrator instance that is used to define the property editor.

The EditorOrchestrator instance is also available using the editor property of a NodeBlock, ConditionBlock or Collection.Item.


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

type: "node",
identifier: "example-block",
label: "Example",
icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
class ExampleBlock extends NodeBlock {
example: boolean;

onEdit(): void {
// The `EditorOrchestrator` instance contains template functions for
// managing often used properties (like the name of a node).

// But, it can also be used to define custom controls as shown in the
// following example that controls the `example` property of the block.
title: "Toggle the example property",
controls: [
new Forms.Checkbox(
"Example checkbox",
Forms.Checkbox.bind(this, "example", false)