repro.fyi — The Art of the Minimal Reproduction

\n\n \n \n \n );\n}\n","createdAt",["D",1769260955824],"branchVersion","branchId","1d735096-bd83-11f0-9811-42dde27851f2","id","1d72fe7a-bd83-11f0-9811-42dde27851f2","repro-fyi",["D",1762703128089],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Infosite on how to make a minimal repro","imageUrl","","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","1d753a28-bd83-11f0-9811-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",2,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","1d72fe7abd8311f0981142dde27851f2","tursoHostname","1d72fe7abd8311f0981142dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789615253173],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":53,"_102":103,"_104":24},"branch",{"_13":87,"_31":88,"_40":39,"_89":41,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":42,"_96":97},"isOwned",74,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_40":41,"_31":42,"_35":188,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":52,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":189,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":190,"_82":191,"_84":192,"_86":24},"tree",[171,172,173,174],"files",[171,172,173,174],"counts",{"_160":136,"_161":162,"_163":136,"_164":165,"_166":167},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_55":127},"repro.fyi",{"_40":153,"_31":154,"_29":155,"_133":-5,"_38":39,"_37":156,"_134":24,"_35":157,"_13":136,"_32":20,"_33":158,"_23":24,"_137":-5,"_26":159},{"_40":147,"_31":148,"_29":149,"_133":-5,"_38":39,"_37":143,"_134":24,"_35":150,"_13":136,"_32":20,"_33":151,"_23":24,"_137":-5,"_26":152},{"_40":139,"_31":140,"_29":55,"_133":-5,"_38":39,"_37":141,"_134":24,"_35":142,"_13":143,"_32":144,"_33":145,"_23":24,"_137":-5,"_26":146},{"_40":132,"_31":27,"_29":30,"_133":-5,"_38":39,"_37":14,"_134":24,"_35":135,"_13":136,"_32":20,"_33":34,"_23":24,"_137":-5,"_26":138},"bf6259c6-f927-11f0-88b5-42dde27851f2","parentId","latest",["D",1769260955824],0,"label",[27],"338defb4-f927-11f0-b79a-42dde27851f2","main.ts",12,["D",1769260721219],9,"http","import { marked } from \"npm:marked@15\";\n\nexport default async function(req: Request): Promise {\n // Fetch and render markdown\n const markdownUrl = new URL(\"./index.md\", import.meta.url).href;\n const markdownResponse = await fetch(markdownUrl);\n const markdown = await markdownResponse.text();\n const content = await marked(markdown);\n\n const html = `\n\n\n \n \n repro.fyi — The Art of the Minimal Reproduction\n \n \n \n \n \n \n \n \n\n\n \n \n

\n ${content}\n

\n \n \n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n",[140],"44b627be-f924-11f0-8e22-42dde27851f2","index.md","44b62868-f924-11f0-8e22-42dde27851f2",["D",1769259461510],"# repro.fyi\n\n## The Art of the Minimal Reproduction\n\n**Here's a secret:** Creating a minimal repro often solves your own bug before you even ask for help. Seriously. The process of isolating a problem *is* debugging.\n\n---\n\n## Why Bother?\n\n### 🪞 For Yourself (The Selfish Reason)\n\n**Isolation is debugging.** You can't fix what you can't find.\n\nThink of it like a bisect: you remove code until the bug disappears. Then you add back the last thing you removed. *That's your culprit.* This is how experienced developers debug—not by staring at thousands of lines of code, but by systematically narrowing down the problem.\n\n> **The XY Problem:** Sometimes while making a minimal repro, you'll realize you're solving the wrong problem entirely. You thought you had a CSS bug, but actually you're fighting the browser's default styles. [Read more about the XY Problem →](https://xyproblem.info/)\n\n### 🤝 For Others (When You Need Help)\n\nWhen you ask for help with a messy, complex codebase, you're essentially saying: *\"Here's my whole room. Find my keys.\"*\n\nA minimal repro says: *\"Here are my keys on an empty table. Why won't they turn?\"*\n\n**Asking someone to isolate your bug for you is like asking a painter to clean your room before they can paint the walls.** That's your job. The isolation work is the prerequisite to getting help—not part of the help itself.\n\nPeople who help in forums, Discord servers, and GitHub issues are volunteering their time. Respect it.\n\n---\n\n## What Makes a Good Repro?\n\nA great repro **puts the other person into the bug** as fast as possible. Here's what that looks like:\n\n### 📝 Steps to Reproduce\n\nWrite out the exact steps. Don't assume anything is obvious.\n\n

