---
title: Preview rendering for blocks
slug: cms-13/docs/preview-rendering-for-blocks
docTags: 
createdAt: 2026-07-30T20:22:05.862Z
---

The preview adds Visual Builder functionality and a realistic view of the block's appearance when added to content areas with different widths.

Shared blocks are rendered in the context of a page, such as inside a content area. Like pages, you can edit blocks in the **All Properties** view, but to preview and edit blocks in the **Visual Builder** view, you can create a preview page to render blocks in edit view. A block template is typically a partial template like a view component or a partial view. The rendering is using the built-in Preview tag in the `EPiServer.Framework.Web` namespace.

## Create a block preview template

The following example creates these components to build a preview that you can use for blocks:

- A block preview model
- A preview controller
- A preview view

See [Content templates](docId\:Mx-5xc_AG37WCgBtdxeP3) and [Content types](docId\:U4Q70yq7x-dOB94Q-A07R)  for information on how to create page types, controllers, and views.

### Block preview model

**Example:** The block preview model with a content area.

:::hint{type="info"}
**Note**
The `PageViewModel` is a pattern from the Alloy sample site and is not required if the site is not based on Alloy.
:::

```csharp
namespace AlloyTemplates.Models.ViewModels {
  public class PreviewModel: PageViewModel<SitePageData> {
    public PreviewModel(SitePageData currentPage, IContent previewContent): base(currentPage) {
      PreviewContentArea = new ContentArea();
      PreviewContentArea.Items.Add(new ContentAreaItem {
        ContentLink = previewContent.ContentLink
      });
    }

    public ContentArea PreviewContentArea {
      get;
      set;
    }
  }
}
```

### Preview controller

`PreviewController` inherits from the `ActionControllerBase` and implements `IRenderTemplate<BlockData>`, letting the controller render block types. The `Index` method is overridden and gets the start page as rendering context. An instance of the `PreviewModel` is created, and the block is programmatically added to the content area. The controller has a `TemplateDescriptor` Preview tag, ensuring that it is only used for on-page editing.

**Example:** The preview controller.

```csharp
namespace AlloyTemplates.Controllers {
  [TemplateDescriptor(
    Inherited = true,
    TemplateTypeCategory = TemplateTypeCategories.MvcController, //Required as controllers for blocks are registered as MvcPartialController by default
    Tags = new [] {
      RenderingTags.Preview, RenderingTags.Edit
    },
    AvailableWithoutTag = false)]
  [VisitorGroupImpersonation]
  [RequireClientResources]
  public class PreviewController(
      IContentLoader contentLoader,
      TemplateResolver templateResolver,
      IApplicationResolver applicationResolver,
      DisplayOptions displayOptions) : ActionControllerBase,   IRenderTemplate<BlockData>, IModifyLayout
  {
      public async Task<IActionResult> Index(IContent currentContent) {
          var application = await _applicationResolver.GetByContextAsync  (cancellationToken);
          var website = application as InProcessWebsite;
          var EntryPoint = website?.EntryPoint;
          var startPage = _contentLoader.Get<StartPage>(EntryPoint);
          var model = new PreviewModel(startPage, currentContent);
  
          return View(model);
      }
  
      public void ModifyLayout(LayoutModel layoutModel) {
          layoutModel.HideHeader = true;
          layoutModel.HideFooter = true;
      }
  }
}
```

### Preview view

**Example:** View for rendering the block in different widths depending on context.

```cshtml
@model PreviewModel
    
<div class="row">
  <div class="span12" epi-property="@Model.PreviewContentArea" />
</div>

<div class="row">
  <div class="span8" epi-property="@Model.PreviewContentArea" />
</div>
    
<div class="row">
  <div class="span4" epi-property="@Model.PreviewContentArea" />
</div>
```