Crispy Profiling MCP server

🥓 crispy-profiling

Snapshot testing for React re-renders — deterministic, runtime-proven, with the fix.

crispy-profiling is a React re-render profiler (npm: crispy-profiling): CLI, GitHub Action, MCP server and Agent Skill. Not related to the crispy style-guide package or to the scientific software of the same name.

Your React app feels slow when you type or click? crispy shows which components re-render for no reason, and the exact line to fix.

Status: early (0.x), improving every week. Validated on five open-source apps (Redux

Essentials, Next.js App Router Playground, Excalidraw, shadcn-admin, react-admin): it found a

fixable re-render problem in each. See Known limitations and the

changelog. Bug reports, wrong hints and case studies are the most valuable

contribution right now.

crispy-profiling opens your React app in headless Chromium, runs the interactions you describe, and tells you which components rendered, how many times, why (props / state / context / parent) and which renders were avoidable. Per-component render counts are reproducible, so two reports of the same scenario only differ when the code changed (commit counts and effect cascades can vary with load timing; snapshots store them as ranges). That makes it a reliable feedback loop for:

so Claude Code, Cursor, Codex, Copilot & co. can measure a re-render fix instead of guessing.

• AI coding agents: an MCP server and an Agent Skill

• CI: render budgets and baseline comparison that fail a PR when a component starts re-rendering.
• You: a CLI that answers "why does this re-render?" without opening DevTools.

No code changes in your app: it uses the same hook React DevTools uses. Tested on React 19 and validated on 18.3 and 19.0 apps; React 16.8–17 expose the same hook but are not tested.

Quick start

npm i -D crispy-profiling   # or: pnpm add -D crispy-profiling · yarn add -D crispy-profiling
npx crispy install   # downloads Chromium once (if that fails, an installed Chrome/Chromium is used)
npx crispy scan      # zero config: starts your dev server, finds interactions, profiles them
npx crispy test      # records crispy.snap.json from the scanned scenarios → commit it

Using pnpm or yarn? Run the same commands as pnpm exec crispy … or yarn crispy ….

Words you will see: a render is React running a component again; avoidable means its inputs did not really change, so the screen would look the same without it; hoist means move a constant out of the component; memoize means keep the same value or function between renders (useMemo, useCallback, React.memo).

Shortened. The full README is on GitHub.