{"id":50226077,"url":"https://github.com/inokawa/editate","last_synced_at":"2026-05-29T12:01:21.324Z","repository":{"id":261618399,"uuid":"758331628","full_name":"inokawa/editate","owner":"inokawa","description":"An experimental, type-safe, framework agnostic and small (5kB+) contenteditable state manager.","archived":false,"fork":false,"pushed_at":"2026-05-26T15:12:09.000Z","size":55544,"stargazers_count":122,"open_issues_count":55,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-26T15:46:51.748Z","etag":null,"topics":["angular","autocomplete","contenteditable","editor","headlessui","highlight","input","preact","react","rich-text","schema","solid","svelte","tagging","textarea","vue","wysiwyg"],"latest_commit_sha":null,"homepage":"https://inokawa.github.io/editate/","language":"TypeScript","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/inokawa.png","metadata":{"files":{"readme":"README.md","changelog":null,"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},"funding":{"github":["inokawa"]}},"created_at":"2024-02-16T04:44:44.000Z","updated_at":"2026-05-26T15:25:34.000Z","dependencies_parsed_at":"2025-12-29T08:10:29.225Z","dependency_job_id":null,"html_url":"https://github.com/inokawa/editate","commit_stats":null,"previous_names":["inokawa/edix","inokawa/editate"],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/inokawa/editate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Feditate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Feditate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Feditate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Feditate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inokawa","download_url":"https://codeload.github.com/inokawa/editate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Feditate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33650712,"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-05-29T02:00:06.066Z","response_time":107,"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":["angular","autocomplete","contenteditable","editor","headlessui","highlight","input","preact","react","rich-text","schema","solid","svelte","tagging","textarea","vue","wysiwyg"],"created_at":"2026-05-26T15:46:43.523Z","updated_at":"2026-05-29T12:01:21.317Z","avatar_url":"https://github.com/inokawa.png","language":"TypeScript","funding_links":["https://github.com/sponsors/inokawa"],"categories":["State Management"],"sub_categories":["Other State Libraries"],"readme":"# editate\n\n![npm](https://img.shields.io/npm/v/editate) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/editate) ![npm](https://img.shields.io/npm/dw/editate) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/inokawa/editate) [![check](https://github.com/inokawa/editate/actions/workflows/check.yml/badge.svg)](https://github.com/inokawa/editate/actions/workflows/check.yml) [![demo](https://github.com/inokawa/editate/actions/workflows/demo.yml/badge.svg)](https://github.com/inokawa/editate/actions/workflows/demo.yml)\n\n\u003e An experimental, type-safe, framework agnostic and small (5kB+) [contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable) state manager.\n\n## Motivation\n\nWeb editing is so hard even today. There are excellent libraries to make complex rich text editor, but they are too much for small purposes. Native [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element is accessible and easy to use, but it's hardly customizable.\n\n[contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute is a primitive for rich text editing, [that was designed for Internet Explorer and copied by other browsers](https://blog.whatwg.org/the-road-to-html-5-contenteditable). As you may know it has [so many problems](https://github.com/grammarly/contenteditable). It has no clear spec, it has many edge case bugs, and has cross browser/OS/input device problems. And it doesn't work well with declarative frontend frameworks... However, at least the core of contenteditable is stable and it works in all browsers except the inconsistencies. This library aims to fill that gap, fix contenteditable to fit modern web development.\n\n## Demo\n\n- [React Storybook](https://inokawa.github.io/editate/)\n- [Framework examples](#other-examples)\n\n## Install\n\n```sh\nnpm install editate\n```\n\n`typescript \u003e=5.0` is recommended.\n\n### Supported browsers\n\nBrowser versions supporting [beforeinput event](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforeinput_event#browser_compatibility) are supported.\n\nMobile browsers are also supported, but with some issues (https://github.com/inokawa/editate/issues/97).\n\n## Getting started\n\n1. Define your document as a state.\n2. Define your editor view declaratively. There are rules you have to follow:\n   - You must render all texts in the document as Text nodes in DOM.\n   - You must render `\u003cbr/\u003e` in empty blocks (limitation of contenteditable).\n   - You must render hard breaks in the document as [block element](https://github.com/inokawa/editate/blob/ecd70f084f2fbb54d36bfd3b682f2dd8bbc3f547/src/dom/default.ts#L25).\n   - You must render void nodes in the document as [void element](https://github.com/inokawa/editate/blob/ecd70f084f2fbb54d36bfd3b682f2dd8bbc3f547/src/dom/default.ts#L47).\n3. Use `createPlainEditor`/`createEditor` to initialize `Editor` with the document.\n4. Call `Editor.input` on mount, with `HTMLElement` which is the root of editor view.\n5. Update your state with `onChange`, which will be called on edit.\n6. Call returned function from `Editor.input` on unmount for cleanup.\n\nHere is an example for React.\n\n### Plain text\n\n```tsx\nimport { useState, useEffect, useRef } from \"react\";\nimport { createPlainEditor } from \"editate\";\n\nexport const App = () =\u003e {\n  const ref = useRef\u003cHTMLDivElement\u003e(null);\n  // 1. Define state\n  const [text, setText] = useState(\"Hello world.\");\n\n  useEffect(() =\u003e {\n    // 3. init\n    const editor = createPlainEditor({\n      text: text,\n      onChange: (v) =\u003e {\n        // 5. update state\n        setText(v);\n      },\n    });\n    // 4. bind to DOM\n    const cleanup = editor.input(ref.current);\n    return () =\u003e {\n      // 6. cleanup DOM\n      cleanup();\n    };\n  }, []);\n\n  // 2. render from state\n  return (\n    \u003cdiv\n      ref={ref}\n      style={{\n        backgroundColor: \"white\",\n        border: \"solid 1px darkgray\",\n        padding: 8,\n      }}\n    \u003e\n      {text.split(\"\\n\").map((t, i) =\u003e (\n        \u003cdiv key={i}\u003e{t ? t : \u003cbr /\u003e}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n```\n\n### Rich text\n\nYou can define document schema with [Standard Schema](https://github.com/standard-schema/standard-schema) for type-safe editing.\n\n```tsx\nimport { useState, useEffect, useRef, useMemo } from \"react\";\nimport { createEditor, ToggleFormat, ToggleBlockAttr } from \"editate\";\nimport * as z from \"zod\";\n\nconst schema = z.strictObject({\n  children: z.array(\n    z.strictObject({\n      align: z.enum([\"left\", \"right\"]).optional(),\n      children: z.array(\n        z.strictObject({\n          text: z.string(),\n          bold: z.boolean().optional(),\n          italic: z.boolean().optional(),\n        }),\n      ),\n    }),\n  ),\n});\n\nexport const App = () =\u003e {\n  const ref = useRef\u003cHTMLDivElement\u003e(null);\n\n  type Doc = z.infer\u003ctypeof schema\u003e;\n  const [doc, setDoc] = useState\u003cDoc\u003e({\n    children: [\n      {\n        children: [\n          { text: \"Hello\", bold: true },\n          { text: \" \" },\n          { text: \"World\", italic: true },\n          { text: \".\" },\n        ],\n      },\n    ],\n  });\n\n  const editor = useMemo(\n    () =\u003e\n      createEditor({\n        doc,\n        schema,\n        onChange: setDoc,\n      }),\n    [],\n  );\n\n  useEffect(() =\u003e {\n    return editor.input(ref.current);\n  }, []);\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        \u003cbutton\n          onClick={() =\u003e {\n            editor.exec(ToggleFormat, \"bold\");\n          }}\n        \u003e\n          bold\n        \u003c/button\u003e\n        \u003cbutton\n          onClick={() =\u003e {\n            editor.exec(ToggleFormat, \"italic\");\n          }}\n        \u003e\n          italic\n        \u003c/button\u003e\n        \u003cbutton\n          onClick={() =\u003e {\n            editor.exec(ToggleBlockAttr, \"align\", \"right\", undefined);\n          }}\n        \u003e\n          align\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv\n        ref={ref}\n        style={{\n          backgroundColor: \"white\",\n          border: \"solid 1px darkgray\",\n          padding: 8,\n        }}\n      \u003e\n        {doc.children.map((b, i) =\u003e (\n          \u003cdiv key={i} style={{ textAlign: b.align }}\u003e\n            {b.children.map((n, j) =\u003e (\n              \u003cspan\n                key={j}\n                style={{\n                  fontWeight: n.bold ? \"bold\" : undefined,\n                  fontStyle: n.italic ? \"italic\" : undefined,\n                }}\n              \u003e\n                {n.text || \u003cbr /\u003e}\n              \u003c/span\u003e\n            ))}\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Other examples\n\n- React ([Demo](https://inokawa.github.io/editate/react), [Source](./examples/react))\n- Vue ([Demo](https://inokawa.github.io/editate/vue), [Source](./examples/vue))\n- Svelte ([Demo](https://inokawa.github.io/editate/svelte), [Source](./examples/svelte))\n- Solid ([Demo](https://inokawa.github.io/editate/solid), [Source](./examples/solid))\n- Angular ([Demo](https://inokawa.github.io/editate/angular), [Source](./examples/angular))\n- Preact ([Demo](https://inokawa.github.io/editate/preact), [Source](./examples/preact))\n- Vanilla ([Demo](https://inokawa.github.io/editate/vanilla), [Source](./examples/vanilla))\n\n...and more! Contribution welcome!\n\n## Documentation\n\n- [API reference](./docs/API.md)\n- [Storybook examples](./stories) for more usages\n- [DeepWiki](https://deepwiki.com/inokawa/editate)\n\n## Contribute\n\nAll contributions are welcome.\nIf you find a problem, feel free to create an [issue](https://github.com/inokawa/editate/issues) or a [PR](https://github.com/inokawa/editate/pulls). If you have a question, ask in [discussions](https://github.com/inokawa/editate/discussions).\n\n### Making a Pull Request\n\n1. Fork this repo.\n2. Run `npm install`.\n3. Commit your fix.\n4. Make a PR and confirm all the CI checks passed.\n\n## Inspirations\n\n- [ProseMirror](https://prosemirror.net/)\n- [Slate](https://github.com/ianstormtaylor/slate)\n- [Lexical](https://github.com/facebook/lexical)\n- [Quill](https://github.com/slab/quill)\n- [Tiptap](https://github.com/ueberdosis/tiptap)\n- [Draft.js](https://github.com/facebookarchive/draft-js)\n- [rich-textarea](https://github.com/inokawa/rich-textarea) (my early project)\n- [use-editable](https://github.com/FormidableLabs/use-editable)\n- [@react-libraries/markdown-editor](https://github.com/ReactLibraries/markdown-editor)\n- [VS Code](https://github.com/microsoft/vscode)\n- [Language Server Protocol](https://github.com/microsoft/language-server-protocol)\n- [urql](https://github.com/urql-graphql/urql)\n- [TanStack DB](https://github.com/tanstack/db)\n- [Hono](https://github.com/honojs/hono)\n- [Textbus](https://github.com/textbus/textbus)\n- [vistree](https://github.com/mizchi/vistree)\n- Proposed [EditContext API](https://github.com/w3c/edit-context)\n- Proposed [Richer Text Fields](https://open-ui.org/components/richer-text-fields.explainer/) in [Open UI](https://open-ui.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokawa%2Feditate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finokawa%2Feditate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokawa%2Feditate/lists"}