Code Block

Syntax-highlighted code. Free, MIT · Developer tools › Code and logs

Installation

npx valyro-cli@latest add code-block

npx shadcn@latest add https://valyro.xyz/r/code-block.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { CodeBlock } from 'valyro-ui';

Props

Prop	Type	Default
`code` *	`string`		Source text to display; a single trailing newline is dropped.
`language`	`string`		Highlighting and header label: ts, tsx, js, jsx, json, bash, css, html, python, diff, yaml, sql…
`filename`	`string`		Shown in the header instead of the language.
`showLineNumbers`	`boolean`	`false`	Adds a 1-based line-number gutter (not copied with the code).
`highlightLines`	`number[]`		1-based line numbers to emphasise.
`wrap`	`boolean`	`false`	Soft-wrap long lines (the initial state when `wrapToggle` is on).
`wrapToggle`	`boolean`	`false`	Adds a header button that toggles soft wrap.
`maxHeight`	`CSSProperties['maxHeight']`		The code scrolls beyond this height.
`copyable`	`boolean`	`true`	Show the copy button. Default true.
`showHeader`	`boolean`	`true`	Show the header with the file name or language (default true); without it the buttons float over the code.
`writing`	`boolean`	`false`	Types the code out character by character, with a caret. The block keeps its full size meanwhile, copying always takes the whole code, and reduced motion shows it at once.
`writingDuration`	`number`	`5000`	How long the writing takes, ms (default 5000).
`writingDelay`	`number`	`0`	Pause before the writing starts, ms (default 0).
`writeOnView`	`boolean`	`false`	Start writing only once the block scrolls into view (default false: on mount).
`onWritingDone`	`() => void`		Called when the code has been written out (at once under reduced motion).
`labels`	`Partial<CodeBlockLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Diff Viewer — Multi-file diff: file list with stats, unified and split views, word highlights
Log Viewer — Streaming logs: levels, highlighted search, tail follow, JSON lines
Request Inspector — HTTP request log: filters, headers, bodies and a timing waterfall
API Key Manager — API keys: create with scopes and expiry, show the secret once, revoke
Api Playground — API playground: model, parameters, prompts and JSON request/response
Webhook Endpoints — Webhooks: endpoints, events, toggles and delivery rate
Certificate List — SSL/TLS certificates: time to expiry, auto-renewal, legend
Status Page — Status page: overall banner, 90-day uptime, incidents and subscriptions
Storage Usage — Storage: usage by category and cleanup actions
Download Center — Exports: file types, size, link expiry and re-request
Feature Flag Simulator — Preview the product under different feature flags and segments, no production access

Previous: Execution Queue · Next: Diff Viewer · All Developer tools