Skip to main content
blökkli is a Nuxt 3 module that brings a fully interactive, drag-and-drop WYSIWYG block editor to your application. Whether you’re building a headless CMS frontend, a marketing page builder, or a content-rich web app, blökkli gives your editors a live editing experience while you stay in full control of markup and styling through standard Vue components.

Introduction

Learn what blökkli is, how it’s architected, and whether it fits your project.

Quickstart

Install blökkli, wire up your first adapter, and render your first block in under 10 minutes.

Core Concepts

Understand blocks, entities, fields, bundles, and the adapter pattern.

API Reference

Explore the full defineBlokkli composable API and all available options.

​
How It Works

1

Install the module

Add @blokkli/editor to your Nuxt 3 project and register it in nuxt.config.ts. The module auto-imports everything you need — no manual plugin setup required.
2

Configure your adapter

Create app/blokkli.editAdapter.ts and implement the adapter interface. The adapter is the bridge between blökkli’s editor UI and your backend — you decide how blocks are loaded, saved, and mutated.
3

Add a provider and field to your page

Wrap your page content with <BlokkliProvider> to set the editing context, then place <BlokkliField> wherever you want a list of editable blocks to appear.
4

Define your block components

Create Vue SFCs inside components/Blokkli/ and call defineBlokkli({ bundle: 'my-bundle' }) in the <script setup> block. blökkli automatically maps each block in your data to the matching component.

​
Key Features

Drag-and-Drop Editing

Editors reorder, add, and remove blocks directly on the page with a fluid drag-and-drop interface — no separate admin UI needed.

Built-in Editor Features

History (undo/redo), multi-select, clipboard, block options panel, and a publish workflow come out of the box with zero configuration.

Flexible Adapter System

The adapter pattern keeps blökkli fully backend-agnostic. Connect it to Drupal, a REST API, GraphQL, or even localStorage — your backend, your rules.