Puck CMS - ASP.NET Core, Open Source, Cross Platform CMS

[watch visual editor video on youtube](https://www.youtube.com/watch?v=1jTAhimHXl8&t=1s&ab_channel=PuckCMS)

if you're using Puck integrated and not headless, there's a cool visual preview editor which allows you to live edit from the preview of your web page.

to set this up for one of your razor templates, you need to annotate your templates with the name of the field a html block requires. it's best to look at an example:

```cs
@using puck.core.Helpers;
@model puckweb.ViewModels.Homepage
@{
    Layout = "/views/shared/_Layout.cshtml";
    ViewBag.Title = "Homepage";
    var previewHelper = (new PreviewHelper<Homepage>());

<h1 @previewHelper.Field(x=>x.Title) class="font-weight-normal">@Model.Title</h1>

<div @previewHelper.Field(x=>x.MainContent,x=>x.MetaDescription)>
        @Html.Raw(Model?.MainContent??"")
    </div>

var images = Model?.ImageGallery?.GetAll<ImageVM>() ?? new List<ImageVM>();

if(images.Any()){
        <br/>
        <h3 class="font-weight-light">Image Gallery</h3>
        <div @previewHelper.Field(x=>x.ImageGallery)>
        @foreach (var imageModel in images)
        {
            //if crop alias not found, full size image will be returned
            <img alt="@imageModel.Image.Description" src="@imageModel.Image.GetCropUrl("hero")" />
        }
        </div>
    }
    
}

```

if you look at the template above, you're using the `PreviewHelper` class to annotate the `Homepage` template with field names so that the preview page can target those blocks of html with the editor. the preview helper `Field` method accepts `params` of expression<TModel> so can take multiple fields in one go.

what happens after you've annotated your templates is that you can go to the preview page for any content in the backoffice and you will get the annotated html blocks highlighted and you can click on them to bring up an editor which will allow you to edit things visually which can lead to a much friendlier editing experience for the editing user.

## using PreviewHelper IsPreviewPage() method
there's a handy helper method `IsPreviewPage` in the `PreviewHelper` class that can tell you whether or not you're on the preview page. this is useful for putting `Add` buttons on empty content. for example:
```cs
<h1 @previewHelper.Field(x=>x.Title)>
   @Model.Title
   @if(previewHelper.IsPreviewPage() && string.IsNullOrEmpty(Model.Title)){
      <button>Add Title</button>
   }
</h1>
```
in the example above, if the title is empty and you're on the preview page, you get an `Add` button to add a title. otherwise the `h1` block would be empty and the preview editor wouldn't be able to pick it up and you wouldn't be able to get to edit the content.

Live preview, visual editor