@pierre/diffs is an open source diff and code rendering library. Built on Shiki for syntax highlighting and theming, super customizable, and packed with features. Made by The Pierre Computer Company.
Currently v1.3.0-beta.4
Enable edit mode in any File or FileDiff component with the EditorProvider. Includes support for selection management, auto-indention, undo history, find-in-file, lint markers, and more. Pairs nicely with @pierre/trees for AUI style experiences. Explore everything edit can do.
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.
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.
Render conflicts through a dedicated diff primitive that treats current and incoming sections as structured additions/deletions without running text diffing. Resolve by choosing current, incoming, or both changes and preview the updated file instantly.
19 unmodified lines20212223232425262714 unmodified lines42434444454647454647484950515253545521 unmodified lines19 unmodified linesexport async function createSession(userId: string) { await cleanupExpiredSessions(userId);
||@pierre/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.
2 unmodified lines34567789101112131414151617181919202122Should we validate the role parameter? We could restrict it to a set of allowed values.
Good idea, maybe use a Literal type or an enum.
Agreed, we should also update verify_token to return the role.
Should we validate the role parameter? We could restrict it to a set of allowed values.
Good idea, maybe use a Literal type or an enum.
Agreed, we should also update verify_token to return the role.
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.
4 unmodified lines567891091011121314152 unmodified lines4 unmodified lines <title>Welcome</title></head><body> <header> <h1>Welcome</h1> <p>Thanks for visiting</p> <h1>Welcome to Our Site</h1> <p>We're glad you're here</p> <a href="/about" class="btn">Learn More</a>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. Also selections will elegantly manage the differences between split and unified views.
Attach hover callbacks to individual syntax tokens with onTokenEnter and onTokenLeave. Here we’ve added a static CSS knowledge index to show information-rich tooltips on hover. Try hovering over CSS properties, values, and at-rules below. See the Token Hooks docs for the full API.
We built @pierre/diffs on top of Shiki for syntax highlighting and general theming. Our components automatically adapt to blend in with your theme selection, including across color modes.
1234456767891011101112use std::io;
fn main() { println!("What is your name?"); println!("Enter your name:"); let mut name = String::new(); io::stdin().read_line(&mut name).unwrap(); println!("Hello, {}", name.trim()); io::stdin().read_line(&mut name).expect("read error"); println!("Hello, {}!", name.trim());}
fn add(x: i32, y: i32) -> i32 { return x + y;fn add(a: i32, b: i32) -> i32 { a + b}Love the Pierre themes? Install our Pierre Theme pack with light and dark flavors, or learn how to build your own Shiki themes.
@pierre/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.
38 unmodified lines394041424344454344474546474810 unmodified lines38 unmodified lines if !exists { return nil, false }
now := time.Now() expired := now.After(item.ExpiresAt) if expired { if time.Now().After(item.ExpiresAt) { delete(c.items, key) c.onEviction(key, item.Value) return nil, false }
return item.Value, true10 unmodified linesSwap between the built-in hunk separator styles and a CSS-only custom variant to preview how collapsed chunks are displayed.
Customize your File or FileDiff headers with two options: inserting additional header metadata, or a fully custom header rendered inside the built-in data-diffs-header shell.
4 unmodified lines5678910111112131213141516171819201921222324254 unmodified lines
let apiBaseURL: URL let timeout: TimeInterval let maxRetries: Int let enableLogging: Bool
private init() { self.apiBaseURL = URL(string: "https://api.example.com")! self.timeout = 30.0 self.maxRetries = 3 self.apiBaseURL = URL(string: "https://api.example.com/v2")! self.timeout = 60.0 self.maxRetries = 5 self.enableLogging = true }
func headers() -> [String: String] { return [ "Content-Type": "application/json", "Accept": "application/json" "Accept": "application/json", "X-API-Version": "2.0" ] }}You can also pass any two files in @pierre/diffs to diff them. This is especially useful when comparing across generative snapshots where linear history isn't always available. Edit the CSS files below to see the diff.
1233567845678.pizza { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px; border-radius: 8px; background: #fff; gap: 12px; padding: 16px; border-radius: 12px; background: var(--surface);}Collectively, our team brings over 150 years of expertise designing, building, and scaling the world's largest distributed systems at Cloudflare, Coinbase, Discord, GitHub, Reddit, Stripe, X, and others.