Skip to content

Feature: Public API for sub-line span decorations #884

Description

@chsmc-ant

Prerequisites

Proposal

Hi! Big fan.

I (on behalf of design systems @ Anthropic) would like to propose a consumer-facing way to style arbitrary character ranges within a rendered line. Something like a spanDecorations input on File / FileDiff / CodeView that addresses {lineNumber, spanStart, spanLength, className} and wraps the range in a span carrying the class.

The machinery seems to already exists internally... intra-line word/char diff highlighting is implemented with Shiki DecorationItems, and createDiffSpanDecoration is already exported. This would be exposing that stuff for consumer-supplied ranges. I'm aware of #459; this is the character-granularity counterpart, and I'd want to pick a name that doesn't collide with it.

Open API questions I'd defer to y'all on:

  • Render prop (like lineAnnotations) vs. option on BaseCodeOptions
  • Whether interaction callbacks (onDecoration*, mirroring onToken*) are in scope or a separate ask
  • Naming (spanDecorations vs. something else, given Decorations v3 #459)

I'd previously opened #810 with an implementation before discussing it here (sorry for jumping the gun!) That PR is available as a reference if useful, but I'm treating the API shape as fully open.

Motivation and context

We use @pierre/diffs in an internal code review tool. We'd like to add overlays anchored to sub-line ranges for things like...

  • Highlighting high-risk spans (e.g. flagging string-concatenated SQL on an added line)
  • Muting low-relevance code so the behavioral change stands out
  • IDE-style diagnostics squiggles at exact character positions
  • Anchoring AI-assist affordances (click a flagged span → explainer card)

I had Claude create some examples of this in action:

Image Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions