Compose pages with Blökkli

Blökkli is the block-based page builder behind revenexx themes — blocks as Vue components, the options an editor turns, shells and fields, inline editing, reading published pages, and the ninety bundles you inherit.

Writing blocks

How a block works

defineBlokkli, its seven keys, and why props become editor fields.

Block options

The eight option types, json as the escape hatch, globalOptions, and radios display modes.

Shells and fields

propsFieldMapping, BlokkliField versus slot, and the shell-plus-widgets pattern.

Inline editing

v-blokkli-editable, editor.mockProps, and restricting a block with renderFor.

Wiring it up

Registering blocks

blokkli.blocks[] and blokkli.presets[] in theme.json, and requiresCapability.

Reading published pages

The public pages delivery surface, the catch-all route, and shareable preview tokens.

Block catalog

The ninety bundles the reference theme ships, grouped — so you know what you inherit.

Blökkli is the block-based page builder behind revenexx themes. Editors compose pages in Cockpit by dragging blocks onto a canvas; your theme provides the blocks they drag.

The division of labour is the point. The customer's content team owns the content and layout of a page. You own the blocks it's assembled from. A page is never code a developer has to ship.

Three stages

  1. An editor composes the page in Cockpit. Under Experience Studio → Pages, opening a page launches the editor against your theme itself — so what the editor sees is your real components rendering real props, not a preview approximation.
  2. The published result lands on the pages delivery surface, read through the public gateway. Only the published revision is served there; drafts stay in the editorial surface.
  3. Your theme renders it. The renderer resolves each block in the tree to the component whose bundle matches. You don't write the tree-walking code — the layer does it.

A block is a Vue component

There is no block description language and no JSON block format you author. A block is an ordinary Vue 3 component with one extra call:

app/components/blokkli/badge/index.vue
<script setup lang="ts">
const props = defineProps<{ label: string }>()

defineBlokkli({
  bundle: 'badge',
})
</script>

<template>
  <span v-blokkli-editable:label>{{ props.label }}</span>
</template>

The component's props become the editor's content fields. bundle is the identifier that ties the component to its entry in theme.json. That's the whole contract.

Before you write a block, check the catalog

@revenexx/cover-theme ships around ninety block bundles — heroes, product grids and swipers, product detail, cart and checkout, a large account family, listings and filters, accordions, forms, rows and columns. Extending a bundled block is usually less work than building and maintaining a new one, and it inherits editor affordances that are already tuned.

The full grouped inventory is in Block catalog.

Where to go next