Blökkli Blocks

Blökkli is a headless, block-based page builder for Vue 3. Once integrated, it lets marketing teams compose storefront pages visually — dragging and dropping pre-built blocks — instead of editing markdown or HTML. The point is to move everyday page changes off the developer's plate: a seasonal landing page or a reshuffled homepage becomes something the content team ships themselves, while developers stay responsible for the blocks those pages are built from.

Planned Capabilities

The integration is meant to give content teams a self-service workflow without giving up engineering control. They'll compose pages on a drag-and-drop canvas in Cockpit, drawing on shared block libraries — hero sections, product grids, CTAs, FAQs — that can be reused across many pages, and preview their changes in real time before publishing. Every page will be versioned, so a bad edit can be rolled back to any previous state. And the library stays open-ended: your own Vue components can be registered as block types, so anything the standard blocks don't cover, you can build and hand over for the marketing team to use like any other block.

How It Will Work (Concept)

The mechanism is the same one the Storefront Architecture page describes: a page is data, not code. Each page is stored as a JSON tree of blocks in Cockpit, an ordered list where every entry names a block type and the props that configure it:

{
  "title": "Spring Collection",
  "slug": "spring-collection",
  "blocks": [
    {
      "type": "hero",
      "props": {
        "title": "Spring is here",
        "image": "/img/spring-hero.jpg",
        "cta_label": "Shop now",
        "cta_url": "/products?season=spring"
      }
    },
    {
      "type": "product-grid",
      "props": {
        "category": "spring-2026",
        "per_page": 12,
        "sort": "newest-first"
      }
    },
    {
      "type": "newsletter-signup",
      "props": {
        "headline": "Stay in the loop",
        "consent_text": "I agree to receive marketing emails"
      }
    }
  ]
}

The storefront fetches this tree and renders each block by mapping type to a registered Vue component:

<!-- pages/[slug].vue (planned) -->
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useFetch(`/api/pages/${route.params.slug}`)
</script>

<template>
  <BlokkliPage v-if="page" :blocks="page.blocks" />
</template>

Planned Block Types

The initial block library is expected to include:

Status

• Specification: PO-46 (in progress)
• Target release: TBD
• Tracking: Follow PO-46 in the project tracker for the latest status

Next Steps

• Storefront Architecture — Stack overview and BFF pattern
• Theming — Customizing block appearance with CSS variables
• Authentication — User-aware blocks (personalization)