Tutorial: first template

Where in the UI. Structure tab first, then Layout, then Preview. Do not open every inspector on this pass.

Goal: a template with one element, a layout that shows the item title, and one extra text field (a “nickname”) on a category. Time: about twenty minutes. Success: Preview shows the title you type on the mock item.

Ingredients

• A new project in the editor
• One element (the kind of item)
• One layout on that element
• One text component bound to the item field Title
• One category with a text property, assigned to the element

Steps

1. Structure. You should already have a template node. Add an element and connect template → element. Name the element something human (“Note”).
2. Add a layout on the element (element → layout). Name it “Card”.
3. Add a category definition on the template. Name it “Note extras”. Add a category property of type text, name “Nickname”. Connect the definition to the property (the inspector labels these Category definition and Category property).
4. On the element, add a category ref pointing at “Note extras” so items of this kind can carry that category.
5. Layout tab. Select the Card layout. Drop a text component. In the inspector, set its source to binding → item field → Title.
6. Drop a second text component. Bind it to category property → Note extras → Nickname. The category id in the binding must be the category that owns Nickname (the one you created), not a child.
7. Preview. Type a title on the mock item. The first text should follow. Assign the category if Preview asks, then type a nickname.

Stop here

Do not add Blockly, tables, or classes on this pass. When Preview tracks the title, you have the core loop: item field ↔ layout widget.

Then read Where data lives so the next binding you add is the right kind.