--- title: "What’s New in Blazor: 2023 Volume 2" published_at: "2023-07-12T11:14:55+00:00" modified_at: "2025-04-22T12:06:36+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-2" excerpt: "This blog explains the new features and components rolled out in the Syncfusion Blazor suite for the 2023 Volume 2 release." taxonomy_category: - "Blazor" - "Development" - "Syncfusion" - "Web" - "What's new" taxonomy_post_tag: - "Blazor" - "development" - "wasm" - "Web" - "What's New" --- # What’s New in Blazor: 2023 Volume 2 [Rajendran R](https://www.syncfusion.com/blogs/author/rajendranr) ![What's New in Blazor: 2023 Volume 2](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Whats-New-in-Blazor-2023-Volume-2.png) In this article, we’ll see the new components and features added in the Syncfusion Essential Studio® [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download) release for the Blazor platform. ## New Blazor components In this 2023 Volume 2 release, we have introduced the following new components: - Image Editor - Next-generation PDF Viewer ### Image Editor (preview) The new [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) was the most requested component in our feedback portal. It is a UI component for editing and enhancing images. With built-in support for cropping, rotating, flipping, zooming, and applying filters, this component makes it easy to fine-tune your edits to achieve the desired results. It also allows users to annotate images with shapes such as rectangles, ellipses, lines, text, and freehand drawings. ![Blazor Image Editor](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Blazor-Image-Editor.png) Blazor Image Editor **Note:** For more details, refer to the [Blazor Image Editor demo](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=fluent) and [documentation](https://blazor.syncfusion.com/documentation/image-editor/getting-started) . ### Next-generation PDF Viewer The new [Blazor PDF Viewer](https://blazor.syncfusion.com/documentation/pdfviewer-2/getting-started/features) component allows users to view, edit, print, and download PDF files without the web service dependency in Blazor apps. It is designed to be fast and responsive and has the same feature set as the previous PDF Viewer. It is easy to use and can be integrated into Blazor Server and WASM apps with minimal effort. ![Next-generation Blazor PDF Viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Next-generation-Blazor-PDF-Viewer.png) Next-generation Blazor PDF Viewer ## Preview to production-ready components The following Blazor components have been developed to meet industry standards and are now marked as production-ready: - [Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) - [Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton) ## Material 3 theme support The Material 3 theme has been added to all Syncfusion [Blazor UI components](https://www.syncfusion.com/blazor-components) with light and dark variants to provide modern and visually appealing user interfaces. ![Material 3 theme support for Blazor components](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Material-3-theme-support-for-Blazor-components-1.png) Material 3 theme support for Blazor components ## Syncfusion Blazor Playground App Introducing the Syncfusion [Blazor Playground](https://blazorplayground.syncfusion.com/) , an online code editor that enables real-time writing, editing, compiling, and sharing of the Blazor code. Explore the full capabilities of Syncfusion Blazor components directly in your browser without the need for complex setups or installations. ![Blazor Playground app](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Blazor-Playground-app.png) Blazor Playground app ## Showcase samples We have provided showcase samples for the following apps in the 2023 Volume 2 release: - Loan Calculator - Fitness Tracker We’ll take a closer look at them. ### Loan Calculator Introducing the new Blazor WASM Loan Calculator, a showcase web app that calculates loan payments, interest rates, and amortization schedules. For more details, check out the Blazor Loan Calculator demo on our [website](https://blazor.syncfusion.com/showcase/wasm/loan-calculator/) and [GitHub](https://github.com/syncfusion/blazor-showcase-loan-calculator) . ![Blazor Loan Calculator](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Blazor-Loan-Calculator.png) Blazor Loan Calculator ### Fitness Tracker The new Blazor Fitness Tracker is a showcase web app that tracks a user’s daily activities, diet plan, and fasting details. For more details, check out the Blazor Fitness Tracker demo on our [website](https://blazor.syncfusion.com/showcase/fitness-tracker/) and [GitHub](https://github.com/syncfusion/blazor-showcase-fitness-tracker) . ![Blazor Fitness Tracker](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Blazor-Fitness-Tracker.png) Blazor Fitness Tracker ## Signed assemblies All Syncfusion [Blazor component](https://www.syncfusion.com/blazor-components) packages have been strongly signed for enhanced security and integrity. ## WASM standalone sample browser Check out the enhanced [Blazor standalone WebAssembly sample browser](https://blazor.syncfusion.com/wasm/demos/) to explore the functionality of our Syncfusion Blazor components directly. ## What’s new in existing Syncfusion Blazor components Let’s look at the new features added to the existing Blazor UI components. ### DataGrid #### Performance improvements In the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) , we significantly improved the component’s interaction in Server and WebAssembly environments. Specifically, enhancements have been made in the paging, filtering, sorting, and grouping features. #### Row drag and drop with a detailed template Users can easily rearrange rows and the detail template row using the drag-and-drop functionality in Blazor DataGrid. **Note:** For more details, refer to the Blazor DataGrid component [demo](https://blazor.syncfusion.com/demos/datagrid/detail-template?theme=fluent) . #### Accessibility improvements We have Improved the accessibility support for the DataGrid component to meet web accessibility standards. #### Data annotation improvements We’ve provided support for the following data annotation properties in their listed classes. | Data annotation class names | Added properties | Description | | --- | --- | --- | | DisplayFormat | NullDisplayText | Gets the text to be displayed when the property’s value is null. | | | ConvertEmptyStringToNull | Gets the value indicating whether empty string values should be converted to null in the UI. | | | HtmlEncode | If DisableHtmlEncode is set to false, it disables the encodes of the HTML of the header and content cells. | | | ApplyFormatInEditMode | Gets the value indicating whether the column format should be applied in edit mode. | | Display | Description | Gets the text to be displayed for the tooltip. | | | AutoGenerateFilter | If AllowFiltering is set to false, it disables a particular column’s filtering option and filter bar element. | **Note:** For more details, refer to the Blazor DataGrid data annotation [demo](https://blazor.syncfusion.com/demos/datagrid/data-annotation?theme=fluent) . ### Charts In the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component, we rolled out the following features. #### Range step area chart We have added a new chart type called range step area to the Blazor Charts component. It is used to display the difference between minimum and maximum values over a certain time period. ![Blazor Range Step Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Blazor-Range-Step-Area-Chart.png) Blazor Range Step Area Chart **Note:** For more details, check the Blazor range step area chart’s [demo](https://blazor.syncfusion.com/demos/chart/range-step-area?theme=fluent) . #### Zooming and panning performance improvements We improved the Charts zooming and panning performance both to handle more significant amounts of data and for when live updates are enabled in both server and WASM apps. **Note:** See the Blazor Charts zooming and panning [demos](https://blazor.syncfusion.com/demos/chart/zooming?theme=fluent) for more details. #### Zoom toolbar Display a zoom toolbar with zoom-in and zoom-out options for the Charts on initial loading. ![Zoom toolbar in Blazor Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Zoom-toolbar-in-Blazor-Charts.png) Zoom toolbar in Blazor Charts **Note:** See the Blazor Zoom toolbar [demo](https://blazor.syncfusion.com/demos/chart/zooming?theme=fluent) for more details. #### Cross marker Use a cross-shaped marker for data points in a chart. ![Cross marker in Blazor Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Cross-marker-in-Blazor-Charts.png) Cross marker in Blazor Charts ### Scheduler #### Spanned events in timeline year view Render spanned events as a single event instead of separate events in the timeline year view of the [Scheduler component](https://www.syncfusion.com/blazor-components/blazor-scheduler) . ![Spanned events in Blazor Scheduler’s timeline year view](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Spanned-events-in-Blazor-Schedulers-timeline-year-view-1.png) Spanned events in Blazor Scheduler’s timeline year view **Note:** See the Blazor Scheduler spanned events live demo [here](https://blazor.syncfusion.com/demos/scheduler/year-view?theme=fluent) for more information. #### Recurrence editor END type customization Now, you can set end dates (*until ends on* or *never*) for the recurrence events in the Scheduler. You can see how to customize the end type option in the editor in this [documentation](https://blazor.syncfusion.com/documentation/scheduler/recurrence-editor#customizing-the-end-type-option-in-editor) . ### Stock Chart with date-time category axis The new date-time category axis in the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) displays business days. Render and configure the Stock Chart using the **DateTimeCategory** axis type to visualize stock data. To render a line series, use a ** Line** series type. ![Blazor Stock Chart with date-time category axis](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Blazor-Stock-Chart-with-date-time-category-axis.png) Blazor Stock Chart with date-time category axis **Note:** See the Blazor Stock Chart with the date-time category axis’s live demo [here](https://blazor.syncfusion.com/demos/stock-chart/date-time-category-axis?theme=fluent) . ### TreeGrid #### Row drag and drop with a detailed template The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) now allows users to rearrange rows along with the detail template row using the drag-and-drop functionality. #### DateOnly and TimeOnly values These features allow users to bind and manage date and time-only values quickly. Users can perform various data operations such as sorting, filtering, searching, and CRUD (create, read, update, delete). To simplify things, built-in DatePicker and TimePicker editor components are rendered for editing and filtering purposes. ![Date- and time-pickers in Blazor TreeGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Date-and-time-pickers-in-Blazor-TreeGrid.gif) Date- and time-pickers in Blazor TreeGrid **Note:** For more details, check out the [Blazor TreeGrid inline editing demo](https://blazor.syncfusion.com/demos/tree-grid/inline-editing) and [column-type documentation.](https://blazor.syncfusion.com/documentation/treegrid/columns/columns#column-type) ### Dropdown components with virtual scrolling using the keyboard The [Blazor Dropdown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) , [ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) , and [AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) components support virtual scrolling through the keyboard keys. This provides an improved user experience when these components are rendered with large data sets. This feature allows users to navigate the list using their keyboard, making finding and selecting items faster and more efficient. | Keyboard key | Action | | --- | --- | | Down arrow | Loads the next virtual list item if the last item of the current page is selected. | | Up arrow | Loads the previous virtual list item if the first item of the current page is selected. | | Page Down | Loads the next page and selects the last item in it. | | Page Up | Loads the previous page and selects the first item in it. | | Home | Loads the initial set of items and selects the first item in it. | | End | Loads the last set of items and selects the last item in it. | ![Virtual scrolling in Blazor Dropdown List](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Virtual-scrolling-in-Blazor-Dropdown-List.gif) Virtual scrolling in Blazor Dropdown List **Note:** For more details, check out the [Blazor Dropdown List virtualization demo](https://blazor.syncfusion.com/demos/dropdown-list/virtualization?theme=fluent) . ### Carousel The new features added in the [Blazor Carousel component](https://www.syncfusion.com/blazor-components/blazor-carousel) are as follows. #### Swipe and drag gestures This feature allows users to change the slides in the Carousel using swipe or drag gestures, improving the usability and accessibility of the component on phones and tablets. **Note:** For more details, go through this getting started [documentation](https://blazor.syncfusion.com/documentation/carousel/animations-and-transitions#swipe-modes) . #### Indicator customization Users can choose any of the following indicators using the **IndicatorsType** property. - **Default**: The Carousel displays indicators with a bullet design. - **Dynamic**: The Carousel applies dynamic animation to the indicators. - **Progress**: The Carousel displays slides numerically as indicators. - **Fraction**: The Carousel displays indicators like a progress bar. ![Indicator customization in Blazor Carousel component](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Indicator-customization-in-Blazor-Carousel-component.png) Indicator customization in Blazor Carousel component **Note:** For more info, check out the live Blazor indicator-type demo [here](https://blazor.syncfusion.com/demos/carousel/indicator-type?theme=fluent) . ### Blazor Diagram We rolled out the following user-friendly features in the [Blazor Diagram component](https://www.syncfusion.com/blazor-components/blazor-diagram) . #### Freehand drawing Use freehand drawing to create freeform curves (splines) directly on the diagram page. With this feature, users can unleash their creativity by drawing anything from simple sketches to intricate works of art. ![Freehand drawing feature in Blazor Diagram component](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Freehand-drawing-feature-in-Blazor-Diagram-component.gif) Freehand drawing feature in Blazor Diagram component **Note:** For more details, check out the drawing tools in the Blazor Diagram component [demo](https://blazor.syncfusion.com/demos/diagramcomponent/drawingtool) . #### Additional auto-scroll support This feature automatically scrolls a diagram whenever a connector or its endpoints are dragged beyond the boundary. This helps users create large dimensional drawings. The feature can be enabled or disabled using the **EnableAutoScroll** property in the ** ScrollSettings** of the Blazor Diagram component. **Note:** Check out the Blazor Diagram component scroll settings [demo](https://blazor.syncfusion.com/demos/diagramcomponent/scrollsettings) for more details. #### Tooltip for symbols There’s new tooltip support for symbols in the symbol palette. Now, users can conveniently provide additional information or descriptions for each symbol, improving the overall usability and clarity of the symbol palette. ### Word Processor (document editor) From the 2023 Volume 2 release onward, you can enjoy the following features in the [Blazor Word Processor](https://www.syncfusion.com/document-processing/word-framework/blazor) . #### Alternate text for images You can now add alternative text (alt text) for images in a text document. Alt text is important for accessibility because it enables all users to understand the content of a document. When someone who uses a screen reader or other assistive technology comes across an image in a document, they will hear the alt text describing the image. Without alt text, they will only know they’ve reached an image without knowing what the image shows. ![Alternative text for images in a Word document](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Alternative-text-for-images-in-a-Word-document.png) Alternative text for images in a Word document **Note:** For more details**,** check out the Blazor Word Processor [demo](https://blazor.syncfusion.com/demos/document-editor/default-functionalities) . #### Link to previous header or footer This feature allows users to link or unlink the header and footer of the previous section to the current section in a Word document. This can be useful if you want to create a consistent look across your document or if you want to create different headers and footers for each section in the document. ![Link to previous header and footer sections in a Word document](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Link-to-previous-header-and-footer-sections-in-a-Word-document.png) Link to previous header and footer sections in a Word document **Note:** For more details, check out the Blazor Word Processor headers and footers [demo](https://blazor.syncfusion.com/demos/document-editor/headers-and-footers) . #### Character spacing and scaling Character spacing and scaling are two different ways to customize the appearance of text in a Word document. Character spacing refers to the space between individual characters, while scaling refers to the characters’ size. You can increase the character spacing between the letters of a word to make it stand out. You can scale it up to make it easier to read or scale it down to save space. ![Custom character spacing and scaling features in Blazor Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Custom-character-spacing-and-scaling-features-in-Blazor-Word-Processor.png) Custom character spacing and scaling features in Blazor Word Processor **Note:** For more details, check out the Blazor Word Processor character format [demo](https://blazor.syncfusion.com/demos/document-editor/character-format) . ### File Manager The new features added to the [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) are as follows. #### Virtual scrolling The virtual scrolling feature supports UI virtualization for detailed, large-icon views in the Blazor File Manager control. This feature improves performance on the view port’s initial loading of files and folders. The remaining files and folders will be loaded dynamically when the user scrolls through them. Users can load a huge volume of files and folders without any performance issues. Scrolling can also be done with the keyboard. You can enable this feature by setting the **EnableVirtualization** property to true. ![Virtual scrolling in Blazor File Manager](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Virtual-scrolling-in-Blazor-File-Manager-1.png) Virtual scrolling in Blazor File Manager **Note:** For more details, check out the virtual scrolling in the Blazor File Manager [demo](https://blazor.syncfusion.com/demos/file-manager/virtualization?theme=fluent) . #### Toolbar customization The File Manager allows users to customize the toolbar items directly with icons, text, and a tooltip. The **ToolbarItems** property and provided template support facilitate the customization of the items in the File Manager. You can now directly add custom toolbar items using the ** FileManagerCustomToolbarItems** tag. ![Customizing the toolbar items in Blazor File Manager](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-toolbar-items-in-Blazor-File-Manager.png) Customizing the toolbar items in Blazor File Manager #### WASM performance enhancement The **PreventRender** method in WASM avoids unnecessary re-rendering of the File Manager component. This method internally overrides the ** ShouldRender** method of the File Manager to prevent unnecessary re-rendering. ### Gantt Chart #### Resource view The new resource view in the [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) is used to display the tasks that are hierarchically assigned to each resource. Resources are displayed as parents, and all the tasks assigned to each resource are displayed as its child records. This feature can be enabled by setting the **ViewType** to ** ResourceView**. ![Resource view in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Resource-view-in-Blazor-Gantt-Chart-1.png) Resource view in Blazor Gantt Chart **Note:** For more details, check out the Blazor Gantt Chart resource view [demo](https://blazor.syncfusion.com/demos/gantt-chart/resource-view?theme=fluent) . #### DateOnly and TimeOnly columns These column types allow users to bind and manage date- and time-only values easily. Users can perform various data operations such as sorting, filtering, searching, and CRUD (create, read, update, delete). To simplify things, built-in DatePicker and TimePicker editor components are also rendered for editing and filtering purposes. ![Date-only and time-only columns in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Date-only-and-time-only-columns-in-Blazor-Gantt-Chart.gif) Date-only and time-only columns in Blazor Gantt Chart **Note:** For more details, check out the Blazor Gantt Chart column type [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/columns#column-type) . ## Conclusion Thanks for reading! In this blog, we’ve seen the new features and components included in the Syncfusion [Blazor suite](https://www.syncfusion.com/blazor-components) for the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download) release. Try out these user-friendly updates and give us feedback in the comments below. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v22.1.34) and [What’s New](https://www.syncfusion.com/products/whatsnew) pages to see the other available features in the 2023 Volume 2 release. The new version of Essential Studio® is available for current customers on the License and Downloads page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. If you have any questions, you can reach us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to assist you! ## Related blogs - [Syncfusion Essential Studio® 2023 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-2.aspx) - [Introducing the Next-Gen Blazor PDF Viewer Component](https://www.syncfusion.com/blogs/post/next-gen-blazor-pdf-viewer.aspx) - [Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component](https://www.syncfusion.com/blogs/post/create-thumbnail-images-blazor.aspx) - [Role-Based Authorization in Blazor File Manager: An Overview](https://www.syncfusion.com/blogs/post/role-based-authorization-blazor-file-manager.aspx)