diffs

1---2name: diffs3description:4  Use when an app uses @pierre/diffs to render or edit code files, diffs,5  patches, merge conflicts, or CodeView review surfaces, including React,6  vanilla JavaScript, SSR, workers, annotations, selection, and custom Shiki7  languages or themes.8---9 10# `@pierre/diffs`11 12Use `@pierre/diffs` to render syntax-highlighted files and diffs. Use its13optional editor, SSR, and worker entries for those capabilities.14 15## Install16 17```bash18pnpm add @pierre/diffs19```20 21Install `react` and `react-dom` when the app uses the React entry.22 23## Select an API reference24 25| Surface                                                      | Reference                                              |26| ------------------------------------------------------------ | ------------------------------------------------------ |27| Root components, parsing, and file extension APIs            | [Core API](references/api-core.md)                     |28| Languages, themes, highlighter state, and streams            | [Highlighting API](references/api-highlighting.md)     |29| Renderers, managers, DOM helpers, comparisons, and constants | [Low-level rendering API](references/api-rendering.md) |30| Shared data, option, render, selection, and editor types     | [Shared types](references/api-types.md)                |31| `@pierre/diffs/react`                                        | [React API](references/api-react.md)                   |32| `@pierre/diffs/edit`                                         | [Editor API](references/api-editor.md)                 |33| `@pierre/diffs/ssr`                                          | [SSR API](references/api-ssr.md)                       |34| `@pierre/diffs/worker` and worker scripts                    | [Worker API](references/api-worker.md)                 |35 36## Select a recipe37 38| Task                                | Recipe                                                                   |39| ----------------------------------- | ------------------------------------------------------------------------ |40| Render a file or diff in React      | [Render with React](references/recipe-react.md)                          |41| Render a file or diff without React | [Render with vanilla JavaScript](references/recipe-vanilla.md)           |42| Build a virtualized review surface  | [Use CodeView](references/recipe-code-view.md)                           |43| Edit a React surface or CodeView    | [Edit with React](references/recipe-edit-react.md)                       |44| Edit a vanilla surface or CodeView  | [Edit with vanilla JavaScript](references/recipe-edit-vanilla.md)        |45| Preload markup on the server        | [Use SSR](references/recipe-ssr.md)                                      |46| Highlight through a worker pool     | [Use workers](references/recipe-workers.md)                              |47| Add line annotations and selection  | [Add annotations and selection](references/recipe-annotations.md)        |48| Register a Shiki language or theme  | [Register custom highlighting](references/recipe-custom-highlighting.md) |49