gramlot.

The galleries / A working guide

Learn by changing
something.

Every example is a running page, with its recipe beside it. Explore basic HTML and SVG, reactive bindings, controllers and the component collection.

Py.

The Python gallery

Pages are authored and served in Python. The code panel shows the Python page; examples with browser Logic also expose the companion JavaScript.

Open Python gallery ↗

JS.

The JavaScript gallery

Pages are authored in JavaScript and served by Node.js. The code panel shows the JavaScript page, using the same concepts and component names.

Open JavaScript gallery ↗

Two authoring languages, a shared set of lessons. The browser runtime is JavaScript in both versions.

Python gallery with navigation, a textbox example and its source code.
Choose a lesson on the left. Use the Example and Explanation tabs. Resize the code panel on the right.

A first visit

Four things
to try.

Start with a textbox, then follow the data.

Change a shared value.

Open “Textbox and labelbox”. Type in one field and watch another view of the same Data change. Compare the declaration with the result.

Make an invalid edit.

Open “Validation rules and callbacks”. Try a one-letter name or quantity 11. See the rejected draft and the last accepted Data side by side.

Try another presentation.

The footer gear opens theme, light/dark and label-position settings. The Example and Explanation views keep the running page available; on smaller screens use the dedicated Example, Code and Inspector views.

Make room for what matters.

Use the top toolbar to show or hide navigation and code. Drag the dividers to resize them. Example tabs let you return to an already open page.

Look inside

An inspector for
your application model.

Use the magnifying glass in the gallery footer to open the floating inspector.

  • Data — browse typed state and edit supported values.
  • Source — inspect declarations and their attributes.
  • Styles — explore theme variables, preview changes and download CSS overrides.

The page selector switches between the gallery shell and the current example. Source supports branch insertion, removal, movement and Undo/Redo. Runtime edits are exploratory: they do not rewrite the source file.

A Chrome DevTools extension exposes the same inspector. Download its release ZIP, extract it and use “Load unpacked” in Developer mode. Follow the extension’s origin and file-access instructions.

DevTools & installation ↗
The real Gramlot inspector with Data, Source and Styles tabs, a selected customer path and its editable value.

Take it with you

The whole gallery.
Without a server.

A downloadable version for exploring the examples offline.

Download serverless ZIP ↓

The same download is available in the footer of both hosted galleries.

  1. Download the ZIP and extract the entire folder.
  2. Open index.html in a modern browser.
  3. Explore the JavaScript examples and their local Worker endpoints.

“Serverless” here means a browser-hosted application. Python does not run in the browser. A browser Worker cannot stand in for a trusted backend, keep server secrets or connect directly to a private database.

Read the serverless tutorial ↗

CONTINUE HERE

Know what to look for before you open a lesson.

From a field to a useful application.See the model behind the screen.Choose one thing to try first.