Preview Block List and Block Grid blocks in the backoffice rendered by your real frontend, with the editor’s unsaved values. Works with headless frontends on the Content Delivery API or your own API (React, Next.js, Angular, Vue, Nuxt, SvelteKit, Astro, plain JavaScript) and with MVC Razor views. Multisite aware.
Preview Block List and Block Grid blocks in the Umbraco backoffice, rendered by your real frontend, with the editor’s unsaved changes.
- Headless on the Content Delivery API:
"Renderer": "DeliveryApi", no CMS code. - Headless on your own API:
"Renderer": "Custom"plus one small class. - MVC:
"Renderer": "Razor"renders each block’s partial view. - Any frontend: React, Next.js, Angular, Vue, Nuxt, SvelteKit, Astro or plain JavaScript. Add a catch-all route (you probably have one) and one script tag.
- Multisite: a frontend URL per site, or your own resolver.
- Desktop and mobile widths, live updates while typing.
"FrontendBlockPreview": {
"Renderer": "DeliveryApi",
"DefaultFrontendUrl": "https://www.example.com"
}
<script src="https://your-cms/App_Plugins/FrontendBlockPreview/frontend-block-preview.js"
data-hide="header, footer" defer></script>
See the documentation for every framework, multisite and settings.