@bloklabs/angular

The Angular block editor bindings for Blok — a headless, Notion-like rich text editor whose content is JSON blocks, not HTML.

Install

npm install @bloklabs/angular @bloklabs/core

@bloklabs/core and @angular/core / @angular/common / @angular/forms are peer dependencies.

Usage

BlokEditorComponent is a standalone component: it mounts the editor, manages its lifecycle, and takes every editor config option as an input.

import { Component } from '@angular/core';
import { BlokEditorComponent } from '@bloklabs/angular';
import { Header, Paragraph, List } from '@bloklabs/core/tools';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [BlokEditorComponent],
  template: `<blok-editor [tools]="tools" />`,
})
export class EditorComponent {
  tools = {
    paragraph: Paragraph,
    header: { class: Header, placeholder: 'Enter a heading' },
    list: List,
  };
}

Saving

The (save) output fires with the latest content on every change, so you never have to call save() by hand.

import type { OutputData } from '@bloklabs/core';

// template: <blok-editor [tools]="tools" (save)="onSave($event)" />
onSave(data: OutputData) {
  console.log(data.blocks);
}

The component also implements ControlValueAccessor, so it works with [(ngModel)] and reactive forms.

Also exported

• BlokContentDirective ([blokContent]) — the mount point, if you drive the editor yourself.
• injectBlocks() — a reactive snapshot of the block tree plus a manipulation API.
• createAngularBlock — author block tools as Angular components.
• provideBlok / BLOK_DEFAULT_CONFIG — share default editor config through DI.

Docs

• Quick start
• BlokEditor reference
• useBlocks reference

Licensed under Apache-2.0.