DocumentationWhat you work with, in detail.
The editors and what they write, the DSL that describes blocks and their behavior, the brand guidelines and the CSS variables they produce. Every page starts from the real format, with examples and screenshots taken from demos built with Kubbler.
Updated on
Editors
Each Kubbler editor changes one specific file or collection. This page gives, for each one, its address, what it writes and how, then follows a change from the first gesture to going live.
- The editor map
- The Workshop: bar, rail and view dock
- The Page plane
- Layout (zones)
- Mechanisms
- The block editor, and what the canvas runs
- Brand kit
- API editor and Data
- The write contract, and read-only Code
- From a gesture to going live
The block DSL
An interactive block is described as data in its tree.json file: its shape, its copy, its local state, its computed values, its validation and its actions. This page covers every key the engine reads, the available operators, functions and verbs, the link to the site memory and to the project's API, a complete order flow, and the known limits.
- Overview
- Tree nodes
- Copy: slots and dictionaries
- Values and operators
- The block root: state, computed values, validation
- Conditions, lists and events
- Actions
- The site memory and the project's API
- Complete example: an order flow
- Limits and pitfalls
Design System
A project's brand guidelines, the CSS variables they produce and the classes the editors write: where each value lives, what it becomes in the page, what is allowed and what is refused.
- Overview
- The brand guidelines file
- The schema, group by group
- CSS variables reference
- What getBrand computes
- Light and dark
- The class system
- styleJson in a tree.json
- Full example
- Rules and pitfalls
