Create structured content using blocks like headings, lists, images, and tables.
Add and manage blocks easily with slash commands and toolbars.
Rearrange content with drag-and-drop and quick keyboard actions.

Trusted by the world’s leading companies

JavaScript js block editor

JavaScript Block Editor overview

The JavaScript Block Editor is a modern, block-based content editor designed for JavaScript applications. It provides an intuitive and flexible interface for creating rich, structured documents using modular blocks. Developers can easily integrate this JavaScript control to enable drag-and-drop block management, rich text formatting, and media embedding, making it ideal for blogs, CMS platforms, documentation tools, and note-taking apps.

JavaScript Block Editor code example

Get started with the JavaScript Block Editor using a few simple lines of code, as demonstrated below. Also, explore this JavaScript Block Editor example, which shows how to render and configure the control in JavaScript.

html
ts
<div class="control-section">
    <div id="defaultBlockeditor">
    </div>
</div>
import { BlockEditor } from "@syncfusion/ej2-blockeditor"

let defaultEditor: BlockEditor = new BlockEditor({
  blocks: [
    {
        id: 'heading-block',
        type: BlockType.Heading1,
        content: [{ 
            id: 'heading-content',
            type: ContentType.Text,
            content: 'Welcome to the Block Editor Demo!'
        }]
    },
    {
        id: 'intro-block',
        type: BlockType.Paragraph,
        content: [{ 
            id: 'intro-content',
            type: ContentType.Text,
            content: 'The Block Editor is a powerful rich text editor that allows you to create structured content using blocks. Each block can be formatted, moved, or transformed into different types.',
        }]
    },\
  ],`
});
defaultEditor.appendTo('#defaultBlockeditor');

Different block types

The JavaScript Block Editor supports a comprehensive range of block types to create structured rich content. Each block type serves a specific purpose and can be easily inserted, formatted, and managed within the editor:

Paragraph: Standard text block with full rich text support.
Heading (H1-H4): Semantic headings for structured documents.
Collapsible paragraph: Collapsible paragraph sections for progressive disclosure.
Collapsible heading (H1-H4): Collapsible headings combining structure with space-saving.
Checklist: Interactive to-do lists with checkbox states.
Bullet list: Unordered lists with nesting and list blocks support.
Numbered list: Ordered lists for steps and sequences.
Quote: Styled blocks for quotations and testimonials.
Code: Formatted code snippets for technical content.
Image: Image blocks let users add and resize images with format support and alt text.
Callout: Important notes or warnings are highlighted with icons and colors.
Divider: Horizontal separators for section breaks.

Table block

The table block organizes data in a structured grid format for comparisons, schedules, and tabular content. It provides clarity and readability for complex information in JavaScript applications.

Rich text in cells: Apply bold, italic, underline, hyperlinks, mentions, and more inside table cells.
Dynamic row & column management: Add or remove rows and columns with intuitive controls.
Slash menu: Quickly insert or transform blocks inside cells using the slash command.
Context-aware quick actions: Access dedicated keyboard shortcuts for faster navigation and editing.

Table block documentation

JavaScript Block Editor table block

Inline content

The Block Editor offers rich inline content types like text, link, mention, and label, making the text blocks interactive and well-organized.

Text: Plain text forms the foundation of all blocks and supports formatting options like bold, italic, underline, and color styling.
Link: Insert clickable hyperlinks pointing to external URLs, internal pages, or email addresses for connected and interactive content.

Inline content documentation

Mention

Mentions allow you to tag users or entities inline using the @ symbol, making collaboration easier and adding context to your content. When the @ symbol is typed, a suggestion list appears to let you select relevant users or items. This feature helps teams communicate effectively, link related information, and create interactive documents.

Configure mentions in inline content

JavaScript Block Editor inline content mention

JavaScript Block Editor inline content label

Labels

Labels act as inline tags that classify and organize content segments for better structure and searchability. By adding labels, users can highlight important sections, group related content, and make filtering easier. This feature is good for workflows that require categorization, keeping the content well-organized and easy to navigate.

Configure labels in inline content

A comprehensive, built-in toolbar enables effortless text formatting. When text is selected, an inline toolbar appears, offering quick access to essential tools, such as bold, italic, underline, subscript, superscript, and text case transformations (uppercase and lowercase). It also provides color customization for the text and background, streamlining the editing experience.

Built-in toolbar documentation

JavaScript Block Editor built-in toolbar

JavaScript Block Editor paste cleanup.

Paste cleanup

The Block Editor includes a built-in paste cleanup feature that provides clean, consistent content when copying from external sources. It automatically removes unnecessary tags, attributes, and inline styles while preserving essential formatting. Users can choose to paste as plain text, with cleaned-up styles, or with source-formatting, making content integration smooth and efficient.

Formatting text

The Block Editor provides comprehensive text formatting options for a smooth and intuitive editing experience. Users can easily apply styles such as bold, italic, underline, and strikethrough directly within content blocks. These inline formatting tools make it simple to create rich, styled content without disrupting the writing flow.

JavaScript Block Editor formatting text

Editor menus

The editor features an intuitive menu system for quick access to essential content management options. These menus improve productivity by keeping frequently used tools within easy reach.

Type “/” to open the slash command menu, giving instant access to quick block insertion and transformation options. This feature accelerates content creation by allowing users to add headings, images, lists, and more without breaking the writing flow. Stay focused and productive with these intuitive shortcuts.

Slash command menu documentation

JavaScript Block Editor slash command menu

JavaScript Block Editor with action menu

The block action menu provides block-level operations that let you duplicate, delete, and transform blocks. Users can access this menu by clicking the action button that appears when hovering over a block.

Block action menu documentation

Right-click context menus provide quick access to additional functionality based on the current selection or cursor position. Options include cut, copy, paste, and other relevant actions, making content editing more efficient with familiar interaction patterns.

Context menu documentation

JavaScript Block editor with context menu

Drag and drop

The Block Editor offers intuitive drag-and-drop functionality to rearrange content blocks. Users can reorder blocks by simply dragging them to new positions, making content organization smooth and efficient. Visual indicators highlight valid drop zones during the drag operation, for a clear and user-friendly experience.

JavaScript Block Editor with drag and drop

Additional features

Block Editor for JavaScript with clipboard operations.

Cut, copy, and paste

The Block Editor for JavaScript allows users to perform standard clipboard operations including cut, copy, and paste for efficient content editing.

Block Editor for JavaScript with undo and redo actions.

Undo/redo manager

The Block Editor in JavaScript manages the undo/redo action history, which stores editing actions and allows customization of the undo steps.

Undo and redo documentation

JavaScript Block Editor with print support.

Print block editor content

Print the Block Editor content programmatically with all applied formatting and styles preserved for professional documentation.

Print functionality documentation

JavaScript Block Editor responsiveness.

Touch-friendly and responsive

The Block Editor recognizes touch gestures, allowing users to format content using the inline and slash menu toolbars. This responsive, mobile-friendly design provides the best user experience on all mobile, tablet, and desktop form factors.

Responsive design documentation

JavaScript Block Editor customizable themes.

Built-in and customizable themes

The JavaScript Block Editor is shipped with several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast.

JavaScript Block Editor APIs.

Developer-friendly APIs

There are sufficient client-side API’s available to optimize content editing.

Client-side API documentation

Block Editor accessibility

JavaScript Block Editor with keyboard support.

This control is accessible using the keyboard. Major features like block addition, block actions, indent, select, and formatting can be performed using keyboard commands. This helps create highly accessible applications.

Keyboard navigation documentation

JavaScript Block Editor accessibility.

Screen readers

The JavaScript Block Editor view has complete WAI-ARIA accessibility support. The UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.

JavaScript Block Editor with right-to-left.

Right to left (RTL)

The JavaScript Block Editor supports RTL rendering, allowing the text and layout of the editor to be displayed from right to left. This improves the user experience and accessibility for users of RTL languages such as Arabic, Farsi, and Hebrew.

RTL support documentation

Other supported frameworks

The Block Editor is also available for the Blazor, Angular, Vue, React, ASP.NET MVC, and ASP.NET Core frameworks. Explore its platform-specific options through the following links:

Supported browsers

The JavaScript Block Editor works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.

Supported browsers in JavaScript Block Editor.

ALL CONTROLS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

DROPDOWNS

FILE VIEWERS & EDITORS

BUTTONS

INTERACTIVE CHAT

INPUTS

NAVIGATION

LAYOUT

FORMS

Query Builder UI

NOTIFICATIONS

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Light and fast

I like JS controls the most, they are simple to use and easy to integrate to JS apps. In ASP.NET MVC your controls behave very nice, although I consider I have more control by using the JS version

Alexis A,

Software Architect, Small-Business

Syncfusion - Great controls and terrific support

The best in Syncfusion is the attention and efforts spent by the technical support whenever needed. It's priceless. The Syncfusion controls are really usefull to accelerate my projects, mainly those things related to UI.

David B,

CEO, Small-Business

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories

Industry

Software development

75% Cost reduction

50% Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

Industry

Utilities (oil and gas)