# @syncfusion/ej2-blockeditor > Feature Rich Block Editor control with built in support editing, formatting content. Latest version **35.1.37** (published 2026-09-29) · SEE LICENSE IN license license · 0 weekly downloads ## Install ```sh npm install @syncfusion/ej2-blockeditor pnpm add @syncfusion/ej2-blockeditor yarn add @syncfusion/ej2-blockeditor bun add @syncfusion/ej2-blockeditor ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; large bundle. ## Facts | | | |---|---| | Version | 35.1.37 | | Published | 2026-09-29 | | First published | 2025-06-25 | | Weekly downloads | 0 | | License | SEE LICENSE IN license | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 13.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 448 | | Author | Syncfusion Inc. | | Maintainers | syncfusionorg, essentialjs2, syncfusion-javascript | | Keywords | ej2, syncfusion, blockeditor, blocks, editor, notion, modular-editor, block-based, inline-editor | ## Links - npm: https://www.npmjs.com/package/@syncfusion/ej2-blockeditor - Repository: https://github.com/syncfusion/ej2-javascript-ui-controls - Homepage: https://www.syncfusion.com/javascript-ui-controls - Issues: https://github.com/syncfusion/ej2-javascript-ui-controls/issues - npm.io page: https://npm.io/package/@syncfusion/ej2-blockeditor ## Dependencies (10) - [@syncfusion/ej2-base](https://npm.io/package/@syncfusion/ej2-base.md) ~35.1.37 - [@syncfusion/ej2-lists](https://npm.io/package/@syncfusion/ej2-lists.md) ~35.1.37 - [@syncfusion/ej2-inputs](https://npm.io/package/@syncfusion/ej2-inputs.md) ~35.1.37 - [@syncfusion/ej2-popups](https://npm.io/package/@syncfusion/ej2-popups.md) ~35.1.37 - [@syncfusion/ej2-buttons](https://npm.io/package/@syncfusion/ej2-buttons.md) ~35.1.37 - [@syncfusion/ej2-dropdowns](https://npm.io/package/@syncfusion/ej2-dropdowns.md) ~35.1.37 - [@syncfusion/ej2-navigations](https://npm.io/package/@syncfusion/ej2-navigations.md) ~35.1.37 - [@syncfusion/ej2-progressbar](https://npm.io/package/@syncfusion/ej2-progressbar.md) ~35.1.37 - [@syncfusion/ej2-splitbuttons](https://npm.io/package/@syncfusion/ej2-splitbuttons.md) ~35.1.37 - [@syncfusion/ej2-notifications](https://npm.io/package/@syncfusion/ej2-notifications.md) ~35.1.37 ## 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 - 35.1.37 (latest) — 2026-09-29 - 34.2.8 — 2026-09-15 - 34.2.6 — 2026-09-01 - 34.2.5 — 2026-08-25 - 34.2.4 — 2026-08-18 - 34.2.3 — 2026-08-11 - 34.2.2 — 2026-08-05 - 34.1.33 — 2026-07-28 - 34.1.32 — 2026-07-21 - 34.1.29 — 2026-07-06 - 33.2.15 — 2026-06-23 - 33.2.13 — 2026-06-16 - 33.2.12 — 2026-06-09 - 33.2.10 — 2026-06-02 - 33.2.8 — 2026-05-26 - … 45 more at https://npm.io/package/@syncfusion/ej2-blockeditor/versions ## README # JavaScript Block Editor Component > **Using this package with an AI coding agent** > > Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt: > > ```text > Set up this project for Syncfusion before generating code. Fetch > and follow the official instructions at https://ai.syncfusion.com, > then report the detected platform, installed skill pack, MCP > status, and any required licensing action. > ``` > The setup detects your project’s platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills. > > **Platform reference:** [https://ai.syncfusion.com/javascript/llms.txt](https://ai.syncfusion.com/javascript/llms.txt) The Syncfusion [JavaScript Block Editor](https://www.syncfusion.com/rich-text-editor-sdk/javascript-block-editor?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm) is a modern, block-based editor for creating rich and structured content. It is ideal for document editing, knowledge bases, note-taking, and content creation applications. The editor features an intuitive user interface, mobile support, and a modular architecture. It supports a variety of block types, inline elements such as mentions, links, and labels, slash commands, contextual menus, and real-time collaboration for simultaneous multi-user editing. The editor also provides well-structured content models and can generate valid HTML when required.

Getting Started . Online demos . Learn more

JavaScript Block Editor Control

