{"id":25656349,"url":"https://github.com/bluefrog130/editable-kit","last_synced_at":"2026-06-13T13:34:13.558Z","repository":{"id":278965653,"uuid":"820714488","full_name":"BlueFrog130/editable-kit","owner":"BlueFrog130","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-14T15:21:41.000Z","size":592,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-14T15:26:57.101Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlueFrog130.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-27T03:21:53.000Z","updated_at":"2026-05-14T15:20:06.000Z","dependencies_parsed_at":"2025-02-22T21:20:40.489Z","dependency_job_id":"6958c616-6bcd-4e6b-a3a8-61686592a3cc","html_url":"https://github.com/BlueFrog130/editable-kit","commit_stats":null,"previous_names":["bluefrog130/editable-kit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BlueFrog130/editable-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueFrog130%2Feditable-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueFrog130%2Feditable-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueFrog130%2Feditable-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueFrog130%2Feditable-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlueFrog130","download_url":"https://codeload.github.com/BlueFrog130/editable-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlueFrog130%2Feditable-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34286975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-13T02:00:06.617Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-23T22:29:40.963Z","updated_at":"2026-06-13T13:34:13.553Z","avatar_url":"https://github.com/BlueFrog130.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003eeditable-kit\u003c/h1\u003e\n  \u003cp align=\"center\"\u003e\n    Inline editing components for Svelte 5 — text, rich text, and images with cropping.\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/editable-kit\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/editable-kit?color=%23f43f5e\u0026label=npm\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/BlueFrog130/editable-kit/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/editable-kit?color=%234f46e5\" alt=\"license\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/editable-kit\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/editable-kit?color=%2310b981\" alt=\"downloads\"\u003e\u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/svelte-5-ff3e00\" alt=\"Svelte 5\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bluefrog130.github.io/editable-kit/\"\u003eLive Demo\u003c/a\u003e · \u003ca href=\"https://github.com/BlueFrog130/editable-kit\"\u003eGitHub\u003c/a\u003e · \u003ca href=\"https://www.npmjs.com/package/editable-kit\"\u003enpm\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\nTurn any Svelte 5 page into an editable CMS-like experience. Drop in `\u003cEditable.Root\u003e` and `\u003cEditable.Data\u003e`, and your users can edit text, rich content, and images inline — no separate admin panel needed.\n\n## Features\n\n- **Plain text editing** — Single-line and multiline `contenteditable` fields\n- **Rich text editing** — Full WYSIWYG powered by [TipTap](https://tiptap.dev/) (bold, italic, headings, links, lists, blockquotes, and more)\n- **Image editing** — Pan/zoom cropping with WebP export via `OffscreenCanvas`\n- **Floating toolbar** — Context-aware formatting toolbar that appears on selection\n- **Type-safe** — Generic `Editable.Data\u003cT\u003e` enforces correct property selectors at the snippet level\n- **Lazy-loaded** — TipTap and the toolbar are dynamically imported to minimize bundle size\n- **Svelte 5 runes** — Built entirely with `$state`, `$derived`, `$effect`, and snippets\n- **ProseMirror JSON renderer** — Render saved rich text content without loading the editor\n\n## Installation\n\n```bash\npnpm add editable-kit\n```\n\n```bash\nnpm install editable-kit\n```\n\n```bash\nyarn add editable-kit\n```\n\n\u003e **Peer dependency:** `svelte ^5.0.0`\n\n## Quick Start\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport * as Editable from 'editable-kit';\n\timport type { ProseMirrorJSON, ImageState } from 'editable-kit';\n\n\ttype PageData = {\n\t\ttitle: ProseMirrorJSON;\n\t\tbody: ProseMirrorJSON;\n\t\timage: ImageState;\n\t};\n\n\tlet data: PageData = $state({} as PageData); // your data here\n\tlet editing = $state(false);\n\n\tasync function handleSave(allData) {\n\t\tconst page = allData.get('page');\n\t\tif (page) {\n\t\t\t// Send to your API, save to IndexedDB, etc.\n\t\t\tconsole.log(page.title, page.body, page.image);\n\t\t}\n\t\tediting = false;\n\t}\n\u003c/script\u003e\n\n\u003cbutton onclick={() =\u003e (editing = !editing)}\u003e\n\t{editing ? 'Cancel' : 'Edit'}\n\u003c/button\u003e\n\n\u003cEditable.Root {editing} onsave={handleSave}\u003e\n\t{#snippet children({ state, save, editing })}\n\t\t\u003cEditable.Data key=\"page\" {data}\u003e\n\t\t\t{#snippet children({ text, rich, image })}\n\t\t\t\t\u003ch1\u003e{@render text('title')}\u003c/h1\u003e\n\t\t\t\t\u003cdiv\u003e{@render rich('body')}\u003c/div\u003e\n\t\t\t\t{@render image('image', { maxWidth: 800, maxHeight: 500, quality: 0.85 })}\n\t\t\t{/snippet}\n\t\t\u003c/Editable.Data\u003e\n\n\t\t{#if editing}\n\t\t\t\u003cbutton onclick={save}\u003eSave\u003c/button\u003e\n\t\t{/if}\n\t{/snippet}\n\u003c/Editable.Root\u003e\n```\n\n## Core Concepts\n\n### Editable.Root\n\nThe root context provider. Controls whether editing is enabled and coordinates save operations across all nested `Editable.Data` components.\n\n```svelte\n\u003cEditable.Root {editing} onsave={handleSave}\u003e\n\t{#snippet children({ state, save })}\n\t\t\u003c!-- your editable content --\u003e\n\t{/snippet}\n\u003c/Editable.Root\u003e\n```\n\n### Editable.Data\n\nWraps a data object and exposes typed snippet renderers for each field. The `key` prop identifies this data group when saving.\n\n```svelte\n\u003cEditable.Data key=\"hero\" {data}\u003e\n\t{#snippet children({ text, rich, image })}\n\t\t{@render text('title')}\n\t\t{@render rich('description')}\n\t\t{@render image('cover', { maxWidth: 1200, quality: 0.9 })}\n\t{/snippet}\n\u003c/Editable.Data\u003e\n```\n\n### Editable.Each\n\nRender arrays of editable items with full type safety.\n\n```svelte\n\u003cEditable.Each key=\"posts\" items={posts}\u003e\n\t{#snippet children({ text, rich, image }, item, index)}\n\t\t\u003carticle\u003e\n\t\t\t{@render text('title')}\n\t\t\t{@render rich('body')}\n\t\t\u003c/article\u003e\n\t{/snippet}\n\u003c/Editable.Each\u003e\n```\n\n### Renderer\n\nRender ProseMirror JSON as HTML without loading the editor — perfect for read-only views and SSR.\n\n```svelte\n\u003cscript\u003e\n\timport { Renderer } from 'editable-kit/renderer';\n\u003c/script\u003e\n\n\u003cRenderer content={data.body} /\u003e\n```\n\n## Editor Types\n\n| Snippet | Data Type         | Description                                  |\n| ------- | ----------------- | -------------------------------------------- |\n| `text`  | `ProseMirrorJSON` | Single-line plain text                       |\n| `rich`  | `ProseMirrorJSON` | Full rich text with formatting toolbar       |\n| `image` | `ImageState`      | Image with pan/zoom cropping and WebP export |\n\n## Exports\n\n```ts\n// Main entry — context components + types\nimport * as Editable from 'editable-kit';\nimport { Root, Data, Each, EditableState, Renderer } from 'editable-kit';\n\n// Standalone editors (for advanced use)\nimport { PlainText, MultilineText, RichText, EditableImage } from 'editable-kit/editors';\n\n// Read-only renderer\nimport { Renderer } from 'editable-kit/renderer';\n```\n\n## Development\n\n```bash\npnpm install          # Install dependencies\npnpm dev              # Start dev server\npnpm build            # Build app + library\npnpm package          # Package library only\npnpm check            # Type check\npnpm test             # Run tests\npnpm lint             # Check formatting\npnpm format           # Auto-format\n```\n\n## License\n\n[MIT](LICENSE) — Made by [BlueFrog130](https://github.com/BlueFrog130)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluefrog130%2Feditable-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluefrog130%2Feditable-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluefrog130%2Feditable-kit/lists"}