Python introduction · The first three minutes
One value.
Watch the connections.
Follow a page described in Python. Start with Hello world. Give the text a place in Data. Connect an input. Then use the inspector to change the running page, one step at a time.
A first look, one step at a time
Jump into Gramlot.
3 minutes · English narration
Optional English captions
A real Gramlot page, recorded with the development inspector. The diagram makes the binding flow visible; the running page updates live.
The entire binding example
Three lines.
One shared value.
The caret makes the connection reactive. The input writes to Data; the div follows Data.
root.dataSetter("message", "Hello world")
root.div("^message")
root.input(value="^message", live=True)These are the declarations used in the recording. The Page class, presentation stylesheet and inspector launcher are outside this excerpt.
Read the binding explanation →The inspector, as a crescendo
First a value.
Then the interface itself.
Source and Data play different roles. See which one changes at each step.
Change Data.
Set message to Hello again. Both bound elements follow it.
Change Source.
Replace the div’s pointer with Welcome. The heading changes; the input keeps its data value. Restore the pointer to reconnect it.
Add an attribute.
Add color with the value #4169c8. The text turns blue while its binding stays intact.
Add a section.
Use + on the main Source branch, choose a div and give it some text.
Move a branch.
Drag the original div into the new section. Its position changes; its binding and color remain.
Undo the move.
Return the div to its earlier position. These runtime edits do not rewrite the authored Python page.
Read along
The spoken introduction.
00:00 · Two roles: Source and Data
How much is already done for you? Start with two ideas. Source describes the interface: its elements and properties. Data holds the application's values. Gramlot renders the screen from Source. Let's connect these roles, one step at a time.
00:21 · Start with Hello world
First, a plain div. Inside the page's main method, we write this one line. Gramlot displays Hello world. This is literal text. It is not connected to Data yet.
00:38 · Replace the text with a pointer
Now give the message a place in Data. We initialise a value named message. Then replace the literal text with a pointer: caret, message. Message identifies the data path. The caret makes this a reactive binding. The div reads that value and follows its changes. Same screen, new connection.
01:04 · One value, two elements
Add an input pointing to the same message. Live equals true updates the value as we type. Watch the text change. The input writes to Data, and the div follows Data. No event handler copies text between the two elements. We only declare their connection. One value, two elements.
01:35 · Explore. Edit. Reshape.
Now open the inspector. Let's make one change at a time. First, Data. Change message to Hello again. Both the input and the div update. Next, Source. Replace the div's pointer with Welcome. Only the heading changes. Restore the pointer. The div follows Data again. Now add an attribute: color. Give it a blue value. The text changes immediately. Values, content, and appearance: all editable here. Let's change the structure. On main, click plus and add a div. Give the new element some text: A new section. Drag our original div into this new section. Watch its position change. The same binding and color stay with it. Click Undo. The div returns to its original position. Data, Source, attributes, and structure. One small step at a time.
02:51 · A small beginning
Describe the interface. Connect your data. Explore the Source. Next: formulas, in another short video.