Memulai

Instal paket, pasang ke elemen kontainer mana pun berdasarkan id, dan ekstrak JSON yang bersih kapan pun Anda membutuhkannya. Clepit tidak memiliki ketergantungan framework, sehingga dapat masuk ke React, Vue, Svelte, atau JavaScript murni tanpa wrapper.

Instal

Tambahkan @clepit/core ke proyek Anda. Editor dikirim sebagai satu bundel ESM beserta definisi TypeScript.

bun add @clepit/core

Buat editor

Tambahkan div, lalu panggil Editor.create dengan opsi EditorConfig yang Anda butuhkan. containerId adalah satu-satunya field yang diperlukan; sisanya opsional.

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

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

Edit & simpan

Panggil editor.data.extract() setelah pengguna menulis untuk melakukan serialisasi ke dalam bentuk JSON EditorData. Muatan membawa array { blocks } dengan setiap blok.

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

Render hanya-baca

Gunakan Renderer.render untuk menghasilkan HTML dari EditorData yang disimpan di mana saja. Renderer tidak menyimpan state apa pun. Hanya membutuhkan div dengan containerId.

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

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

Tidak bergantung pada framework

@clepit/core tidak memiliki ketergantungan framework peer. Baik Editor.create maupun Renderer.render hanya memerlukan DOM API lengkap: React, Vue, Svelte, atau skrip vanilla semuanya berfungsi langsung.