{"id":15020564,"url":"https://github.com/typecellos/blocknote","last_synced_at":"2025-05-12T05:12:03.088Z","repository":{"id":57863609,"uuid":"465199957","full_name":"TypeCellOS/BlockNote","owner":"TypeCellOS","description":"A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.","archived":false,"fork":false,"pushed_at":"2025-05-09T14:52:12.000Z","size":80037,"stargazers_count":7987,"open_issues_count":275,"forks_count":539,"subscribers_count":41,"default_branch":"main","last_synced_at":"2025-05-12T05:11:55.856Z","etag":null,"topics":["block-based","editor","javascript","notion","notion-editor","prosemirror","react","rich-text-editor","tiptap","typescript","wysiwyg","yjs"],"latest_commit_sha":null,"homepage":"https://www.blocknotejs.org/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TypeCellOS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":"yousefed"}},"created_at":"2022-03-02T07:24:48.000Z","updated_at":"2025-05-11T14:30:44.000Z","dependencies_parsed_at":"2025-05-11T05:09:39.371Z","dependency_job_id":null,"html_url":"https://github.com/TypeCellOS/BlockNote","commit_stats":{"total_commits":600,"total_committers":58,"mean_commits":"10.344827586206897","dds":0.6333333333333333,"last_synced_commit":"8867e6411d6e698e667b7ac22697bcf76f763937"},"previous_names":[],"tags_count":123,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeCellOS%2FBlockNote","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeCellOS%2FBlockNote/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeCellOS%2FBlockNote/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TypeCellOS%2FBlockNote/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TypeCellOS","download_url":"https://codeload.github.com/TypeCellOS/BlockNote/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253678900,"owners_count":21946319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["block-based","editor","javascript","notion","notion-editor","prosemirror","react","rich-text-editor","tiptap","typescript","wysiwyg","yjs"],"created_at":"2024-09-24T19:55:16.364Z","updated_at":"2025-05-12T05:12:03.034Z","avatar_url":"https://github.com/TypeCellOS.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.blocknotejs.org\"\u003e\n    \u003cimg alt=\"TypeCell\" src=\"https://github.com/TypeCellOS/BlockNote/raw/main/docs/public/img/logos/banner.svg?raw=true\" width=\"300\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nWelcome to BlockNote! The open source Block-Based\nReact rich text editor. Easily add a modern text editing experience to your app.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://discord.gg/Qc2QTTH5dF\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/badge/Chat on discord%20-%237289DA.svg?\u0026style=for-the-badge\u0026logo=discord\u0026logoColor=white\"/\u003e\u003c/a\u003e \n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.blocknotejs.org\"\u003e\n    Homepage\n  \u003c/a\u003e - \u003ca href=\"https://www.blocknotejs.org/docs/introduction\"\u003e\n    Documentation\n  \u003c/a\u003e - \u003ca href=\"https://www.blocknotejs.org/docs/quickstart\"\u003e\n    Quickstart\n  \u003c/a\u003e- \u003ca href=\"https://www.blocknotejs.org/examples\"\u003e\n    Examples\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Live demo\n\nSee our homepage @ [https://www.blocknotejs.org](https://www.blocknotejs.org/) or browse the [examples](https://www.blocknotejs.org/examples).\n\n# Example code (React)\n\n[![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact)\n\n```typescript\nimport { useCreateBlockNote } from \"@blocknote/react\";\nimport { BlockNoteView } from \"@blocknote/mantine\";\nimport \"@blocknote/core/fonts/inter.css\";\nimport \"@blocknote/mantine/style.css\";\n\nfunction App() {\n  const editor = useCreateBlockNote();\n\n  return \u003cBlockNoteView editor={editor} /\u003e;\n}\n```\n\n`@blocknote/react` comes with a fully styled UI that makes it an instant, polished editor ready to use in your app.\n\nIf you prefer to create your own UI components (menus), or don't want to use React, you can use `@blocknote/core` (_advanced_, [see docs](https://www.blocknotejs.org/docs/vanilla-js)).\n\n# Features\n\nBlockNote comes with a number of features and components to make it easy to embed a high-quality block-based editor in your app:\n\n### Animations:\n\n\u003cimg src=\"https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/animations.gif?raw=true\" width=\"400\" /\u003e\n\n### Helpful placeholders:\n\n\u003cimg src=\"https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/placeholders.gif?raw=true\" width=\"400\" /\u003e\n\n### Drag and drop blocks:\n\n\u003cimg src=\"https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true\" width=\"400\" /\u003e\n\n### Nesting / indentation with tab and shift+tab:\n\n\u003cimg src=\"https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/nesting.gif?raw=true\" width=\"400\" /\u003e\n\n### Slash (/) menu:\n\n\u003cimg src=\"https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/slashmenu.gif?raw=true\" width=\"400\" /\u003e\n\n### Format menu:\n\n\u003cimg src=\"https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/selectmenu.gif?raw=true\" width=\"400\" /\u003e\n\n### Real-time collaboration:\n\n\u003cimg src=\"https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/collaboration.gif?raw=true\" width=\"400\" /\u003e\n\n# Feedback 🙋‍♂️🙋‍♀️\n\nWe'd love to hear your thoughts and see your experiments, so [come and say hi on Discord](https://discord.gg/Qc2QTTH5dF) or [Matrix](https://matrix.to/#/#typecell-space:matrix.org).\n\n# Contributing 🙌\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for more info and guidance on how to run the project (TLDR: just use `npm start`).\n\nDirectory structure:\n\n```\nblocknote\n├── packages/core       - The core of the editor\n├── packages/react      - The main library for use in React apps\n├── packages/mantine    - Mantine (default) implementation of BlockNote UI\n├── packages/ariakit    - AriaKit implementation of BlockNote UI\n├── packages/shadcn     - ShadCN / Tailwind / Radix implementation of BlockNote UI\n├── examples            - Example apps\n├── playground          - App to browse the example apps (https://playground.blocknotejs.org)\n└── tests               - Playwright end to end tests\n```\n\nThe codebase is automatically tested using Vitest and Playwright.\n\n# License 📃\n\nBlockNote is licensed under the [MPL 2.0 license](https://fossa.com/blog/open-source-software-licenses-101-mozilla-public-license-2-0/), which allows you to use BlockNote in commercial (and closed-source) applications. If you make changes to the BlockNote source files, you're expected to publish these changes so the wider community can benefit as well.\n\n# Credits ❤️\n\nBlockNote builds directly on two awesome projects; [Prosemirror](https://prosemirror.net/) by Marijn Haverbeke and [Tiptap](https://tiptap.dev/). Consider sponsoring those libraries when using BlockNote: [Prosemirror](https://marijnhaverbeke.nl/fund/), [Tiptap](https://github.com/sponsors/ueberdosis).\n\nBlockNote is built as part of [TypeCell](https://www.typecell.org). TypeCell is proudly sponsored by the renowned [NLNet foundation](https://nlnet.nl/foundation/) who are on a mission to support an open internet, and protect the privacy and security of internet users. Check them out!\n\n\u003ca href=\"https://nlnet.nl\"\u003e\u003cimg src=\"https://nlnet.nl/image/logos/NGIAssure_tag.svg\" alt=\"NLNet\" width=\"100\"\u003e\u003c/a\u003e\n\nHosting and deployments powered by Vercel:\n\n\u003ca href=\"https://vercel.com/?utm_source=TypeCell\u0026utm_campaign=oss\"\u003e\u003cimg src=\"https://images.ctfassets.net/e5382hct74si/78Olo8EZRdUlcDUFQvnzG7/fa4cdb6dc04c40fceac194134788a0e2/1618983297-powered-by-vercel.svg\" alt=\"NLNet\" width=\"150\"\u003e\u003c/a\u003e\n\nThis project is tested with BrowserStack\n","funding_links":["https://github.com/sponsors/yousefed","https://github.com/sponsors/ueberdosis"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypecellos%2Fblocknote","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypecellos%2Fblocknote","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypecellos%2Fblocknote/lists"}