CodeBlock

learning · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

A code or command listing with a copy button. Plain text with the language named; no syntax colouring and no execution. Put prose around it, not inside it.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "CodeBlock",
  "props": {
    "title": "extraction.sql",
    "language": "sql",
    "code": "SELECT brew_id, ROUND(tds * volume / dose, 1) AS yield_pct\nFROM brews\nWHERE method = 'pour-over'\nORDER BY yield_pct DESC;",
    "caption": "Yield per brew: dissolved solids times volume, divided by the dose.",
    "lineNumbers": true
  }
}

Props

Prop	Type	Required	Notes
id	string		Anchor id. max length 40, default "code"
title	string		File name or short title shown above the code. max length 120
language	string		Language name, e.g. sql, python, bash, json. max length 24, default "text"
code	string	yes	The code, exactly as it is to be copied. max length 8000
caption	string		One sentence under the listing. max length 300
lineNumbers	boolean		Show line numbers. default false

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

extraction.sql
SELECT brew_id, ROUND(tds * volume / dose, 1) AS yield_pct
FROM brews
WHERE method = 'pour-over'
ORDER BY yield_pct DESC;
Yield per brew: dissolved solids times volume, divided by the dose.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "language": "sql"
}

Issues:

• /code is required

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 14 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.