Fast, exact diffing for modern apps. Fully open source, built on Shiki, insanely customizable, and packed with the features you need. Made with love by The Pierre Computer Company.
Currently v0.5.0
Choose from stacked (unified) or split (side-by-side). Both use CSS Grid and Shadow DOM under the hood, meaning fewer DOM nodes and faster rendering.
Precision Diffs are built with Shiki for syntax highlighting and general theming. Our components automatically adapt to blend in with your theme selection, including across color modes.
Love the Pierre themes? Install our Pierre VS Code Theme pack with light and dark flavors.
Your diffs, your choice. Render changed lines with classic diff indicators (+/–), full-width background colors, or vertical bars. You can even highlight inline changes—character or word based—and toggle line wrapping, hide numbers, and more.
Precision Diffs adapts to any font, font-size, line-height, and even font-feature-settings you may have set. Configure font options with your preferred CSS method globally or on a per-component basis.
1function greet(name) {2 return "Hello, " + name + "!";1function greet(name: string): string {2 return `Hello, ${name}!`;3}4
5const message = greet("World");5const message: string = greet("World");6console.log(message);7
8export { greet };Precision Diffs provide a flexible annotation framework for injecting additional content and context. Use it to render your own line comments, annotations from CI jobs, and other third-party content.
1import * as 'react';1import IconSprite from './IconSprite';3import Header from './Header';2import HeaderSimple from '../components/HeaderSimple';3import Hero from '../components/Hero';4
5export default function Home() {6 return (7 <div>8 <h1>9 Code Storage is a fully managed version control system built to meet the highest standards of speed, scale, and reliability.10 </h1>11 <Header />11 <HeaderSimple />12 <IconSprite />Good lord, I refuse to look at diffs ever again after this.
Wait, how long have we been working on this?
*checks notes*… it’s not been a short amount of time.
Annotations can also be used to build interactive code review interfaces similar to AI-assisted coding tools like Cursor. Use it to track the state of each change, inject custom UI like accept/reject buttons, and provide immediate visual feedback.
1import * as 'react';2import IconSprite from './IconSprite';3import Header from './Header';4
5export default function Home() {6 return (7 <div>8 {/* todo: add header and icon sprite */}8 <Header />9 <IconSprite />Turn on line selection with enableLineSelection: true. When enabled, clicking a line number will select that line. Click and drag to select multiple lines, or hold Shift and click to extend your selection. You can also control the selection programmatically.
In addition to rendering standard Git diffs and patches, you can pass any two files in Precision Diffs and get a diff between them. This is especially useful when comparing across generative snapshots where linear history isn't always available. Edit the css below to see the diff.
1.pizza {2 display: flex;3 justify-content: center;3}Our team has decades of cumulative experience in open source, developer tools, and more. We’ve worked on projects like Coinbase, GitHub, Bootstrap, Twitter, Medium, and more. This stuff is our bread and butter, and we’re happy to share it with you.