API Reference

Public exports from @clepit/core. Each symbol below ships a typed signature and a minimal usage example.

Editor

The core editor class. Editor exposes two public static methods: create (the main factory) and destroy. The create() method returns an EditorAPI object through which all instance methods are accessible after the editor is mounted.

Method	Signature	Description
Editor.create	Editor.create(config: EditorConfig): EditorAPI	Create a new editor instance and mount it into the DOM element with the supplied containerId.
Editor.destroy	Editor.destroy(containerId: string): void	The destroy() method on the EditorAPI object calls Editor.destroy() for this instance.

Method	Signature	Description
data.extract	data.extract(): EditorData	Extract the current block data from an editor instance as a JSON-safe EditorData.
data.set	data.set(data: EditorData): void	Replace the entire block list with a new data payload. Triggers a full re-render.
data.clear	data.clear(): void	Clears both the block content and the persisted state data.
data.clearContent	data.clearContent(): void	Removes blocks only, leaving store data intact.
data.clearStorage	data.clearStorage(): void	Clears store data only, leaving current blocks untouched.
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement \| null	Insert a block at the given index. Accepts the same data shape as the target block type.
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	Convert a block to a new type in-place.
blocks.remove	blocks.remove(index: number): void	Remove the block at the given index.
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	Moves a block from one index to another.
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	Updates an existing block's data in-place. The type is unchanged.
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	Fetches a block by its ID. Returns null if not found.
blocks.getAll	blocks.getAll(): EditorData['blocks']	Returns data for all blocks as an array.
blocks.count	blocks.count(): number	Returns the number of blocks in the editor.
focus	focus(): void	Moves focus into the editor, focusing the first block.
blur	blur(): void	Removes any active focus from within the editor.
destroy	destroy(): void	The destroy() method on the EditorAPI object calls Editor.destroy() for this instance.
selection.get	selection.get(): Selection \| null	Returns the window selection object or null.
selection.set	selection.set(selection: Selection): void	Sets the window selection to the provided Selection object.
selection.clear	selection.clear(): void	Removes all ranges from the window selection.
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	Shows the block type menu for the given block DOM element.
ui.hideBlockMenu	ui.hideBlockMenu(): void	Hides the block type menu if it is open.
ui.showToolbar	ui.showToolbar(x: number, y: number): void	Shows the inline toolbar at the provided x, y viewport coordinates.
ui.hideToolbar	ui.hideToolbar(): void	Hides the inline toolbar if it is visible.
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	Returns the current view (edit, preview, or json) for the given containerId.
view.switchView	view.switchView(containerId: string, view: EditorView): void	Switches the editor to a specified view: edit, preview, or json.

Typical usage example

TypeScript

import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  theme: 'auto',
  placeholder: 'Start writing...',
  minHeight: 300,
});

// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);

// Extract data
const data = editor.data.extract();

// Switch view
editor.view.switchView('editor', 'preview');

// Tear down
editor.destroy();

Renderer

A class that converts saved block data into read-only HTML inside a DOM element. This class has one public static method: render().

Method	Signature	Description
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	Render saved block JSON into a container as read-only HTML. Use this anywhere you want to display content without editing affordances.

Typical usage example

TypeScript

import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data,
  theme: 'auto',
  margins: { bottom: 12, top: 0 },
});

StyleManager

A centralised class that manages the theme system. It exposes three useful public static methods for consumers: subscribe (for OS-level theme changes), getResolvedTheme (to read the current OS theme), and injectStyles (to inject custom CSS).

Method	Signature	Description
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	Subscribe to runtime theme token changes. The listener fires whenever theme or themeOverrides mutate.
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	Reads the current OS theme ("light" or "dark"). Returns "light" if matchMedia is unavailable.
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	Injects a CSS string into document.head (use a unique styleId). Returns false if already present, true otherwise.

Typical usage example

TypeScript

import { StyleManager } from '@clepit/core';

// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
  console.log('OS theme:', theme); // 'light' | 'dark'
});

// Read current OS theme
const current = StyleManager.getResolvedTheme();

// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
  .clepit-editor { font-family: 'Inter', sans-serif; }
`);

// Unsubscribe when done
unsubscribe();

Getting Started

Reference

Server API

Guides

API Reference

Editor

Typical usage example

Renderer

Typical usage example

StyleManager

Typical usage example