About diffs
@pierre/diffs is a library for rendering syntax-highlighted files and diffs, with APIs for React and vanilla JavaScript applications. Optional editor, server-rendering, and worker entries support additional rendering workflows.
Key features
- 01Syntax-highlighted file rendering
- 02Diff rendering
- 03React and vanilla JavaScript APIs
- 04Optional editor support
- 05Server-side rendering and workers
Use cases
- 01Display source files in an application
- 02Build code review diff views
- 03Edit files in React or vanilla surfaces
- 04Preload markup on the server
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/diffsin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/api-core.mdapi-editor.mdapi-highlighting.mdapi-react.mdapi-rendering.mdapi-ssr.mdapi-types.mdapi-worker.mdrecipe-annotations.mdrecipe-code-view.mdrecipe-custom-highlighting.mdrecipe-edit-react.mdrecipe-edit-vanilla.mdrecipe-react.mdrecipe-ssr.mdrecipe-vanilla.mdrecipe-workers.mdDetails
From the project README@pierre/diffs
Use @pierre/diffs to render syntax-highlighted files and diffs. Use its
optional editor, SSR, and worker entries for those capabilities.
For standalone HTML or token generation with @pierre/highlights, read the
highlights skill.
Install
pnpm add @pierre/diffs
Install react and react-dom when the app uses the React entry.
Select an API reference
| Surface | Reference |
|---|---|
| Root components, parsing, and file extension APIs | Core API |
| Languages, themes, highlighter state, and streams | Highlighting API |
| Renderers, managers, DOM helpers, comparisons, and constants | Low-level rendering API |
| Shared data, option, render, selection, and editor types | Shared types |
@pierre/diffs/react | React API |
@pierre/diffs/edit | Editor API |
@pierre/diffs/ssr | SSR API |
@pierre/diffs/worker and worker scripts | Worker API |
Select a recipe
| Task | Recipe |
|---|---|
| Render a file or diff in React | Render with React |
| Render a file or diff without React | Render with vanilla JavaScript |
| Build a virtualized review surface | Use CodeView |
| Edit a React surface or CodeView | Edit with React |
| Edit a vanilla surface or CodeView | Edit with vanilla JavaScript |
| Preload markup on the server | Use SSR |
| Highlight through a worker pool | Use workers |
| Add line annotations and selection | Add annotations and selection |
| Register a custom language or theme | Register custom highlighting |
Comments
Markdown supported