Primeros pasos

Instala el paquete, móntalo en cualquier elemento contenedor por id y extrae JSON limpio cuando lo necesites. Clepit no tiene dependencia de framework, así que se integra en React, Vue, Svelte o JavaScript puro sin wrappers.

Instalación

Añade @clepit/core a tu proyecto. El editor se distribuye como un único bundle ESM junto con las definiciones TypeScript.

bun add @clepit/core

Crear un editor

Añade un div y llama a Editor.create con las opciones de EditorConfig que necesites. containerId es el único campo requerido; todo lo demás es opcional.

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

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

Editar y guardar

Llama a editor.data.extract() después de que los usuarios escriban para serializar en la forma JSON de EditorData. El payload lleva un array { blocks } con cada bloque.

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

Renderizar en solo lectura

Usa Renderer.render para generar HTML a partir de EditorData almacenado en cualquier lugar. El Renderer no mantiene ningún estado. Solo necesita un div con containerId.

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

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

Independiente del framework

@clepit/core no tiene dependencias de framework peer. Tanto Editor.create como Renderer.render solo requieren una DOM API completa: React, Vue, Svelte o JavaScript puro funcionan directamente.