# Code View > Show a file's code or a diff of it, with line numbers and a copy button. Source: https://ai.honestui.com/docs/components/code-view ```tsx import { CodeView } from "@/components/ai/code-view" const sampleCode = `function exportTotal(rows: Row[]) { const total = rows.reduce((sum, row) => sum + row.amount, 0) return roundTotal(total) }` export function CodeViewDemo() { return (
) } ``` ## Overview [#overview] Code View shows code an agent wrote or changed, in a compact panel. Pass `code` for a numbered listing, or `diff` for a unified diff where each changed line carries a sign and a tint. It does not highlight syntax. Most products already have a highlighter, and a second one would disagree with it. Pass `renderLine` to color each line with yours. ## Anatomy [#anatomy] Installing `code-view` brings [Button](https://www.honestui.com/docs/components/button) along as a registry dependency. ## Behavior [#behavior] ### Listing and diff [#listing-and-diff] A listing numbers every line. In a diff, removed lines take no number, so the numbers match the new file. ### Copy [#copy] Copy puts the code on the clipboard. For a diff, it copies the new file's lines and leaves removed lines out. The icon changes to a check for a moment. If the browser refuses clipboard access, the block says "Copy failed" instead of pretending it worked. ### Actions [#actions] `actions` puts your own controls in the header, before Copy. Pass a button for each action your application handles, such as downloading the file. An embedded Code View has no header, so it shows none. ### Long lines [#long-lines] Lines do not wrap. The block scrolls sideways. ### Embedded [#embedded] `embedded` drops the frame and the header, leaving the numbered lines. Use it inside a surface that already names the file, such as an [Artifact Panel](/docs/components/artifact-panel). The header's Copy button and a diff's counts go with it, so supply Copy from the surrounding surface. The code region is still named by `filename`. ## Accessibility [#accessibility] The block is a figure with the file name as its caption. The code region can take focus, so a keyboard user can scroll long lines, and it is named by the file. Copy announces "Copied" or "Copy failed" through a polite status. Diff counts are read as "2 added" and "1 removed". A changed line is marked by its sign as well as its tint, and keeps the primary text color. | Key | Action | | ------------------------------------ | ---------------------------------------------- | | Tab | Move to your actions, then Copy, then the code | | Arrow keys | Scroll the focused code | | Enter or Space | Copy | ## Installation [#installation] Add the components it is built from. Copy and paste this file into your project. ### components/ai/code-view.tsx ```tsx "use client" import * as React from "react" import { Check as CheckIcon, Code as CodeIcon, Copy as CopyIcon } from "honestui/icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" export type CodeDiffLine = { text: string /** Defaults to "context". */ kind?: "context" | "added" | "removed" } export type CodeViewLabels = { copy: string copied: string copyFailed: string added: (count: number) => string removed: (count: number) => string } export const defaultCodeViewLabels: CodeViewLabels = { copy: "Copy", copied: "Copied", copyFailed: "Copy failed", added: (count) => `${count} added`, removed: (count) => `${count} removed`, } const COPIED_MILLISECONDS = 1500 // Changed lines keep the primary text color on a tint, which stays readable at this size. const lineTone: Record, string> = { context: "", added: "bg-[var(--hui-color-background-success-primary)]", removed: "bg-[var(--hui-color-background-danger-primary)]", } const lineSign: Record, string> = { context: " ", added: "+", removed: "−", } export type CodeViewProps = Omit, "children" | "onCopy"> & { /** The file name or a short title, shown in the header. */ filename: string /** The source to list, with line numbers. Ignored when `diff` is passed. */ code?: string /** A unified diff. Each changed line is marked with a sign and a tint. */ diff?: CodeDiffLine[] /** Colors one line. `index` counts the listed lines from zero. Without it, lines are plain text. */ renderLine?: (text: string, index: number) => React.ReactNode /** Controls for the header, placed before Copy. */ actions?: React.ReactNode /** Runs after the text reaches the clipboard. */ onCopy?: (text: string) => void /** Drops the frame and the header, for a surface that supplies its own, such as an Artifact Panel. */ embedded?: boolean labels?: Partial } /** * A file's code, or a diff of it, with a copy button. It does not highlight * syntax itself; pass `renderLine` to use the highlighter you already have. */ function CodeView({ filename, code = "", diff, renderLine, actions, onCopy, embedded = false, labels: labelsProp, className, ...props }: CodeViewProps) { const labels = React.useMemo( () => ({ ...defaultCodeViewLabels, ...labelsProp }), [labelsProp] ) const [copyState, setCopyState] = React.useState<"idle" | "copied" | "failed">("idle") const resetTimer = React.useRef(undefined) React.useEffect(() => () => window.clearTimeout(resetTimer.current), []) const lines: CodeDiffLine[] = diff ?? code.split("\n").map((text) => ({ text })) // Copy what the file would contain: a diff's removed lines are left out. const copyText = diff ? diff .filter((line) => line.kind !== "removed") .map((line) => line.text) .join("\n") : code const addedCount = diff?.filter((line) => line.kind === "added").length ?? 0 const removedCount = diff?.filter((line) => line.kind === "removed").length ?? 0 const copy = async () => { try { await navigator.clipboard.writeText(copyText) setCopyState("copied") onCopy?.(copyText) } catch { setCopyState("failed") } window.clearTimeout(resetTimer.current) resetTimer.current = window.setTimeout(() => setCopyState("idle"), COPIED_MILLISECONDS) } // Removed lines are not in the new file, so they take no number. const lineNumbers: (number | null)[] = [] for (const line of lines) { const previous = lineNumbers.findLast((value) => value !== null) ?? 0 lineNumbers.push(line.kind === "removed" ? null : previous + 1) } return (
{!embedded && (
)} {!embedded && copyState === "failed" && (

{labels.copyFailed}

)} {/* Focusable so a keyboard user can scroll long lines. */} 
        
          {lines.map((line, index) => {
            const kind = line.kind ?? "context"
            return (
              
                
                {diff && {lineSign[kind]}}
                
                  {renderLine ? renderLine(line.text, index) : line.text}
                  {"\n"}
                
              
            )
          })}
) } export { CodeView } ``` Update the import paths to match your project setup. ## Usage [#usage] ```tsx import { CodeView } from "@/components/ai/code-view" highlight(text, "ts")} /> ``` ## Examples [#examples] ### Diff [#diff] Two lines added and one removed. The numbers follow the new file. ```tsx import { CodeView } from "@/components/ai/code-view" export function CodeViewDiffExample() { return (
) } ``` ## API reference [#api-reference] ### CodeView [#codeview] Accepts native figure props beyond those listed. | Prop | Type | Default | Description | | ------------ | -------------------------------------------- | -------- | ----------------------------------------------------------- | | `filename` | string | Required | The file name or a short title. | | `code` | string | `""` | The source to list. Ignored when `diff` is passed. | | `diff` | `CodeDiffLine[]` | None | A unified diff. | | `renderLine` | `(text: string, index: number) => ReactNode` | None | Colors one line. `index` counts the listed lines from zero. | | `actions` | ReactNode | None | Controls for the header, placed before Copy. | | `onCopy` | `(text: string) => void` | None | Runs after the text reaches the clipboard. | | `embedded` | boolean | `false` | Drops the frame and the header, including Copy. | | `labels` | `Partial` | English | Copy states and the names read for counts. | ### Types [#types] | Export | Shape | | -------------- | --------------------------------------------------------------------- | | `CodeDiffLine` | `text`, and optional `kind` of `"context"`, `"added"`, or `"removed"` |