https://github.com/bluefrog130/editable-kit
https://github.com/bluefrog130/editable-kit
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bluefrog130/editable-kit
- Owner: BlueFrog130
- License: mit
- Created: 2024-06-27T03:21:53.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-05-14T15:21:41.000Z (3 months ago)
- Last Synced: 2026-05-14T15:26:57.101Z (3 months ago)
- Language: Svelte
- Size: 578 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
editable-kit
Inline editing components for Svelte 5 — text, rich text, and images with cropping.
---
Turn any Svelte 5 page into an editable CMS-like experience. Drop in `` and ``, and your users can edit text, rich content, and images inline — no separate admin panel needed.
## Features
- **Plain text editing** — Single-line and multiline `contenteditable` fields
- **Rich text editing** — Full WYSIWYG powered by [TipTap](https://tiptap.dev/) (bold, italic, headings, links, lists, blockquotes, and more)
- **Image editing** — Pan/zoom cropping with WebP export via `OffscreenCanvas`
- **Floating toolbar** — Context-aware formatting toolbar that appears on selection
- **Type-safe** — Generic `Editable.Data` enforces correct property selectors at the snippet level
- **Lazy-loaded** — TipTap and the toolbar are dynamically imported to minimize bundle size
- **Svelte 5 runes** — Built entirely with `$state`, `$derived`, `$effect`, and snippets
- **ProseMirror JSON renderer** — Render saved rich text content without loading the editor
## Installation
```bash
pnpm add editable-kit
```
```bash
npm install editable-kit
```
```bash
yarn add editable-kit
```
> **Peer dependency:** `svelte ^5.0.0`
## Quick Start
```svelte
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;
}
(editing = !editing)}>
{editing ? 'Cancel' : 'Edit'}
{#snippet children({ state, save, editing })}
{#snippet children({ text, rich, image })}
{@render text('title')}
{@render rich('body')}
{@render image('image', { maxWidth: 800, maxHeight: 500, quality: 0.85 })}
{/snippet}
{#if editing}
Save
{/if}
{/snippet}
```
## Core Concepts
### Editable.Root
The root context provider. Controls whether editing is enabled and coordinates save operations across all nested `Editable.Data` components.
```svelte
{#snippet children({ state, save })}
{/snippet}
```
### Editable.Data
Wraps a data object and exposes typed snippet renderers for each field. The `key` prop identifies this data group when saving.
```svelte
{#snippet children({ text, rich, image })}
{@render text('title')}
{@render rich('description')}
{@render image('cover', { maxWidth: 1200, quality: 0.9 })}
{/snippet}
```
### Editable.Each
Render arrays of editable items with full type safety.
```svelte
{#snippet children({ text, rich, image }, item, index)}
{@render text('title')}
{@render rich('body')}
{/snippet}
```
### Renderer
Render ProseMirror JSON as HTML without loading the editor — perfect for read-only views and SSR.
```svelte
import { Renderer } from 'editable-kit/renderer';
```
## Editor Types
| Snippet | Data Type | Description |
| ------- | ----------------- | -------------------------------------------- |
| `text` | `ProseMirrorJSON` | Single-line plain text |
| `rich` | `ProseMirrorJSON` | Full rich text with formatting toolbar |
| `image` | `ImageState` | Image with pan/zoom cropping and WebP export |
## Exports
```ts
// Main entry — context components + types
import * as Editable from 'editable-kit';
import { Root, Data, Each, EditableState, Renderer } from 'editable-kit';
// Standalone editors (for advanced use)
import { PlainText, MultilineText, RichText, EditableImage } from 'editable-kit/editors';
// Read-only renderer
import { Renderer } from 'editable-kit/renderer';
```
## Development
```bash
pnpm install # Install dependencies
pnpm dev # Start dev server
pnpm build # Build app + library
pnpm package # Package library only
pnpm check # Type check
pnpm test # Run tests
pnpm lint # Check formatting
pnpm format # Auto-format
```
## License
[MIT](LICENSE) — Made by [BlueFrog130](https://github.com/BlueFrog130)