Skip to content

Razor Designer

What it is

Razor Designer is a s&box library that adds a visual designer for .razor UI panels to the s&box editor. Build a panel by adding controls to a canvas, and editing their properties in the inspector.

The designer generates a paired .razor and .razor.scss into your project.

Why use it for s&box

  • Native to the editor - The designer docks alongside your other editor tools — no separate app, no export step.

  • Real preview - The canvas renders with actual Sandbox.UI panels and the same flexbox layout engine s&box uses at runtime. What you see in the designer is what you ship. Yes, this includes animations and transition states.

  • Plain output. Saved files are normal .razor and .razor.scss you can read, diff, version, and edit by hand. There's no proprietary asset format and no build-time codegen.

  • Reopens what it saves. Documents saved by the designer can be reopened in the designer, so handing off between visual and code workflows is round-trippable.

  • Reusable templates. Any combination of controls can be saved as a palette template and reused across designs.

Where next