Code Editor for Vue

A window of code the reader can type in, colored as they type, with a title and a copy button above it.

Use it when the code is meant to be changed: a snippet to tweak before copying, a config to fill in, the files of a Sandbox. To show code that only needs reading, use a Code Block, which costs less and streams. In Vue, the text box is a real textarea over a highlighted copy of its text, so typing, selecting, undo and input methods all work as in any text field.

Installation

The install also adds useHighlightedCode and the highlighter it runs on, the same one Code Block uses.

Anatomy

CodeEditor
├── CodeEditorHeader
│   ├── CodeEditorDots
│   ├── CodeEditorTitle
│   └── CodeEditorCopyButton
└── CodeEditorContent

CodeEditor holds the code and its language. CodeEditorContent is the text box and the colored layer under it; the header is optional.

Usage

<script setup lang="ts">
import {
  CodeEditor, CodeEditorContent, CodeEditorCopyButton, CodeEditorDots,
  CodeEditorHeader, CodeEditorTitle,
} from "@/components/ui/code-editor";
</script>

<CodeEditor defaultValue={code} language="tsx">
  <CodeEditorHeader>
    <CodeEditorDots />
    <CodeEditorTitle>Counter.tsx</CodeEditorTitle>
    <CodeEditorCopyButton />
  </CodeEditorHeader>
  <CodeEditorContent label="Counter.tsx" />
</CodeEditor>

Features

• It is a text field. Typing, selection, copy and paste, undo and redo are the browser's own, and the colors follow each keystroke.
• It indents like an editor. Tab inserts spaces to the next stop or indents every selected line, Shift+Tab outdents, and Enter keeps the indentation, one step deeper after an opening bracket.
• It highlights synchronously. The colors come from TanStack Highlight (opens in a new tab) through useHighlightedCode: no WASM, nothing to load, and the first render is already colored.
• It takes your theme. Token colors are CSS variables (--th-keyword, --th-string…), GitHub light and dark by default, so a class on the editor can switch them.
• It reads left to right. The code is always dir="ltr"; the header follows the page direction.

Accessibility

• The text box is a textarea named by label, so screen readers read and edit the code as plain text. The colored layer is hidden from them.
• A hidden hint tells screen reader users that Tab indents and how to leave: Escape, then Tab.
• readOnly keeps the code selectable and copyable, and drops the hint.
• Line numbers are drawn by CSS, so they are never selected, copied or read out.
• CodeEditorCopyButton is labelled Copy code, and a polite live region announces Copied once the copy succeeds.

Demos

Languages

One editor and five files, switched by the buttons in the header: TSX, HTML, CSS, JSON and Python. The demo keeps each file's code, so an edit survives a switch, and passes the language with value. Use it when a reader picks a language or a file. The buttons say which is on with aria-pressed.

Line Numbers

A 33-line hook in an editor with a fixed height, so it scrolls. lineNumbers adds a gutter as wide as the last number needs. Turn them on when the code is long enough that someone will say "line 12". On a short snippet they only add noise.

Wrap

A Markdown changelog whose lines are sentences, with wrap and line numbers on. A wrapped line keeps one number. Wrap prose and long strings; leave code unwrapped, where a line break inside a statement misleads.

Typing

The code types itself out, as on a landing page, then a Replay button runs it again. The editor is controlled and readOnly: the demo grows value on a timer and never asks for input. Under reduced motion the whole file shows at once. Keep it for a hero; a reader who wants to edit needs the plain editor.

Theme

Three color themes for the same file: GitHub, the item's own colors, then Accent and Mono, made of the page's tokens. Each is a class on CodeEditor that sets the highlighter's --th-* variables, so only the colors change; the code and the caret stay put. Use tokens, as here, when the code should match the site rather than an editor.

FAQ

API Reference