Começando

Instale o pacote, monte-o em qualquer elemento contêiner pelo id e extraia JSON limpo sempre que precisar. O Clepit não tem dependência de framework, então se encaixa em React, Vue, Svelte ou JavaScript puro sem wrappers.

Instalar

Adicione @clepit/core ao seu projeto. O editor é distribuído como um único bundle ESM com definições TypeScript.

bun add @clepit/core

Criar um editor

Adicione um div e chame Editor.create com as opções de EditorConfig que você precisa. containerId é o único campo obrigatório; todo o resto é opcional.

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

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

Editar e salvar

Chame editor.data.extract() depois que os usuários escreverem para serializar no formato JSON de EditorData. O payload carrega um array { blocks } com cada bloco.

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

Renderizar somente leitura

Use Renderer.render para produzir HTML a partir de EditorData armazenado em qualquer lugar. O Renderer não mantém estado. Precisa apenas de um div com containerId.

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

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

Independente de framework

@clepit/core não possui dependências de framework peer. Tanto Editor.create quanto Renderer.render precisam apenas de uma API DOM completa: React, Vue, Svelte ou JavaScript puro funcionam todos diretamente.