Sigil View Code

Toggle between a live demo and the source code that produced it.

@sigil-ui/componentsReact

Preview

import { SigilViewCode } from "@sigil-ui/components";

Use SigilViewCode for demos, examples, and docs pages where readers need both the rendered surface and the implementation.

<SigilViewCode code={source}>
  <DemoTemplate />
</SigilViewCode>

The component owns the view/code switcher so demo pages do not need local tab state, local toolbar markup, or one-off code panels.

Prop	Type	Default	Description
`code`	`string`	—	Source code to render in code mode
`defaultView`	`"preview" \| "code"`	`"preview"`	Initial mode
`previewLabel`	`string`	`"View"`	Label for preview tab
`codeLabel`	`string`	`"Code"`	Label for source tab

Structural Grid Rhythm

How Sigil keeps sections, dividers, rails, and gutter ruler patterns phase-locked to full grid-cell intervals.

Gutter

Reserve a consistent gap between structural regions.