Setup

Getting Started

Install the package and set up your first editable page in minutes.

Installation

Install the package and its peer dependency.

pnpm add editable-kit svelte

Quick Start

A minimal example with a plain text editor, a rich text editor, and an image editor. Try the live version first, then see the code below.

Quick Start Demo

Welcome to editable-kit

This is a complete working example. Toggle editing, change the text, and hit save. The content persists in component state.

Open journal on a desk
<script lang="ts">
  import * as Editable from 'editable-kit';
  import type { ProseMirrorJSON, ImageState } from 'editable-kit';

  type PageData = {
    title: ProseMirrorJSON;
    body: ProseMirrorJSON;
    image: ImageState;
  };

  let data: PageData = $state({} as PageData); // your data here
  let editing = $state(false);

  async function handleSave(allData) {
    const page = allData.get('page');
    if (page) {
      // Send to your API, save to IndexedDB, etc.
      console.log(page.title, page.body, page.image);
    }
    editing = false;
  }
</script>

<button onclick={() => editing = !editing}>
  {editing ? 'Cancel' : 'Edit'}
</button>

<Editable.Root {editing} onsave={handleSave}>
  {#snippet children({ state, save, editing })}
    <Editable.Data key="page" {data}>
      {#snippet children({ text, rich, image })}
        <h1>{@render text('title')}</h1>
        <div>{@render rich('body')}</div>
        {@render image('image', { maxWidth: 800, maxHeight: 500, quality: 0.85 })}
      {/snippet}
    </Editable.Data>

    {#if editing}
      <button onclick={save}>Save</button>
    {/if}
  {/snippet}
</Editable.Root>