Skip to main content
The blökkli editor is a full WYSIWYG overlay that activates on top of your existing Nuxt page. It provides drag-and-drop block management, a real-time options panel, and 40+ built-in features — all rendered directly on top of your production layout. Your block components continue to render exactly as they do in production; blökkli simply adds interactive handles, drag targets, and panels around them.

​
How the Editor Activates

To open the editor, visit any page that uses the blökkli provider and append the editing query parameter to the URL: 
https://your-site.com/your-page?blokkliEditing={entity-uuid}
For the editor to activate, can-edit must be true on your <BlokkliProvider> component. Once the URL is loaded:
  1. The editor overlay appears without a full page reload.
  2. Your block components continue to render normally.
  3. blökkli adds interactive handles, drag targets, and panels on top of your existing layout.
No separate admin interface, no iframe wrapping your entire page — the editor lives directly on the route.

​
Editor Interface

The editor UI is composed of four primary areas: Toolbar The top bar is your main control strip. It contains:
  • Add block (+) — opens the block picker panel
  • Undo / Redo — step through your change history
  • Publish — commit the current draft to production
  • Exit — close the editor and return to the normal page view
Block Handles Every block on the page grows an interactive handle when you hover over it. The handle lets you:
  • Click to select the block and open its options panel
  • Drag to reorder the block within its field or move it to another field
Options Panel When a block is selected, the options panel slides in from the right. It displays all configurable options for that block — colour scheme, layout variant, visibility settings, and any other options you defined in your block’s configuration. Changes apply to the live preview immediately. Add Block Panel Clicking + in the toolbar opens the add block panel. It lists every bundle type registered in your adapter. You can:
  • Click a bundle to append it to the current field
  • Drag a bundle from the panel directly to the position you want on the page

​
Feature System

blökkli’s editor capabilities are built as independent feature modules. Each feature adds a specific capability — history tracking, clipboard support, AI assistance, and so on.
  • 40+ features are enabled by default. You get the full editing suite without any configuration.
  • Features are independent. Disabling one feature has no side effects on others.
  • You can disable features for a given entity or user role by returning their IDs from getDisabledFeatures() in your adapter.
  • You can build custom features using defineBlokkliFeature() to extend the editor with your own tools and panels.

​
Disabling Features via Adapter

Return an array of feature IDs from getDisabledFeatures() to remove those features for the current editing session: 
async getDisabledFeatures() {
  return ['assistant', 'comments', 'mediaLibrary']
}
This is useful for simplifying the editor for non-technical editors, or for disabling features that require adapter methods you haven’t implemented yet.

​
Next Steps

Editing Workflow

Walk through a full editing session — adding, moving, configuring, and publishing blocks.

Built-in Features

Browse all 40+ built-in features and learn how to enable, disable, or configure each one.

Keyboard Shortcuts

Speed up editing with keyboard shortcuts for undo, duplicate, command palette, and more.

Custom Features

Build your own editor features using defineBlokkliFeature().