CodeCompare
The same data in two encodings, side by side from 900px, top aligned so the shorter one visibly ends sooner.
Examples
Pretty JSON and TOON
LightPretty JSONjson TOON Same fields, same values. Empty columns are dropped and the rows become a table.
{
"issues": [
{ "id": "ISS-142", "state": "open", "estimate": null },
{ "id": "ISS-143", "state": "closed", "estimate": null }
]
}issues[2]{id,state}:
ISS-142,open
ISS-143,closedDarkPretty JSONjson TOON Same fields, same values. Empty columns are dropped and the rows become a table.
{
"issues": [
{ "id": "ISS-142", "state": "open", "estimate": null },
{ "id": "ISS-143", "state": "closed", "estimate": null }
]
}issues[2]{id,state}:
ISS-142,open
ISS-143,closed<CodeCompare
before={{ title: 'What the server sends', code: json, language: 'json', filename: 'Pretty JSON' }}
after={{ title: 'What your agent reads', code: toon, filename: 'TOON' }}
caption="Same fields, same values."
/>Usage
import { CodeCompare } from '@switchboard/ui'
<CodeCompare before={{ title, code, language?, filename?, wrap? }} after={{ … }} caption?="…" />Props
Every component also takes mix, for css() and mixins applied after its own style.
CodeCompare
| Prop | Type | Default | Description |
|---|---|---|---|
| before* | { title; code; language?; filename?; wrap? } | – | Left (top on phones) pane. |
| after* | { title; code; language?; filename?; wrap? } | – | Right pane; its title is in accent ink. |
| caption | RemixNode | – | What the panes show and where any numbers come from. |
Also accepts every <figure> attribute. Each pane is a CodeBlock (copy, wrap toggle).
Accessibility
- A <figure> with a <figcaption>; each pane states its title and line count in text.
- Each <pre> is keyboard reachable and named by its CodeBlock label.
Guidance
Do
- Show real output of the thing being compared, not a hand-tuned mock.
Don’t
- Wrap tabular output: it hides the table shape the comparison is about.