RipplePreview 1.0.1

Ripple Preview

See your actual pages while you edit them.

Ripple Preview replaces the plain block entries in the Umbraco backoffice with the real thing: every block is rendered through your site's own views, stylesheets and scripts, then shown scaled to fit the editor. What editors see while writing is what visitors see after publishing.

What you get

• Real previews, not approximations. Blocks render server-side through the same Razor views your frontend uses. Backgrounds, fonts, colors, columns and spacing all come out exactly as they do on the live page — whatever CSS approach your site uses, including viewport-based sizing (vw/vh) and media queries, which resolve against a configurable design width.
• Sections render whole. A block that contains other blocks renders as one piece, children included — so a dark section shows its white text on dark, side-by-side columns line up, and nested layouts at any depth look like the page.
• Scripts run. Carousels slide, animations play, embeds load.
• Everything stays editable. Click a block to open it. Hover over a section and the block under your cursor highlights — click to open exactly that block. A compact editing strip under each section handles adding, reordering, copying and deleting children, and the standard Umbraco action bar works as always.
• Editors stay in control. A toolbar on every block offers zoom (a large lightbox view), refresh, and an interact mode for trying carousels right in the preview. Structure mode outlines and names every block on the page when you want to see the layout skeleton. And one click (the eye icon in the top bar, or Ctrl+Shift+P) switches the whole backoffice back to the classic block cards at any time.

Getting started

dotnet add package RipplePreview

Enable the editors you use in appsettings.json (the package ships IntelliSense for all options):

"RipplePreview": {
  "DesignWidth": 1440,
  "BlockGrid": {
    "Enabled": true,
    "Stylesheets": [ "/css/site.css" ],
    "Scripts": [ "/js/site.js" ]
  },
  "BlockList": { "Enabled": true, "Stylesheets": [ "/css/site.css" ] }
}

That's the whole setup: enable the editors, list the stylesheets and scripts your blocks need. Restart, and every block renders live.

Tips

• Using Umbraco's default Block Grid rendering? Add the generated layout stylesheet so nested areas lay out correctly: "Stylesheets": [ "/css/umbraco-blockgridlayout.css", ... ].
• Blocks implemented as ViewComponents (named after the element type alias) work without configuration and take precedence over partial views.

Supported editors

Requires Umbraco 17.3+.

Options (per editor)

Default view conventions: /Views/Partials/blockgrid/Components/{alias}.cshtml, /Views/Partials/blocklist/Components/{alias}.cshtml and /Views/Partials/richtext/Components/{alias}.cshtml.

In views, ViewData["ripplePreview"] is true during preview rendering, and Context.IsRipplePreview() is available via RipplePreview.Extensions.

ModelsBuilder is recommended but not required — without generated models, blocks render as BlockGridItem<IPublishedElement>.

How blocks with children render

Troubleshooting

• "No view or ViewComponent found" shown in a block: the message lists every searched location — add yours via ViewLocations.
• Preview looks unstyled: the preview only loads what you list in Stylesheets (plus anything your views render inline).
• A block renders blank: blocks driven by page-level scripts can't run those in isolation; Ripple shows a labeled placeholder with the block's name and size instead. Add a small preview-only script via Scripts if you want the real visual.
• Sibling blocks don't stretch to equal height: row-level grid effects only apply between blocks rendered together. Children inside one section stretch correctly; separate top-level blocks render independently.

License and credits

MIT — see LICENSE.md.

Parts of the server-side machinery that convert backoffice editor values into renderable models were adapted from Umbraco.Community.BlockPreview (MIT) — attribution details in NOTICE.md.