Skip to main content

Guides

Embedding

Getting started

Install the package, mount it into any container element by id, and extract clean JSON whenever you need it. Clepit has no peer framework dependency, so it drops into React, Vue, Svelte, or vanilla JavaScript without wrappers.

Install

Add @clepit/core to your project. The editor ships as a single ESM bundle with TypeScript definitions.

Shell
bun add @clepit/core

Create an editor

Add a div, then call Editor.create with the EditorConfig options you need. containerId is the only required field; everything else is optional.

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

const editor = Editor.create({
  containerId: 'editor',
  onChange: data => console.log(data),
  placeholder: 'Start writing…',
  theme: 'auto',
});

Edit & save

Call editor.data.extract() after users write to serialise into the EditorData JSON shape. The payload carries a { blocks } array with every block.

TypeScript
const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [
//     { id: 'abc123', type: 'paragraph', data: { html: 'Hello world' } },
//     ...
//   ]
// }

Render read-only

Use Renderer.render to output HTML from EditorData stored anywhere. The Renderer holds no state. It only needs a div with a containerId.

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

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

Framework-agnostic

@clepit/core has no peer framework dependencies. Both Editor.create and Renderer.render only require a full DOM API: React, Vue, Svelte, or vanilla script all work directly.

Editor (mounts into the DOM, browser-only) vs Renderer (produces static HTML from EditorData, can run in the browser or via SSR).