What we will learn
Explore Data and Source in the running application. Distinguish a node value from its named attributes, then create a paragraph, move it into a different container and change its appearance.
The animated workspace keeps the enlarged, real Inspector on the left and the running page on the right. Typed edits, confirmation with Enter and the drag gesture are synchronized with the narration.
Follow the recorded example
Use stages/03_inspector.py from the runnable examples download. It continues the border container and fields from lesson 02, with a compact layout and a Notes section. The optional published Inspector is installed separately and opened through the development host’s Open Inspector button. Recordings use Gramlot 0.3.8 and Python adapter 0.2.12.
The node_label names identify page, layout, header, greeting and notes in Source. They make the declarations easy to recognize in the Inspector. The note attribute on demo.message is introduced specifically to distinguish an attribute from the node’s value.
Data: edit a value, then an attribute
In Data, expand demo and select message. Its value is Welcome to Gramlot. Change Value to Hello from Inspector and press Enter: the heading and Message input update together, without saving Python or refreshing the browser.
The same node has a note attribute. Change it to Metadata, not the greeting and confirm. The heading stays Hello from Inspector because ^demo.message reads the node value, not its note attribute. A node’s value and its named attributes are separate properties.
Source: inspect the declaration
In Source, expand main → page → layout → header and select greeting. Its value is ^demo.message, the pointer written in the Page, rather than the resolved greeting. Its color attribute contains ^demo.color.
Source describes the element and its properties; Data contains the values those pointers read. A node value can also contain a Bag of children, as it does for the layout containers.
Create, move and style an element live
Select page and use Add child element. Choose the HTML tag p, confirm Add, then select the new paragraph. Set its Value to Created in the Inspector and press Enter. The paragraph appears in the running page.
Drag p_0 onto notes in the Source tree. The paragraph moves inside the green Notes section. Select it, add a style attribute with color: crimson; font-weight: bold, and confirm: the paragraph becomes crimson and bold while its text stays the same.
What we have learned
Changes to the stores’ structure, values and attributes drive the corresponding interface updates. Source describes what is rendered; reactive pointers connect that description to Data. The Inspector lets us observe and edit those same stores.
These are edits to the running page. They do not automatically rewrite the Python file. To preserve a result after a reload, express the corresponding declarations in the saved Page.
Your turn
Try it yourself
- Change demo.message in Data and verify that both heading and Message input follow it.
- Change the note attribute and explain why the greeting does not change.
- Create a paragraph in Source, drag it into notes, then make it crimson and bold.
- Reproduce the intended change in the Python Page so that it survives a reload.
Check your understanding
Does changing the note attribute of demo.message change the node value?
Show the answer and expected result
No. The value and its named attributes are separate. The heading reads the value through ^demo.message, so editing note leaves the greeting unchanged. Live Inspector edits also leave the Python source file unchanged.