Skip to content

Live Preview, Visual Editor

Jump to bottom
Simon Yohannes edited this page Sep 22, 2022 · 1 revision

youtube

puck has a preview editor that's easy to use. just annotate your templates like in this example:

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

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

in the example above, you write a using statement for puck.core.Helpers and in the h1 you annotate the field to be Title. this means that when you preview the template you can edit the title field visually.

Clone this wiki locally