This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux
What I Built
Introducing Codesplain.ai — a new way to explain code using infinitely-zoomable, interactive visualization.
Codesplain turns any codebase into an intuitive, editable map. Zoom out to understand the overall architecture. Zoom in to explore specific modules, functions, or even individual lines of code. Save graph states so you don’t lose your mental model and don’t have to rebuild context every time you return.
Stop explaining your code. Codesplain it.
My Pitch Video
Demo
The Story Behind It
Code walkthroughs today are broken. They usually involve rambling screen-shares, frantic tab-switching, or documentation that no one actually wants to read.
And the problem is getting worse.
As engineers rely more on LLMs to generate code, we’re shipping faster than ever — but explaining and truly understanding what we’ve built is getting harder, not easier. The gap between code written and code understood keeps growing.
I built Codesplain to close that gap.
Instead of narrating files line-by-line, Codesplain lets you explain code visually — as a map you can explore, edit, and return to later.
Technical Highlights
Codebase-as-Graph: The core abstraction is a directed graph representing modules, files, functions, and their relationships.
Infinite Zoom UX: Users can smoothly pan and zoom between high-level architecture and low-level implementation details.
Editable Graph: Users can make changes and additions to the graph using natural language.
Interactive Explanations: Clicking any node generates a concise explanation of what it does and why it exists, with drill-downs to specific lines of code.
Persisted Graph State: Graph layouts and views are saved as structured JSON, allowing users to return to the exact mental model they left off with.
Modern Web Stack: Built as a web-based application optimized for fast iteration, responsive interaction, and low friction onboarding.
Codesplain is designed for:
- data scientists explaining complex models to their teams
- engineers inheriting unfamiliar or legacy codebases
- anyone who wants to understand and explain code more clearly to teammates, stakeholders, or themselves
Use of Mux (Additional Prize Category Participants Only)
Mux is used to host and deliver the product walkthrough and pitch video embedded above. The integration was straightforward, reliable, and provided a clean way to showcase an interactive product without worrying about video infrastructure.
Top comments (1)
Thanks for checking out Codesplain!
Happy to answer any questions.