Real previews, not approximations
Everything a page does on the frontend, it does in the editor.
Your views, your CSS
Blocks render server-side through the same Razor views your frontend uses. Fonts, colors, columns and spacing come out exactly as they do on the live page.
Sections render whole
A block that contains other blocks renders as one piece, children included. Dark sections show their white text on dark, columns line up, nesting works at any depth.
Scripts run
Carousels slide, animations play, embeds load. An interact mode lets editors try them right in the preview.
Everything stays editable
Hover a section and the block under your cursor highlights. Click to open exactly that block. An editing strip handles adding, reordering, copying and deleting children.
Zoom and structure tools
Every block gets a toolbar with zoom, refresh and interact. Structure mode outlines and names every block when you want the layout skeleton.
One-click escape hatch
The eye icon in the top bar, or Ctrl+Shift+P, switches the whole backoffice back to the classic block cards at any time.
Two minutes to live previews.
Install the package, enable the editors you use, list the stylesheets and scripts your blocks need. Restart, and every block renders live.
- Block Grid with nested areas at any depth
- Block List, Rich Text Editor blocks and Single Block
- ModelsBuilder recommended but not required
- Custom grid markup? One wrapper view replicates your page chrome
> dotnet add package RipplePreview // appsettings.json "RipplePreview": { "DesignWidth": 1440, "BlockGrid": { "Enabled": true, "Stylesheets": [ "/css/site.css" ], "Scripts": [ "/js/site.js" ] }, "BlockList": { "Enabled": true } }
Give your editors the real page.
Free, MIT licensed, on NuGet today.