Try Gramlot

In a hurry? Start with Try Gramlot: the quick route.

This repository contains the Gramlot core, published on PyPI (gramlot) and on npm (@gramlot/gramlot). The adapters are in gramlot-py-server (Python pages) and gramlot-js-server (JavaScript pages); the example pages are in gramlot-examples.

Start with one learning environment

Start with Python and the Uvicorn adapter unless your application already uses another framework. You need basic Python, a text editor and a browser. The adapter installs the core; Node.js is not needed to serve Python pages. Browser behavior still runs in JavaScript, through the page’s Logic module.

First open the gallery to compare explanation, source and result. Then create an editable project. The gallery displays source but does not save edits to it; changing a field changes page Data, not the Python/JavaScript file.

Use the Python installation and commands for the environment setup, then return to the route in section 015.

Open the gallery, then edit your own page

The Python package needs the uvicorn and gallery extras for this route. In a Python virtual environment, follow the Uvicorn guide and gallery command. The gallery prints its address. Stop it before reusing its port. The hosted galleries for Python and JavaScript need no installation.

Create a separate empty project with gramlot uvicorn new hello, then follow the printed install/start commands. Edit hello/pages/index.py for Source and hello/pages/index.js for browser Logic. With GRAMLOT_DEV=YES, reopen/reload the page after a saved edit; DEBUG also selects the readable runtime. This is not automatic hot reload. Without development reload, restart the server as needed.

The generated project uses named Logic and a strict CSP. Inline gallery examples need the documented permissive profile; copying inline code into the strict project does not make it named Logic. See CSP.

Alternative

Environment instructions

Existing Django, Flask, FastAPI or Kajenn site

Python adapters; choose the framework’s extra and guide.

JavaScript on Node/Bun

JavaScript tutorial; Page on the server, Logic in the browser.

JavaScript without an application server

Standalone tutorial; Page in a Worker, Logic in the window. Python pages cannot run there.

Learn by topic

The gallery groups its lessons by topic. It goes from HTML and SVG structure to Data binding, controllers and server calls, then to input components and containers. Each lesson has its explanation, its Python and JavaScript source and the running page. The examples manual lists the lessons and explains how to read them.

Topic

Guide

Source, HTML and SVG elements, live Source changes

Writing pages

Pointers, initial values, bound controls, style and visibility, freeze

Data binding and controllers

Formulas, controllers, named logic, inline code, buttons, events, lifecycle

Data binding and controllers

Sending and saving Data, messages, ask, pointer templates

Writing pages, Data binding and controllers

Endpoints and dataRpc

Calling the server

remote and dataRemote

Remote content and lazy Data

Input components, validation, command buttons, containers

Components

Appearance

Themes and CSS

Read the prerequisites of a lesson and predict its result before you try it. For example, when a formula reads the VAT rate with =, changing the rate alone does not recalculate it; the next change of a ^ argument uses the new rate.

The gallery runs on servers without a resource system and without an identity system: js_requires groups and the allow and deny of an auth rule need a server that has them. The gallery shows the default refusal of auth. An installed older gallery may show fewer lessons: follow the adapter’s setup/update guide rather than treating missing lessons as a runtime failure.

One shared example suite, several integrations

The core owns framework documentation, theme and logo. gramlot-examples owns the pages, their explanations, catalogue and gallery. Integrations own setup, hosting and their environment-specific lessons; they consume the common suite instead of maintaining copies.

Python uses gramlot <environment> gallery; JavaScript uses npx gramlot node gallery, npx gramlot bun gallery or npx gramlot-serverless gallery <folder>. The environment determines the page language. Source is displayed alongside the explanation; the Python page also uses the JavaScript Logic module beside it.

For exact commands, use Updating an existing installation.

To receive changed lessons, update gramlot-examples as well as the core and adapter following the owning setup guide, then restart or rebuild the export. Installed environments and exported folders do not refresh themselves. First-party dependencies remain unpinned. A change in a repository checkout reaches the registry packages only with a release.

The shared reading path and gallery package guide locate the files and explain the presentation. A repository checkout is useful for editing the suite; it is not required just to run a packaged gallery.