Code and terminal section templates

Built for developer products: IDE windows with file tabs, dark terminal sessions and install-command bands. Show the product the way developers will use it.

11 variants · neutral wireframe · ready to reskin with your design tokens

Code editor showcase·Split text and code editor·Code window with file tabs·Terminal showcase·Split text and terminal·Install command band·Terminal with output·Three-step install·Editor with file tree·Code to preview split·API request band

Code editor showcase

Centered heading and subhead above an IDE-style window (chrome dots, filename, code sample) with a docs link below. Show the SDK or API surface of a developer product.

code/editor/default

Copy agent promptLive previewUse in editor

Split text and code editor

Copy and CTAs left, IDE-style code window right. Pairs the pitch with proof of how the product is used in code.

code/editor/split

Copy agent promptLive previewUse in editor

Code window with file tabs

IDE window with three file tabs and a code sample, under a centered heading. Suggests a real multi-file workflow.

code/editor/with-tabs

Copy agent promptLive previewUse in editor

Terminal showcase

Centered heading above a dark terminal window with CLI commands and a footnote. The classic developer-tool proof block.

code/terminal/default

Copy agent promptLive previewUse in editor

Split text and terminal

Copy and CTA left, dark terminal window with CLI commands right. Pitch plus a live-feeling install or deploy flow.

code/terminal/split

Copy agent promptLive previewUse in editor

Install command band

Compact band: heading left, one-line install command in a copyable pill right. Low-friction bridge between sections for CLI and package products.

code/snippet/install

Copy agent promptLive previewUse in editor

Terminal with output

Dark terminal window showing one command and its successful output lines. The result is the proof.

code/terminal/with-output

Copy agent promptLive previewUse in editor

Three-step install

Numbered setup steps, each with a one-line terminal command. Install, configure, deploy in one glance.

code/terminal/steps

Copy agent promptLive previewUse in editor

Editor with file tree

IDE window with a file explorer sidebar and the active file highlighted beside the code sample. Feels like a real project.

code/editor/with-sidebar

Copy agent promptLive previewUse in editor

Code to preview split

Editor window left, browser window with a wireframe render right. Shows what the code becomes.

code/editor/with-preview

Copy agent promptLive previewUse in editor

API request band

Muted band: pitch left, API request panel right with method badge, endpoint and a JSON response excerpt.

code/snippet/api

Copy agent promptLive previewUse in editor

claude mcp add --transport http rifframe https://rifframe.app/api/mcp

> "Add a code section to my landing page"

Your coding agent can search and pull these sections directly. How it works.