Code Comparison

One sheet of code, two moments in time: a draggable vertical seam slides the after state across the before state like a light table. Removed lines tinted toward destructive, added lines lit by the warm accent wash. The seam sweeps in from the right edge on first view.

Draw

npx shadcn@latest add @clow/code-comparison

Playground

relay.tsxdrag the seam

before

1-const glow = "#e8590c"
2-<button style={{ color: glow }}>
3     open uplink
4-</button>

after

1+import { Button } from "@clow/button"
2+<Button variant="accent">
3     open uplink
4+</Button>

props

filename

beforeTitle

afterTitle

defaultPosition

beforeCode

afterCode

<CodeComparison />

Examples

basic

uplink.tsxdrag the seam

before

1-import "./button.css"
2  
3 export function Uplink() {
4   return (
5-  <button className="btn"
6-    style={{ color: "#e8590c" }}>
7       open uplink
8-  </button>
9   )
10 }

after

1+import { Button } from "@clow/button"
2  
3 export function Uplink() {
4   return (
5+  <Button
6+    variant="accent">
7       open uplink
8+  </Button>
9   )
10 }

Props

prop	type	default
filename	text	relay.tsx
beforeTitle	text	before
afterTitle	text	after
defaultPosition	number	12
beforeCode	text	- const glow = "#e8590c" - <button style={{ color: glow }}> open uplink - </button>
afterCode	text	+ import { Button } from "@clow/button" + <Button variant="accent"> open uplink + </Button>