# bocknoate-core > A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap. Latest version **0.9.20** (published 2023-11-15) · MPL-2.0 license · 0 weekly downloads ## Install ```sh npm install bocknoate-core pnpm add bocknoate-core yarn add bocknoate-core bun add bocknoate-core ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.9.20 | | Published | 2023-11-15 | | First published | 2023-11-14 | | Weekly downloads | 0 | | License | MPL-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 38 | | Unpacked size | 2.1 MB | | Known vulnerabilities | 0 (+2 in 2 direct dependencies) | | Install scripts | no | | Maintainers | joshlaw | | Keywords | react, javascript, editor, typescript, prosemirror, wysiwyg, rich-text-editor, notion, yjs, block-based, tiptap | ## Links - npm: https://www.npmjs.com/package/bocknoate-core - Homepage: https://github.com/velvetfs/BockNoate - npm.io page: https://npm.io/package/bocknoate-core ## Dependencies (38) - [yjs](https://npm.io/package/yjs.md) ^13.6.1 - [uuid](https://npm.io/package/uuid.md) ^8.3.2 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [unified](https://npm.io/package/unified.md) ^10.1.2 - [@tiptap/pm](https://npm.io/package/@tiptap/pm.md) ^2.1.12 - [remark-gfm](https://npm.io/package/remark-gfm.md) ^3.0.1 - [y-protocols](https://npm.io/package/y-protocols.md) ^1.0.5 - [@tiptap/core](https://npm.io/package/@tiptap/core.md) ^2.1.12 - [rehype-parse](https://npm.io/package/rehype-parse.md) ^8.0.4 - [remark-parse](https://npm.io/package/remark-parse.md) ^10.0.1 - [rehype-remark](https://npm.io/package/rehype-remark.md) ^9.1.2 - [remark-rehype](https://npm.io/package/remark-rehype.md) ^10.1.0 - [y-prosemirror](https://npm.io/package/y-prosemirror.md) 1.2.1 - [@emotion/cache](https://npm.io/package/@emotion/cache.md) ^11.10.5 - [@emotion/utils](https://npm.io/package/@emotion/utils.md) ^1.2.0 - [prosemirror-view](https://npm.io/package/prosemirror-view.md) ^1.32.4 - [rehype-stringify](https://npm.io/package/rehype-stringify.md) ^9.0.3 - [remark-stringify](https://npm.io/package/remark-stringify.md) ^10.0.2 - [prosemirror-model](https://npm.io/package/prosemirror-model.md) ^1.19.3 - [prosemirror-state](https://npm.io/package/prosemirror-state.md) ^1.4.3 - [@emotion/serialize](https://npm.io/package/@emotion/serialize.md) ^1.1.1 - [hast-util-from-dom](https://npm.io/package/hast-util-from-dom.md) ^4.2.0 - [prosemirror-transform](https://npm.io/package/prosemirror-transform.md) ^1.8.0 - [@tiptap/extension-bold](https://npm.io/package/@tiptap/extension-bold.md) ^2.1.12 - [@tiptap/extension-code](https://npm.io/package/@tiptap/extension-code.md) ^2.1.12 - [@tiptap/extension-link](https://npm.io/package/@tiptap/extension-link.md) ^2.1.12 - [@tiptap/extension-text](https://npm.io/package/@tiptap/extension-text.md) ^2.1.12 - [@tiptap/extension-italic](https://npm.io/package/@tiptap/extension-italic.md) ^2.1.12 - [@tiptap/extension-strike](https://npm.io/package/@tiptap/extension-strike.md) ^2.1.12 - [@tiptap/extension-history](https://npm.io/package/@tiptap/extension-history.md) ^2.1.12 - [@tiptap/extension-gapcursor](https://npm.io/package/@tiptap/extension-gapcursor.md) ^2.1.12 - [@tiptap/extension-paragraph](https://npm.io/package/@tiptap/extension-paragraph.md) ^2.1.12 - [@tiptap/extension-underline](https://npm.io/package/@tiptap/extension-underline.md) ^2.1.12 - [@tiptap/extension-dropcursor](https://npm.io/package/@tiptap/extension-dropcursor.md) ^2.1.12 - [@tiptap/extension-hard-break](https://npm.io/package/@tiptap/extension-hard-break.md) ^2.1.12 - [@tiptap/extension-collaboration](https://npm.io/package/@tiptap/extension-collaboration.md) ^2.1.12 - [@tiptap/extension-horizontal-rule](https://npm.io/package/@tiptap/extension-horizontal-rule.md) ^2.1.12 - [@tiptap/extension-collaboration-cursor](https://npm.io/package/@tiptap/extension-collaboration-cursor.md) ^2.1.12 ## Alternatives - [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads - [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads - [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads - [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads - [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads ## Recent versions - 0.9.20 (latest) — 2023-11-15 - 0.9.19 — 2023-11-15 - 0.9.18 — 2023-11-15 - 0.9.9 — 2023-11-14 - 0.9.7 — 2023-11-14 ## README

TypeCell

Welcome to BlockNote! The open source Block-Based rich text editor. Easily add a modern text editing experience to your app.

Discord Matrix

Homepage - Introduction - Documentation

# Live demo Play with the editor @ [https://blocknote-main.vercel.app/](https://blocknote-main.vercel.app/). (Source in [examples/editor](/examples/editor)) # Example code (React) [![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact) ```typescript import { BlockNoteView, useBlockNote } from "bocknoate-react"; import "bocknoate-core/style.css"; function App() { const editor = useBlockNote({ onEditorContentChange: (editor) => { // Log the document to console on every update console.log(editor.getJSON()); }, }); return ; } ``` `bocknoate-react` comes with a fully styled UI that makes it an instant, polished editor ready to use in your app. If you prefer to create your own UI components (menus), or don't want to use React, you can use `bocknoate-core` (_advanced_, [see docs](https://www.blocknotejs.org/docs/vanilla-js)). # Features BlockNote comes with a number of features and components to make it easy to embed a high-quality block-based editor in your app: ### Animations: ### Helpful placeholders: ### Drag and drop blocks: ### Nesting / indentation with tab and shift+tab: ### Slash (/) menu: ### Format menu: ### Real-time collaboration: # Feedback 🙋‍♂️🙋‍♀️ We'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). # Contributing 🙌 See [CONTRIBUTING.md](CONTRIBUTING.md) for more info and guidance on how to run the project (TLDR: just use `npm start`). Directory structure: ``` blocknote ├── packages/core - The core of the editor ├── packages/react - The main library for use in React apps ├── examples/editor - Example React app that embeds the editor ├── examples/vanilla - An advanced example if you don't want to use React or want to build your own UI components └── tests - Playwright end to end tests ``` The codebase is automatically tested using Vitest and Playwright. # License 📃 BlockNote 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. # Credits ❤️ BlockNote 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). BlockNote 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! NLNet Hosting and deployments powered by Vercel: NLNet --- _Source: https://npm.io/package/bocknoate-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._