Data display

Before/After Code Diff

Two code panels side by side, labeled before and after, with added and removed lines tinted and a hover focus effect.

currency.tsbefore

export function formatPrice(cents) {  var dollars = cents / 100  var rounded = dollars.toFixed(2)  return '$' + rounded} export function formatList(items) {  return items.map(formatPrice).join(', ')}

currency.tsafter

export function formatPrice(cents: number, currency = "USD") {  const value = cents / 100  return new Intl.NumberFormat("en-US", {    style: "currency",    currency,  }).format(value)} export function formatList(items: number[]) {  return items.map((c) => formatPrice(c)).join(", ")}

Using Before/After Code Diff

Two code panels side by side, labeled before and after, with added and removed lines tinted and a hover focus effect.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, fontSize, showLineDiff, focusBlurOnHover

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent