@pierre/diffs is an open source diff and code rendering library. It's built on Shiki for syntax highlighting and theming, is super customizable, and comes packed with features. Made with love by The Pierre Computer Company.
Currently v1.0.7
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.
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.
Love the Pierre themes? Install our Pierre 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.
@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 lines3940414243444543464748495051 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 linesUse renderHeaderMetadata to inject custom content and components into the file header. Perfect for adding view toggles, theme switchers, copy buttons, or any other file-level actions while preserving the built-in header.
@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 lines34567789101011121314151516171819202021from typing import Optional
SECRET_KEY = "your-secret-key"
def create_token(user_id: str, expires_in: int = 3600) -> str:def create_token(user_id: str, role: str = "user", expires_in: int = 3600) -> str: payload = { "sub": user_id, "role": role, "exp": time.time() + expires_in } return jwt.encode(payload, SECRET_KEY, algorithm="HS256")
def verify_token(token: str) -> Optional[str]:def verify_token(token: str) -> Optional[dict]: try: payload = jwt.decode(token, SECRET_KEY, algorithms=["HS256"]) if payload["exp"] < time.time(): return None return payload["sub"] return {"user_id": payload["sub"], "role": payload["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 lines56789109101111121314 <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.
In addition to rendering standard Git diffs and patches, you can pass any two files in @pierre/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.
1234.pizza { display: flex; justify-content: center;}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.