What we will learn
Install Gramlot with Python, write a Hello world Page and run it with Uvicorn. Follow the sequence from saving the source to starting the server and opening the browser, then change the greeting and see when the result updates.
Finally, run the JavaScript Page with Node and open its generated HTML file directly in the browser. The learning goals appear on the right while we work in a large terminal on the left. When we open the page, the browser replaces those goals. Animated transitions mark opening and reloading.
Follow the recorded example
The runnable examples download includes the exact Python and JavaScript Pages. Recordings use Gramlot 0.3.8, Python adapter 0.2.12 and JavaScript adapters 0.2.15. The recording editor and browser controls are presentation tools; they are not part of the Page source.
Install and create the Python project
Start in an empty working folder with Python 3.11 or newer, a terminal, a text editor and a browser. Create a virtual environment, activate it, install the packages and generate the project. These commands are for macOS or Linux; Windows uses its own virtual-environment activation command.
The Gramlot CLI creates the project. Uvicorn will start its server after we have saved our Page. Installing packages or creating the project does not open a browser page.
python3 -m venv .venv
source .venv/bin/activate
python -m pip install "gramlot==0.3.8" "gramlot-py-server[uvicorn]==0.2.12"
gramlot uvicorn new hello
cd helloWrite and save Hello world
Open pages/index.py in your text editor and replace its sample with this small Page. Save the file. Keep the generated host files and project configuration.
The main method receives root, the starting point for declaring the interface. A heading is enough for this first lesson; bindings and layouts come next. The browser remains empty because we have not opened the application yet.
from gramlot import Page as BasePage
class Page(BasePage):
title = "Welcome to Gramlot"
def main(self, root):
root.h1("Hello world")Start the server, then open the browser
From the hello folder, run the command below. Wait for Uvicorn to report that it is running, then open http://127.0.0.1:8000/ in your browser. Only now should Hello world appear. The --reload option watches your Python files and automatically restarts the application when you save changes.
uvicorn app:application --reloadChange, save and refresh the browser
Change Hello world to Welcome to Gramlot in pages/index.py. The browser still shows the previous result while you edit and after you save.
After saving, watch the terminal: Uvicorn detects the changed file and restarts the application automatically. Wait for application startup to complete, then click Reload in the browser. The heading now changes. Keep Uvicorn running throughout: you do not need to stop it or type its command again. The --reload option restarts the server; it does not automatically refresh the browser.
Try Node.js
In a separate folder, create the JavaScript project and install its dependencies. You need Node.js and npm for this alternative. Open index.js, use the JavaScript Page below and save it before starting the server.
npm create --yes @gramlot@0.2.15 -- page welcome
cd welcome
npm installSave the JavaScript Page and start Node
Save this source in index.js. Run npm start, wait for the local address printed by the server and open http://127.0.0.1:8080/ in the browser. The previous page remains visible until you open the new address.
import {Page as BasePage} from '@gramlot/gramlot/page';
export class Page extends BasePage {
static title = 'Welcome to Gramlot';
main(root) {
root.h1('Welcome to Gramlot');
}
}Build HTML and open the file
Open a second terminal tab in the same JavaScript project and run npm run build. The output identifies the generated index.html. Switch back to the Node terminal and stop the server with Ctrl+C.
Open that index.html file with your browser, for example through its Open File command. The address starts with file:// rather than http://. The recording keeps the terminal visible while entering the file address and clicking Open HTML file.
This simple generated page also reloads offline without a Python or Node server. This does not make server-dependent features or external resources available offline.
npm run buildWhat we have learned
We installed Gramlot, created and saved a Page, started Uvicorn and opened its address. We changed the greeting by saving the file, letting Uvicorn reload automatically, and refreshing the browser. We also ran the JavaScript Page with Node and opened its standalone HTML file offline.
Keep the Python project: the next lesson connects inputs and the page to Data.
Your turn
Try it yourself
- Create and launch the hello project with Python/Uvicorn.
- Show Hello world, then change and save the greeting in the Python file. Wait for automatic server reload and refresh the browser.
- Keep the project for lesson 02. Try the Node.js or serverless route if it matches your environment.
Check your understanding
With Uvicorn running with --reload, what do you do after changing the Python greeting?
Show the answer and expected result
Save the file, wait for Uvicorn to finish reloading the application, then refresh the browser. Leave the server running; there is no need to stop and launch it again.