Integración

Integrar el editor o el renderizador de Clepit en cualquier aplicación es sencillo: un contenedor DOM es el único punto de control.

Montar el editor

Dale un id al elemento contenedor, llama a `Editor.create({ containerId, ... })`, guarda el `EditorAPI` devuelto y llama a `Editor.destroy(containerId)` al desmontar.

TypeScript

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

// 1. Give your container a stable id
// <div id="my-editor"></div>

// 2. Create the editor and hold the returned API
const editor: EditorAPI = Editor.create({
  containerId: 'my-editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
});

// 3. Extract content any time
const data = editor.data.extract();

// 4. Destroy on teardown (e.g. component unmount)
Editor.destroy('my-editor');

Renderizar la salida en modo solo lectura

Llama a `Renderer.render({ containerId, data })`. El ejemplo a continuación muestra el patrón React real del componente `DocsRenderer`: `useId` genera un id de contenedor único y `useEffect` activa el renderizado.

TSX

import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';
import { useEffect, useId } from 'react';

type Props = { content: EditorData };

const ReadOnlyView = ({ content }: Props) => {
  // useId produces a stable, unique id per component instance
  const containerId = useId().replace(/[^a-z0-9]/gi, '');

  useEffect(() => {
    Renderer.render({
      containerId,
      data: content,
      margins: { bottom: 0, top: 0 },
    });
  }, [containerId, content]);

  return <div id={containerId} />;
};

Dónde corre cada API

Editor y Renderer montan DOM vivo, así que corren en el navegador: usa effects o la directiva use client para ellos. La salida de servidor no los necesita: renderBlocks dibuja HTML terminado sin DOM alguno, cubierto abajo.

No llames a Editor.create ni a Renderer.render dentro de un componente de servidor; necesitan un document real. Para renderizar en el servidor, usa renderBlocks.

Renderizado en el servidor

renderBlocks dibuja el mismo documento en una cadena HTML terminada sin DOM, así que el servidor envía marcado real: los rastreadores lo leen y nada se repinta al montar. Sirve pageStylesheet() al lado, y llama a activateBlocks tras el montaje.

TypeScript

import { activateBlocks, pageStylesheet, renderBlocks } from '@clepit/core';

// On the server: finished HTML, no DOM needed
const html = renderBlocks(doc.blocks);
const css = pageStylesheet();

// In the browser, after mount: wire the interactive blocks
const dispose = activateBlocks(container, doc.blocks);

¿Usas React? @clepit/react empaqueta exactamente este pipeline como ClepitContent, un componente server-first; consulta la página de React.

Independiente del framework

El paquete central @clepit/core es TypeScript puro, sin dependencia de React. Ya uses React, Vue, Svelte, Angular o TS/JS puro, todos utilizan la misma API.

Primeros pasos