Code Editor

CodeEditor — an editable code surface whose visual layer is DIAGNOSTICS, not syntax colour.

blog & long-formclientuiv1.0.0

Code Editor — live renderprimitives-codeeditor--default ↗

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

Via shadcn URL

npx shadcn@latest add https://ds.interlace.tools/r/code-editor.json

With the @interlace alias

npx shadcn@latest add @interlace/code-editor

Behavior

What this component does — the keyboard path, the measured colour, the text equivalent and the states it can be in. Every figure below is read out of the test or the source that enforces it by scripts/build-behavior-map.mjs, so nothing here can outlive the gate that keeps it true.

Measured contrast

packages/ui/__tests__/theme-contract-lock.test.ts ↗

Every semantic colour pair this component's own source uses, measured against the shipped hexes in all 4 theme × scheme combinations. The tightest is destructive on background at 7.60:1 (harbor · light), against a floor of 3:1.

Measured WCAG contrast ratios per token pair and theme
Pair	interlacelight	interlacedark	harborlight	harbordark	Floor
destructive on backgrounddestructive tint on the page surface	8.31:1	10.43:1	7.60:1	10.03:1	3.0:1SC 1.4.11
destructive on carddestructive tint inside a card	8.31:1	9.66:1	8.02:1	9.09:1	3.0:1SC 1.4.11
ring on backgroundfocus ring (SC 2.4.13)	8.80:1	11.79:1	8.39:1	10.03:1	3.0:1SC 1.4.11
ring on cardfocus ring inside a card	8.80:1	10.92:1	8.86:1	9.10:1	3.0:1SC 1.4.11
foreground on backgroundbody copy	19.65:1	16.97:1	17.74:1	16.19:1	4.5:1SC 1.4.3

Text pairs are held to 4.5:1 (WCAG 2.2 SC 1.4.3); borders, rings and chart axes to 3:1 (SC 1.4.11 non-text). Bold is the worst cell in the row — the one a brand fork has to keep an eye on.

Runtime contract

packages/ui/vitest.config.ts ↗

Where it renders, how narrow it survives, and whether its lines are inside the coverage gate — three answers a consumer needs before the paste, not after the bug.

Render boundary: 'use client'
Hydrates. It brings JavaScript to any route that imports it — put the boundary here, not at the page.
Minimum viewport: none declared
No width floor: it takes the width it is given. Its container owns the layout question.
Coverage gate: 100% × 4
Inside the v8 gate: lines 100, statements 100, functions 100, branches 100. A threshold under 100 only records how much you stopped caring, so there isn't one.

History

This component is at v1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.

Unreleased1 entry

Addedminor
CodeEditor + LintPlayground — paste code, watch analysis light it up **CodeEditor** (primitive): an editable code surface whose visual layer is DIAGNOSTICS, not syntax colour — the other half of the CodeBlock pair. The zero-sync layout trick: the textarea auto-grows (rows = line count) with soft wrap off, so a highlight bar for line N sits at a fixed offset computed from the line-height — no scroll listeners, nothing to drift; the leading-6/py-4 classes and the exported LINE_HEIGHT_PX/PAD_Y_PX constants are one test-pinned contract. Bars are aria-hidden position, never information, and severities differ by border, not hue alone. **LintPlayground** (pattern): editor + findings list + status around an INJECTED lint: (code) => Promise<PlaygroundDiagnostic[]> — the DS owns the surface and ships no linting dependency; the app brings a web worker bundling the real analyzer. Honesty rules, all test-locked: findings render as text first; stale results never paint (sequence-numbered, resolutions AND rejections); a failed analysis says "unknown, not clean" instead of an empty list; and the footer prints the privacy fact that makes pasting real code reasonable — analysis runs entirely in the reader's browser. Both join the coverage ledger at 100/100/100/100.
Components
- @interlace/lint-playground

Import

3 named exports — pull the parts you need.

Public API

import { CodeEditor, LINE_HEIGHT_PX, PAD_Y_PX } from '@/components/ui/code-editor';

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

CodeEditorProps

Also accepts every <textarea> attribute.

Prop	Type	Description
label*	string	Stable selector for E2E tests; consumer provides — no default (R5). / 'data-testid': string; /* Accessible name. Required: an unnamed editor is a mystery box.
value	string	Controlled code. Pair with `onValueChange`.
defaultValue	string	Uncontrolled starting code.
onValueChange	(code: string) => void	—
diagnostics	readonly CodeEditorDiagnostic[]	Lines to light up. Position only — render the messages as text too.
minRows	number	Minimum visible rows, so an empty editor still reads as a place to type rather than a collapsed input. @default 4

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour: Native element semantics — no interaction layer to get wrong.
Focus ring (WCAG 2.2 SC 2.4.13): Inherited from the preflight focus contract shipped in @interlace/theme.
Reduced motion: No animation to gate.
ARIA in the source: aria-label

Examples

2 more states from the same story file.

with findingsprimitives-codeeditor--with-findings ↗

empty invites typingprimitives-codeeditor--empty-invites-typing ↗

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Rule	Concept	Where
R5	testid required, no default	`'data-testid': string`
R6	data-slot on every part	`"code-editor" / "-highlights" / "-input"`
R8	No isXxx booleans	(none needed)
R13	Ecosystem first	native `<textarea>` IS the editor
R14	Controlled + uncontrolled	`value`/`onValueChange` + `defaultValue`
R18	Tailwind; dynamic inline	bar offsets are computed values
R25	Client component	editing state

Dependencies

Base UI primitive: Native / no Base UI dependency
Lucide icons: none
NPM dependencies: none
Registry dependencies: @interlace/theme
@interlace/cn

Source

The full implementation — components/ui/code-editor.tsx once installed.

181 lines · TypeScript

github ↗

'use client';

import * as React from 'react';

// @interlace/code-editor v1.0.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/code-editor
// What changed since: https://ds.interlace.tools/c/code-editor#history
// Generated banner — keep it, the upgrade diff reads this version.

import { cn } from '@/lib/utils';

/**
 * CodeEditor — an editable code surface whose visual layer is
 * DIAGNOSTICS, not syntax colour.
 *
 * ## Why there is no client-side syntax highlighting
 *
 * Every in-browser highlighter is a dependency with a grammar registry
 * (Shiki ships megabytes of them), and the editor exists for one job:
 * let a reader paste code and watch analysis light it up. The finding

…161 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.

/r/code-editor.json