The Gramlot course
Understand the page.
Follow the code.
Choose a lesson and follow it step by step, through five orientation lessons and then the complete course. Each page includes explanations, examples and practice.
No lessons match. Try a different word.
Orientation
Orientation
Five lessons: install, bind, inspect, calculate and call the server. Then continue with the complete course.
01Install Gramlot and create Hello worldInstall and run Gramlot with Python and Uvicorn, create a welcome page, then see the Node.js and serverless alternatives.Video · Practice →02Connect text and colour to DataUse pointers to change text and colour from inputs, then organize several fields inside a border container.Video · Practice →03Explore Data and Source with the inspectorDistinguish node values from attributes, then create, move and modify interface elements through live Source.Video · Practice →04Use relative and symbolic paths, then dataFormulaOrganize bindings around a data context, resolve symbolic origins and calculate a value from reactive inputs.Video · Practice →05Call the server with dataRpc and .remoteCompare a server call that returns data with a server call that builds a fragment of the interface.Video · Practice →The complete introductory course · 20 lessons
Module 01
Start a project
Create your first project. Understand Source, Data and bindings.
01Create your first projectCreate an editable Python project and identify the files that run on the server and in the browser.Reading · Practice →02Read and compose SourceBuild a small page from nested declarations and distinguish structure from application state.Reading · Practice →03Initialize structured DataUse dataSetter and a clear Data path to give a page its initial values.Reading · Practice →04Connect fields and valuesPredict reactive and sampled reads, then use datapath to make bindings local.Reading · Practice →Module 02
Build a form
Accept valid input, calculate results and respond to actions.
05Accept values, preserve draftsUnderstand typed fields and the difference between an invalid draft and accepted Data.Reading · Practice →06Declare a calculationUse a formula for a derived value and choose which inputs trigger recalculation.Reading · Practice →07Run an action at the right timeDistinguish a derived value from an action, and make a click-time snapshot intentional.Reading · Practice →08Name behavior and understand lifecycleFollow a named Logic method from its Python declaration to its browser implementation.Reading · Practice →Module 03
Compose an interface
Compose containers, style the page and format its values.
09Arrange an application with containersChoose border, tab and stack containers and verify what survives a panel change.Reading · Practice →10Style the page you ownSeparate theme defaults, page CSS and reactive presentation without manipulating shadow roots.Reading · Practice →11Publish messages and ask before actingConnect a named event to subscribers and test confirmation, cancellation and repeated actions.Reading · Practice →12Format values without changing DataSeparate raw values, formatted text, pointer expressions and date interpretation.Reading · Practice →Module 04
Connect services
Call endpoints, load remote content and exchange Data.
13Call an endpointSend explicit arguments to a server method and handle both a returned value and a failure.Reading · Practice →14Load a Source fragmentUse remote content when the server should build part of the interface.Reading · Practice →15Load Data when it is readDistinguish a lazy Data resolver from an immediate RPC and a remote interface fragment.Reading · Practice →16Save, restore and send Data deliberatelyChoose an interchange format and separate local editing from explicit data delivery.Reading · Practice →Module 05
Deliver your work
Structure an application, explore other hosts and complete a project.
17Organize pages and choose a hostMove from one Page to an application while keeping routing, resources and persistence explicit.Reading · Practice →18Read the JavaScript editionTransfer your understanding of Source and Data to a Page authored for Node.js or Bun.Reading · Practice →19Deliver the JavaScript edition offlineOpen a complete export from disk and test what still needs a connection.Reading · Practice →20Explain and change a complete formRun the stay estimate, change a business rule and verify the behavior from inputs to summary.Reading · Practice →Keep learning
Examples and reference
Watch the five orientation videos, follow the written lessons and try the downloadable examples. The complete introductory course follows with twenty practical lessons. The course starts with Python; JavaScript and serverless have dedicated lessons.