Skip to main content
defineBlokkliEditAdapter() is the factory function that creates your edit adapter — the bridge between blökkli’s editor UI and your backend data layer. Create this file at app/blokkli.editAdapter.ts and blökkli automatically discovers and uses it.

​
Import

import { defineBlokkliEditAdapter } from '#blokkli/adapter'
#blokkli/adapter is a virtual module auto-configured by the blökkli Nuxt module. You do not need to install or resolve it manually — it is available as soon as the module is registered in your nuxt.config.ts.

​
Signature

function defineBlokkliEditAdapter(
  factory: (ctx: AdapterContext) => AdapterMethods
): AdapterDefinition

​
Parameters

​
factory
(ctx: AdapterContext) => AdapterMethods
required
A factory function called once when blökkli initialises the editor. It receives a ctx object with reactive access to editor internals and must return an object containing your adapter method implementations.

​
Return Value

​
AdapterDefinition
object
An opaque adapter definition object consumed internally by blökkli. Export it as the default export of app/blokkli.editAdapter.ts — blökkli picks it up automatically at build time.

​
Minimal Adapter

The following example implements the seven methods required for a working editor. Every method is async — return a resolved value or Promise as needed. 
import { defineBlokkliEditAdapter } from '#blokkli/adapter'

export default defineBlokkliEditAdapter((ctx) => {
  return {
    async loadState() {
      // Fetch raw content from your backend
    },

    async mapState(state) {
      // Transform raw content into blökkli's internal format
      return state
    },

    async getAllBundles() {
      // Return the available block types
      return []
    },

    async getFieldConfig() {
      // Return field/region configuration for the current entity
      return []
    },

    async addNewBlock(options) {
      // Persist a newly added block to your backend
    },

    async moveBlock(options) {
      // Persist a single block's new position
    },

    async moveMultipleBlocks(options) {
      // Persist new positions for multiple blocks at once
    },
  }
})
The seven methods above are the minimum required to run the editor. blökkli exposes more than 50 additional optional adapter methods that unlock features like undo/redo history, publishing, duplicate, delete, library, media, comments, and AI assistance. See the Required Adapter Methods, Block Mutations, State & History, and Advanced Methods reference pages for the full list.

​
How blökkli Discovers Your Adapter

blökkli scans for app/blokkli.editAdapter.ts (or .js) at build time via its Nuxt module. You do not register the adapter anywhere else — placing the file at the correct path is sufficient.
Keep your adapter file focused on data transport. Move business logic, type mapping, and API helpers into separate composables or utilities and import them into the adapter. This keeps blokkli.editAdapter.ts readable as your method count grows.

​
TypeScript Types

All parameter and return types for adapter methods are exported from @blokkli/editor. Import them directly for full type safety: 
import type {
  AdapterContext,
  AdapterMethods,
  MappedState,
  BundleDefinition,
  FieldConfig,
} from '@blokkli/editor'