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

ASP.NET Core Block Editor overview

The ASP.NET Core Block Editor is a modern, block-based content editor designed for ASP.NET Core applications. It provides an intuitive and flexible interface for creating rich, structured documents using modular blocks. Developers can easily integrate this ASP.NET Core 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.

ASP.NET Core Block Editor code example

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

cshtml

<ejs-blockeditor id="defaultBlockeditor"></ejs-blockeditor>

Different block types

The ASP.NET Core 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 for accessibility.
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 ASP.NET Core applications.

Rich text in cells: Apply bold, italic, underline, hyperlinks, mentions, and more inside table cells.
Dynamic row and 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

ASP.NET Core 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 quickly select relevant users or items. This feature helps teams communicate effectively, link related information, and create interactive documents.

Configure mention in inline content

ASP.NET Core Block Editor inline content mention

ASP.NET Core 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 suits workflows that require categorization, keeping the content well-organized and easy to navigate.

Configure label in inline content

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

Built-in toolbar documentation

ASP.NET Core Block Editor built-in toolbar

ASP.NET Core Block Editor paste cleanup.

Paste cleanup

The Block Editor includes a built-in paste cleanup feature for 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 an intuitive editing experience. Users can easily apply styles such as bold, italics, underline, and strikethrough directly within content blocks. These inline formatting tools make it simple to create rich, styled content without disrupting the writing flow.

ASP.NET Core Block Editor formatting text

Editor menus

The editor features an intuitive menu system that provides 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

ASP.NET Core Block Editor slash command menu

ASP.NET Core Block Editor with action menu

The block action menu provides block-level operations such as duplicate, delete, and transform blocks. Users can access this menu by clicking the action button that appears when hovering over a block, offering quick and context-aware actions for each block type.

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

ASP.NET Core 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. Visual indicators highlight valid drop zones during the drag operation for a clear and user-friendly experience.

ASP.NET Core Block editor with drag and drop

Additional features

Block Editor for ASP.NET Core with clipboard operations.

Cut, copy, and paste

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

Block Editor for ASP.NET Core with undo and redo actions.

Undo/redo manager

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

Undo and redo documentation

ASP.NET Core 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

ASP.NET Core Block Editor responsive.

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

ASP.NET Core Block Editor customizable.

Built-in and customizable themes

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

ASP.NET Core Block Editor APIs.

Developer-friendly APIs

There are sufficient client-side APIs available to optimize content editing.

Client-side API documentation

Block Editor accessibility

ASP.NET Core 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

ASP.NET Core Block Editor accessibility.

The ASP.NET Core 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.

ASP.NET Core Block Editor with right-to-left.

Right to left (RTL)

The ASP.NET Core 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, JavaScript, and ASP.NET MVC frameworks. Explore its platform-specific options through the following links:

Supported browsers

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

Supported browsers in ASP.NET Core Block Editor.

ALL CONTROLS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

FILE VIEWERS & EDITORS

DROPDOWNS

NAVIGATION

INPUTS

LAYOUT

BUTTONS

NOTIFICATION

INTERACTIVE CHAT

FORMS

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.

Great and flexible controls to build web applications

Controls meet specifications to develop web applications (ASP.NET MVC and Core in my case) and provide a lot of features to develop world-class software. There are options for other frameworks/platforms. Support is excellent which makes me feel very confident when facing trouble, they provide answers in 24 hours. Support team will make a big effort to solve your issues and they are ready for a phone call and to remotely connect to your PC.

Jorge M,

Founder and Software Architect, Small-Business

Great tool, saves alot of time, and great support

Syncfusion really makes it simple to implement features that would take a ton of time and effort to create. When you're building your site, the UI can take a ton of time away from building the core app. With Syncfusion's tools it reduces that effort significantly so you can get back to building the core elements.

Walter T,

Founder, 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)