bradtraversy.dev — 2026-05-10-apiprobe-audit-and-repaint.md
home.md projects/ tools/ devlog/ × articles/ now.md about.md
2026-05-10 · #devlog #decision #nextjs #tailwind

# apiprobe gets the apimocker treatment

apimocker got a redesign last week. apiprobe is its sister tool: same family, same audience, same “just works in the browser” pitch. it shouldn’t look like a different app. so today: an audit, a sweep, and a full repaint.

audit first, fix second

ran a code audit across the 35 source files. 22 findings: 0 critical, 3 highs, 9 mediums, 10 lows. for a tool that’s been sitting quietly, that’s about what i expected. no real bugs, but plenty of paper cuts.

closed all 10 lows in one pass: aria-labels on icon-only buttons, the onKeyPress → onKeyDown migration, a missing useMemo around response-body formatting, removing a debug console.log, dropping a misleading “ssrf protection” line from the readme. the kind of stuff that doesn’t change behavior but raises the floor.

mediums and highs are deferred. they need real thinking, not just typing. the most interesting one: DOMPurify is running on the response body, which for an api testing tool is actively wrong. it strips tags from the response and shows you bytes that aren’t what the api returned. react already escapes text nodes. the right fix is to remove the sanitizer entirely. that one’s getting its own session.

matching apimocker

pulled apimocker.com’s stylesheet down, extracted the tokens, and rebuilt apiprobe on the same palette: #0b0b0c canvas, #1c1c20 surface, an emerald green accent used sparingly, inter for ui, jetbrains mono for endpoints and code. method colors stay consistent across both tools: get emerald, post blue, put amber, patch purple, delete red. now if you bounce between the two, you don’t get whiplash.

tailwind 4’s @theme block makes this kind of token swap trivial. you define --color-canvas, --color-surface, --color-accent and tailwind generates bg-canvas, text-fg-muted, border-line for you automatically. no plugin, no config file. cleanest custom-palette setup i’ve used in a next.js app.

the next.js bump

vercel’s build then failed on a critical rce in next.js. patched up the 15.5 backport line (15.5.2 → 15.5.18) instead of jumping to 16.x. minimal blast radius, no breaking changes, ship it. dompurify also got a 3.2.6 → 3.4.2 bump for an xss chain, even though the plan is to remove it entirely next session.

small periodic sweeps on tools you don’t touch often: an audit pass to raise the floor, a theme pass to make sister tools feel related, a security bump because the dependency tree never sleeps. all three in a morning, no scope creep, repo in better shape than i found it.

// EOF 2026-05-10-apiprobe-audit-and-repaint.md
main
2026-05-10-apiprobe-audit-and-repaint.md
UTF-8
LF
Markdown
Ln 1, Col 1