Example of good steps

\n\n1. Go to the login page\n2. Enter any email address\n3. Leave password blank\n4. Click \"Submit\"\n5. **Expected:** Validation error appears\n6. **Actual:** Page crashes with white screen\n\n

\n\n### 🔍 Debug Information\n\nInclude the context that helps diagnose:\n\n- **Error messages** — Copy the full text, not just \"it says error\"\n- **Console logs** — Open DevTools (F12) → Console tab\n- **Network requests** — DevTools → Network tab (look for red/failed requests)\n- **Crash reports** — Stack traces, error codes, anything the system tells you\n\n

Tools that capture this automatically

\n\n- [Jam.dev](https://jam.dev) — Captures console logs, network requests, and more in one click\n- Browser DevTools — Your built-in best friend\n- Screen recording with voiceover — Walk through what you're seeing\n\n

\n\n### 🎬 Show, Don't Just Tell\n\nA video of you recreating the issue while talking through it is incredibly valuable. Describe:\n- What you're clicking\n- What you expect to happen\n- What actually happens\n\n### ⚡ One-Click Repros (The Gold Standard)\n\nThe absolute best repro is one someone can run instantly:\n\n- **[JSBin](https://jsbin.com)** / **[CodePen](https://codepen.io)** / **[JSFiddle](https://jsfiddle.net)** — For frontend issues\n- **[Val Town](https://val.town)** — For backend/API issues\n- **[TypeScript Playground](https://www.typescriptlang.org/play)** — For TypeScript type issues\n- **[Rollup REPL](https://rollupjs.org/repl/)** — For bundler issues\n- **GitHub repo** — For complex setups (but keep it minimal!)\n\nIf someone can click a link and *see* your bug, you've done the work for them.\n\n---\n\n## How to Make a Minimal Repro\n\n### Option A: Start Fresh (Recommended)\n\n1. Create a new project/file/sandbox\n2. Add only the code needed to show the bug\n3. If you can't reproduce it, that tells you something!\n\n### Option B: Strip Down\n\n1. Make a copy of your project\n2. Delete half the code\n3. Does the bug still happen?\n - **Yes:** Delete half of what remains\n - **No:** The bug was in what you deleted—put it back and delete the *other* half\n4. Repeat until you have the smallest possible code that shows the bug\n\n

What to remove first

\n\n- Unrelated features and buttons\n- Styling and CSS (unless it's a styling bug)\n- Authentication and API calls (replace with hardcoded data)\n- Extra dependencies\n- Comments and dead code\n- Configuration files (use defaults)\n\n

\n\n### 🎉 Plot Twist: You Might Fix It Yourself\n\nSomewhere in this process, you'll often go: *\"Wait, why did I write it that way?\"*\n\nThat's the magic. **The minimal repro process forces you to understand your own code.** And understanding is 90% of fixing.\n\n---\n\n## The Checklist\n\nBefore sharing your repro, verify each item. *Click any item to link directly to it.*\n\n### ✅ Do This\n\n

\n\n- **[Self-contained](#self-contained)** — Can someone copy-paste-run it without setup?\n\n

\n\n- **[Include the error](#include-error)** — Full error message, not \"it doesn't work\"\n\n

\n\n- **[Include versions](#include-versions)** — Node version, browser, OS, package versions\n\n

\n\n- **[Steps to reproduce](#steps-to-reproduce)** — Numbered list of exactly what to do\n\n

\n\n- **[Expected vs Actual](#expected-vs-actual)** — What should happen? What happens instead?\n\n

\n\n- **[Actually minimal](#minimal)** — Could you remove anything else? Try.\n\n### ❌ Don't Do This\n\n

\n\n- **[No screenshots of code](#no-screenshots)** — I can't copy-paste an image. Give me text.\n\n

\n\n- **[No partial code](#no-partial-code)** — \"Here's the relevant part\" often hides the bug\n\n

\n\n- **[No entire codebases](#no-entire-codebase)** — Your 50-file project isn't a repro\n\n

\n\n- **[\"It doesn't work\"](#no-it-doesnt-work)** — Doesn't work *how*? What did you expect?\n\n

\n\n- **[Nothing is \"obvious\"](#no-assume-obvious)** — State your environment, steps, everything\n\n---\n\n## Quick Links\n\n- [The XY Problem](https://xyproblem.info/) — Are you solving the right problem?\n- [SSCCE](https://sscce.org/) — The original guide that inspired this page\n- [Jam.dev](https://jam.dev/) — Capture bug reports with full context\n- [How to Report Bugs Effectively](https://www.chiark.greenend.org.uk/~sgtatham/bugs.html) — Simon Tatham's classic guide\n\n---\n\n\n",[148],"5dce4a9c-f924-11f0-8e22-42dde27851f2","README.md","5dce4b64-f924-11f0-8e22-42dde27851f2",11,["D",1769259503636],"# repro.fyi\n\n**A guide to creating minimal reproductions for debugging.**\n\n🔗 **Live site:** [repro.fyi](https://repro.fyi)\n\n## What is this?\n\nA single-page site that teaches developers (especially beginners and \"vibe coders\") how to create minimal reproductions when debugging. The key insight: **making a minimal repro often solves your own bug** before you need to ask anyone for help.\n\n## Why?\n\nBecause `repro.fyi` is easier to remember than `sscce.org`, and I got tired of explaining the same debugging principles over and over.\n\nThis site is designed to be:\n- **Scannable** — Headings, checklists, and expandable sections\n- **Linkable** — Share specific sections like `repro.fyi/#no-screenshots`\n- **Friendly** — Written for beginners, not gatekeepers\n\n## Key Concepts Covered\n\n1. **The selfish reason to make repros** — Isolation IS debugging\n2. **What makes a good repro** — Steps, debug info, one-click sandboxes\n3. **How to create one** — The \"bisect\" method of stripping code\n4. **The checklist** — Linkable items to share with people who need guidance\n\n## Tech Stack\n\n- **[Val Town](https://val.town)** — Serverless hosting\n- **Markdown** — Content in `index.md`\n- **[Marked](https://marked.js.org/)** — Markdown → HTML\n- **Classless CSS** — Switchable between Water.css, Pico, Simple.css, MVP.css, Sakura\n\n## Development\n\nThe site is a Val Town HTTP val:\n\n- `main.ts` — HTTP handler that renders markdown with CSS framework picker\n- `index.md` — All the content in Markdown\n\nTo preview CSS frameworks, add `?css=pico` (or `water`, `simple`, `mvp`, `sakura`, `none`) to the URL.\n\n## Related Resources\n\n- [SSCCE](https://sscce.org/) — The OG guide (inspired this site)\n- [The XY Problem](https://xyproblem.info/) — When you're solving the wrong problem\n- [How to Report Bugs Effectively](https://www.chiark.greenend.org.uk/~sgtatham/bugs.html) — Simon Tatham's classic\n- [Jam.dev](https://jam.dev/) — Tool for capturing bug reports with context\n\n## License\n\nPublic domain. Copy it, remix it, make it better.\n\n---\n\n*Built with ❤️ on [Val Town](https://val.town)*\n",[154],"pulls","branches",1,"forks","envVars",{"_168":136,"_170":136},"connections",{"_168":136,"_169":136},"count","unfilledCount","emptyCount",{"_40":153,"_31":154,"_29":155,"_133":-5,"_38":39,"_37":156,"_134":24,"_35":185,"_13":136,"_32":20,"_33":158,"_23":24,"_137":-5,"_176":186,"_26":187},{"_40":147,"_31":148,"_29":149,"_133":-5,"_38":39,"_37":143,"_134":24,"_35":182,"_13":136,"_32":20,"_33":151,"_23":24,"_137":-5,"_176":183,"_26":184},{"_40":139,"_31":140,"_29":55,"_133":-5,"_38":39,"_37":141,"_134":24,"_35":179,"_13":143,"_32":144,"_33":145,"_23":24,"_137":-5,"_176":180,"_26":181},{"_40":132,"_31":27,"_29":30,"_133":-5,"_38":39,"_37":14,"_134":24,"_35":175,"_13":136,"_32":20,"_33":34,"_23":24,"_137":-5,"_176":177,"_26":178},["D",1769260955824],"children",[],[27],["D",1769260721219],[],[140],["D",1769259461510],[],[148],["D",1769259503636],[],[154],["D",1762703128089],["D",1789615253173],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":53,"_102":103,"_104":24},{"_13":87,"_31":88,"_40":39,"_89":41,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":42,"_96":97},"ctx",{"_80":-5,"_124":226,"_227":228,"_229":230,"_231":24,"_232":24,"_233":24,"_234":57,"_235":-5,"_236":-7,"_237":-7,"_238":136,"_239":24,"_240":24,"_241":-5,"_242":24,"_243":24,"_244":24,"_245":-5},"ENV",{"_197":198,"_199":200,"_201":88,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v13