Write the interface.
From your Python app.

Start with a form worth changing.

Choose a room, guests and nights. Seven chained formulas calculate nightly price, subtotal, discount, total and deposit; validation protects accepted Data and a controller prepares a summary. The complete Page is 42 nonblank Python lines; styling, framework code and host setup are separate.

Your route: understand this page → inspect and edit the form → run your own copy.

Move the long-stay discount from seven to five nights. The total and deposit follow automatically. Change the guest limit or supplement in one declaration.

Prefer to begin with one value and one binding? The three-minute introduction remains the first, smaller step.

Two roles. Fewer connections to manage.

Source describes the interface: its elements, attributes, layout and behavior declarations. Data holds the values: names, choices, quantities and results, organized in typed Bags.

A field writes to a Data path. A summary reads that path. You can add another view without inventing another copy of the value or another synchronization handler.

This becomes useful as a page grows: editable fields, calculated summaries and conditional behavior share explicit paths. The inspector lets you examine those paths and the Source that refers to them.

Understand Source and Data → · Explore the inspector →

The recurring work is already part of the model.

Widgets and validation

Typed editors, labels and shared form layout give fields a common grammar. Validation rules live beside the field: an invalid draft stays available for correction without replacing the last accepted Data value.

fields.numberTextBox(
    value="^.quantity", lbl="Quantity: 0–10",
    validate_min=0, validate_max=10
)

Browse the components → · See validation in detail →

Data formulas

Declare a result and the values it depends on. The result lives in Data, so several elements can display it without repeating the calculation.

pane.dataFormula(
    ".total", "price * quantity",
    price="^.price", quantity="^.quantity",
    _init=True
)

The short expression executes in the browser as JavaScript. Reusable browser calculations can live in a named Logic method. Follow formulas step by step →

Data controllers

Declare when a behavior should run and which values it receives. For example, a button can call a browser Logic.save method with the current total:

button = root.button("Save")
button.dataController(func="save", total="=.total")

You provide the save method. Gramlot supplies the declared event/data relationship; this snippet does not create a storage service. Controllers also support reactive Data inputs and timing. Read the controller explanation →

Remote sections and endpoints

Let a Python Source method build a section when it is needed. Use declared endpoints to call Python application logic and return values to the page. Your existing business rules can remain on the server.

Build a remote section → · Connect an endpoint →

Know what runs where.

Your Python Page builds Source on the server. The Gramlot JavaScript runtime renders it, manages bindings and runs browser behavior. The binding example above needs no handwritten JavaScript.

When you need custom browser behavior, write it in the page’s JavaScript Logic module. Python endpoints handle server-side work. Gramlot does not run Python in the browser, and browser validation does not replace checks in your backend.

The practical benefit is a smaller, more explicit interface definition. If an LLM helps write it, you still have declarations you can inspect, understand and change yourself. Why that matters →

Try it with your Python stack.

Use Uvicorn/ASGI for a first project, or mount pages in FastAPI, Flask, Django or Kajenn with the corresponding adapter.

python -m pip install "gramlot-py-server[uvicorn]"
gramlot uvicorn new hello
cd hello
uvicorn app:application

Open http://127.0.0.1:8000/. The generated starter includes a greeting formula and its browser Logic module. For the form with component validation, use the editable form project, which also activates the input and layout collections.

Authoring and setup follow the core writing guide and gramlot-py-server README. Read the adapter documentation ↗