## ⚡️ Quick Start This guide uses Vite as the bundler and development environment for the JavaScript Block Editor. Install [Node.js](https://nodejs.org/) 24.13.0 or higher before proceeding. For detailed information about Vite's capabilities and configuration options, refer to the [Vite documentation](https://vitejs.dev/). ### Create a TypeScript application To set up a TypeScript application, run the following command. ```sh npm create vite@latest my-app -- --template vanilla-ts ``` This command will prompt you to install the required packages and start the application. As Syncfusion packages are not installed yet, select the `No` option. Then, navigate to the project directory and install the dependencies: ```sh cd my-app npm install ``` ### Install the Block Editor package ```sh npm install @syncfusion/ej2-blockeditor ``` ### Add the CSS reference Install the Syncfusion® [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: ```sh npm install @syncfusion/ej2-tailwind3-theme --save ``` Then add the following CSS reference to the `src/style.css` file: ```css @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css"; ``` ### Add the Block Editor component to your application In the `index.html` file, add a target element: ```html
``` In the `src/main.ts` file, import the Block Editor component as shown below: ```ts import { BlockEditor } from '@syncfusion/ej2-blockeditor'; import './style.css'; const editor = new BlockEditor({ height: '500px' }); editor.appendTo('#blockEditor'); ``` ### Run the application ```sh npm run dev ``` Now, open your project in a browser, and the Block Editor will be displayed! 🚀

ℹ️ Note:

For more information on using Block Editor with Syncfusion, refer to our Documentation.
## ✨ Key features * [Real-time collaboration](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/real-time-collaboration?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm): Real-time collaboration enables multiple users to create and edit content simultaneously with synchronized updates across all connected clients. It helps teams work together efficiently while maintaining content consistency and reducing editing conflicts. * [Multiple block types](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/built-in-blocks/built-in-blocks?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm#block-types): Includes Heading levels 1-4, Table, Paragraph, Table, Lists, Checklist, Quote, Callout, Divider, Code block, and more. * [Slash commands](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/editor-menus?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm#slash-command-menu): Interactive `/` commands to insert or transform content blocks, with filtering and keyboard shortcuts. * [Drag and drop](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/drag-drop?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm): Reorder blocks effortlessly with built-in drag-and-drop support. * [Rich text formatting](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/editor-menus?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm#inline-toolbar): Apply styles such as Bold, Italic, Underline, Strikethrough, Uppercase and more. * [Action menu](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/editor-menus?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm#block-action-menu): Perform block-level operations such as Move, Delete, and Duplicate. * [Contextmenu support](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/editor-menus?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm#context-menu): Right-click context menus for quick block actions. * [Inline content support](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/built-in-blocks/inline-content?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm): Insert inline elements like Links, Labels and Mention directly within blocks. * [Undo/Redo operations](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/undo-redo?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm): Undo and redo support for the user interactions. * [Events for Customization](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/events?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm): The Block Editor includes a rich set of events such as block addition, removal, update, selection change, command execution, paste, and mention selection allowing developers to customize and extend functionality easily. * [Accessibility & WCAG 2.0 Compliance](https://help.syncfusion.com/rich-text-editor-sdk/javascript/block-editor/accessibility?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm): Accessibility support for assistive technologies and keyboard navigation. * [Keyboard Navigation](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/keyboard-shortcuts?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm): Navigate and manage blocks efficiently using intuitive keyboard shortcuts for a faster editing experience.

Trusted by the world's leading companies Syncfusion logo

## 🛠️ Supported frameworks Input controls are also offered in following list of frameworks. | [](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)
     [Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)
       [React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## 🏗️ Showcase samples * Real-Time Collaborative Editing - [Live Demo](https://ej2.syncfusion.com/showcase/typescript/blockeditor-collaborative-editing/) * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo]( https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=numerictextbox#/expense) * Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo]( https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=slider) * Cloud Pricing - [Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/azure-pricing.html) ## 📚 Resources * [Documentation](https://help.syncfusion.com/rich-text-editor-sdk/typescript/block-editor/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm) * [Theme Studio](https://ej2.syncfusion.com/themestudio/) * [Custom Resource Generator](https://crg.syncfusion.com/) * [What's New](https://www.syncfusion.com/products/whatsnew/essential-js2?utm_medium=listing&utm_source=github) * [Road Map](https://www.syncfusion.com/products/roadmap/essential-js2?utm_medium=listing&utm_source=github) * [E-Books](https://www.syncfusion.com/ebooks?tag=javascript&utm_medium=listing&utm_source=github) ## 🤝 Support Product support is available through following mediums. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/rich-text-editor-sdk/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm) * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new) * [Request feature or report bug](https://www.syncfusion.com/feedback/rich-text-editor-sdk?utm_source=npm&utm_medium=listing&utm_campaign=javascript-blockeditor-npm) * Live chat ## 🔄 Changelog Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/blockeditor/CHANGELOG.md/?utm_source=npm&utm_campaign=input). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## ⚖️ License and copyright > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license/?utm_source=npm&utm_campaign=input) for more info. © Copyright 2026 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. --- _Source: https://npm.io/package/@syncfusion/ej2-blockeditor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._