Premiers pas

Installez le package, montez-le dans n’importe quel élément conteneur par id, et extrayez du JSON propre dès que vous en avez besoin. Clepit n’a aucune dépendance de framework, il s’intègre donc à React, Vue, Svelte ou JavaScript pur sans wrappers.

Installation

Ajoutez @clepit/core à votre projet. L'éditeur est livré sous forme d'un seul bundle ESM avec les définitions TypeScript.

bun add @clepit/core

Créer un éditeur

Ajoutez un div puis appelez Editor.create avec les options EditorConfig dont vous avez besoin. containerId est le seul champ obligatoire ; tout le reste est optionnel.

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

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

Modifier et enregistrer

Appelez editor.data.extract() après que les utilisateurs aient écrit pour sérialiser dans la forme JSON EditorData. La charge utile contient un tableau { blocks } avec chaque bloc.

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

Rendu en lecture seule

Utilisez Renderer.render pour générer du HTML à partir d'EditorData stocké n'importe où. Le Renderer ne conserve aucun état. Il n'a besoin que d'un div avec un containerId.

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

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

Indépendant du framework

@clepit/core n'a aucune dépendance de framework externe. Editor.create et Renderer.render nécessitent uniquement une DOM API complète : React, Vue, Svelte ou JavaScript pur fonctionnent tous directement.