CodeBlock

A block of coloured code with a copy button.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { CodeBlock } from '@weft-js/warp'export function Basic() {  return (    <CodeBlock code={CONFIG} language="ts" />  )}const CONFIG = `import { defineProject } from 'weft'export default defineProject({  name: 'storefront',  regions: ['eu-west', 'us-east'],  build: 'npm run build',})`

Installation

npm install @weft-js/warp

Usage

tsx

import { CodeBlock } from '@weft-js/warp'<CodeBlock code={CONFIG} language="ts" />

With a filename

Use filename to show the file's name above the code.

tsx

import { CodeBlock } from '@weft-js/warp'export function Filename() {  return (    <CodeBlock code={CONFIG} language="ts" filename="weft.config.ts" />  )}const CONFIG = `import { defineProject } from 'weft'export default defineProject({  name: 'storefront',  regions: ['eu-west', 'us-east'],  build: 'npm run build',})`

With line numbers

Use lines to number each line.

tsx

import { CodeBlock } from '@weft-js/warp'export function Lines() {  return (    <CodeBlock code={CONFIG} language="ts" lines />  )}const CONFIG = `import { defineProject } from 'weft'export default defineProject({  name: 'storefront',  regions: ['eu-west', 'us-east'],  build: 'npm run build',})`

Wrapping

wrap breaks long lines. Without it they scroll.

tsx

import { CodeBlock } from '@weft-js/warp'export function Wrap() {  return (    <CodeBlock wrap language="sh" code="weft deploy --project storefront --region eu-west --region us-east --message 'Cache product images at the edge' --wait" />  )}

Other languages

tsx, ts, js, json and sh are coloured. Anything else stays plain.

tsx

import { CodeBlock } from '@weft-js/warp'export function Json() {  return (    <CodeBlock language="json" filename="deploy.json" code={SAMPLE} />  )}const DEPLOYS = [  { id: 'd-4821', project: 'storefront', branch: 'main', commit: '9f3ac21', message: 'Cache product images at the edge', author: 'Priya Raman', status: 'Live', minutes: 2, at: '2026-10-31T16:42' },  { id: 'd-4820', project: 'search-api', branch: 'ranking-v2', commit: '1be07d4', message: 'Rank exact matches first', author: 'Lena Fischer', status: 'Building', minutes: 6, at: '2026-10-31T16:10' },  { id: 'd-4819', project: 'mobile-bff', branch: 'main', commit: 'c44e190', message: 'Retry timed out upstream calls', author: 'Sam Okafor', status: 'Failed', minutes: 4, at: '2026-10-31T15:27' },  { id: 'd-4818', project: 'checkout', branch: 'main', commit: '70d2fa8', message: 'Add Apple Pay to the last step', author: 'Tomás Oliveira', status: 'Live', minutes: 3, at: '2026-10-31T14:03' },  { id: 'd-4817', project: 'edge-cache', branch: 'main', commit: 'e81b6c2', message: 'Lower the stale window to 30s', author: 'Jun Tanaka', status: 'Live', minutes: 1, at: '2026-10-31T11:55' },  { id: 'd-4816', project: 'billing', branch: 'main', commit: '2ad9e03', message: 'Prorate seats on plan change', author: 'Mara Lindqvist', status: 'Live', minutes: 3, at: '2026-10-29T17:20' },]const SAMPLE = JSON.stringify(DEPLOYS[0], null, 2)

One task, three ways

Pair a Segmented control with CodeBlock to let people pick which version of the code to read.

tsx

import { state } from '@weft-js/core'import { CodeBlock, Segmented, Stack } from '@weft-js/warp'export function Chooser() {  const way = state('ts')  return (    <Stack gap="related">      <Segmented label="How to deploy" size="sm" value={way.value} onChange={v => (way.value = v)} options={WAYS} />      {way.value === 'ts' && <CodeBlock code={STACKS.ts} language="ts" />}      {way.value === 'sh' && <CodeBlock code={STACKS.sh} language="sh" />}      {way.value === 'json' && <CodeBlock code={STACKS.json} language="json" />}    </Stack>  )}const STACKS = {  ts: `const res = await weft.deploy({ project: 'storefront' })\nconsole.log(res.url)`,  sh: `weft deploy --project storefront`,  json: `{ "project": "storefront" }`,}const WAYS = [{ value: 'ts', label: 'SDK' }, { value: 'sh', label: 'CLI' }, { value: 'json', label: 'API' }]

When to use

Use it for

Several lines of code to read or copy

Reach for something else

Snippet, when it is one command
CodeInput, when people will edit it

Accessibility

Tab: Focuses the code, so arrow keys can scroll it

Long lines scroll, so the block takes focus for keyboard users.
It is coloured on the server and needs no script. copyButtons() from @weft-js/warp-core, called once, runs every copy button.

API Reference

Prop	Type	Default	Description
`code`	`string`	—	The source to show, colour and copy.
`language`	`string`	`'tsx'`	tsx by default; ts, js, json and sh are coloured too, anything else stays plain.
`filename`	`string`	—	A file name shown in the bar above the code.
`lines`	`boolean`	`false`	Line numbers.
`wrap`	`boolean`	`false`	Wrap long lines instead of scrolling.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="codeblock"] [data-part="head"]

headfilelang

RelatedSnippet Code Code input Markdown