EditorsEverything tunes, everything reads back.
Every piece of your site opens in its editor: the Studio to start, the Workshop for pages, layout and brand kit, the Mechanisms, the API and the Data for what the app does, then going live. The captures come from a pastry shop demo.
Updated on
On this page3 sections
The tools, as you will open them.
Nine Kubbler screens, captured on a pastry shop demo. Pick a tool: what you do there, and what it writes into the project.
The Studio: from a description to a project
Seven steps to create a project: the idea, Kubbler's questions, what you already have, the brand kit, the starting template, the site features, then the exact text Kubbler builds from.
The project name and its description, in your own words.
Or start from an example: health practice, online shop, association, team tool.
The Guide list ticks as the description gets precise.
The seven steps, from The idea to Launch.
The project, as a draft from the first "Continue".
The Workshop, Page plane
The site page, edited in place: a click on a block opens it in the Inspector. The bar switches page, goes to Mechanisms, to the layout, from Dev to Prod.
The bar: the project, the open page, Mechanisms, the Layout switch, Dev and Prod, Save.
The rail: the project structure, the page tree, your blocks, the Add panel.
The page itself, with its real texts and images.
The view tray: screen width and zoom.
The body of the page: its blocks, their style, their texts per language.
The Inspector: a block and its texts
A block picked in the page opens on the left: its texts, each under its dictionary key, language by language.
The picked block, its name and its identifier.
Each text with its key (titleA_homeHero) and its language.
The block, outlined in the page.
The block texts, one value per language.
The Layout switch
What surrounds the pages of a group: header, footer, content zone. With the switch on, the page greys out and the zones can be set.
The switch, here on the Site page group.
The zones named on the page: Header, Page content.
"+ Row" and "+ Column" grow the grid.
The panel: the zones, a version per screen width, the space between zones, the pages using this layout.
What surrounds the group's pages: the zones, their grid, the header and footer blocks.
The brand kit editor
Colors, fonts, shapes, grid: every setting repaints the project home right beside it. Light and dark are set separately, in the same brand kit.
The "Change brand kit" picker.
The tabs: General, Colors, Typography, Shapes and motion, Grid and layers.
The theme you are editing: light or dark.
The three main colors: primary, background, text.
The project home, repainted on every setting.
The project's brand kit, in light and dark.
Mechanisms: the map of the project
From the page to the collections, every link says who reads and who writes. A click on a block traces its chain in ink, down to the services Kubbler provides.
The page and its blocks.
Behaviors: what each block does when used.
The server routes the site calls.
Background tasks.
Collections, where the data lives.
Kubbler services: accounts, payments, e-mails.
Nothing by itself: the map reads the project. Its Add panel creates collections and routes.
The API editor: a collection and its uses
The fields of a collection, with their type and rules, then the routes, behaviors and pages that use it.
The collection in numbers: fields, relations, routes, background tasks, rows, pages.
Each field: its type, required or not, unique, indexed, its validation.
Its uses: the routes that read or write it, the behaviors, the pages.
Structure or Data: the same object, two views.
The collections, their fields and rules, and the server routes that read or write them.
Data, in plain sight
The documents of a collection in the Dev database: a grid to filter, and each document opened in the Inspector, field by field or as JSON.
The collection and its row count.
One row per document, one column per field.
The open document: Fields and JSON tabs.
Dev, the working version you edit; Prod, the live site, read only.
The documents of the Dev database.
Going live, in three steps
Hosting, domain, deployment. First, a check: no private data readable without an account.
The three steps: Hosting, Domain, Deployment.
The check of collections and read routes.
Hosting plans, monthly or yearly.
The hosting, domain and deployments of the project.
From gesture to live, nothing is lost.
A change is first a draft, kept as you work. Saving makes it the project's version. Publishing puts it live. Nothing is written below the draft: opening and looking cost nothing.
Draft
Kept while you work, and back at the next opening. A dropped connection loses nothing: writes resume on their own.
Draft kept at 14:26Saved
Saving writes the project's version. Nothing is live yet, and "Discard draft" always returns to this version.
Saved at 14:26Published
Publishing puts the last saved version live. A draft never ships, even when it already shows in the preview.
3 unpublished changesThe working version: the preview, its data, what you change.
The live site, read-only: the published page, and your customers' data, which the Workshop does not write.
Opening means copying.
The library's five lists share the same tabs. Opening a document from Kubbler or the marketplace makes it your copy: untouched, it exists nowhere; changed, it becomes a draft; its first Save asks for its name.
What Kubbler provides to every workspace.
What your workspace created or copied.
What others have published.
Copies and new documents not saved yet, with "Resume" and "Discard draft".
Deleting archives: the trash restores for 30 days.