Change Document View in Blazor DocumentEditor

6 Nov 20251 minute to read

The Blazor Word Processor (Document Editor) provides two different layout options for viewing a document, controlled by the LayoutType property. This allows users to switch between a print-optimized view and a continuous web-based view.

The two available layout types are:

• Pages (Print Layout): This is the default view. It displays the document as a series of distinct pages, exactly as it would appear when printed. This layout is ideal for understanding the document’s structure, including headers, footers, and page breaks.
• Continuous (Web Layout): This view displays the document as a single, continuous flowing page without any page breaks. This is similar to how a standard web page is rendered and is useful for continuous reading and editing without the interruption of page boundaries.

Setting the Layout Type

The layout type can be set during component initialization. The following example demonstrates how to configure the Document Editor to use the Continuous (Web Layout) view.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="Container" EnableToolbar="true" Height="590px" LayoutType="LayoutType.Continuous">
</SfDocumentEditorContainer>

NOTE

By default, the LayoutType is set to LayoutType.Pages, which provides a print layout view. To switch to a web layout, set the property to LayoutType.Continuous.