Explain your code in 60 seconds: from a pasted snippet to a hand-drawn video
Published · Updated · Jakub Kuźnicki
First-party workflow note: the author used Todrawn's own Scribe controls and the linked clip is the checked export described below.
Update policy: product facts, cited sources, and checked output evidence are revalidated when they change.
The problem with a six-paragraph PR description
Could you imagine that a six line helper method decided that Google would not index four of your homepages? The pull request that fixed it carried a six paragraph essay about what broke and why. Realistically one person read it and went about their day.
The interesting part of that bug was never what the final code looks like. It was the order you have to think in: first you notice there are two copies of the helper, then that one of them treats an empty path differently from a single slash, then that trailing slashes are switched off, and only then does it click why the canonical URL pointed at a redirect. A diff shows the end state, not the path to it. A pen writing line by line shows the path.
The code
This is why I built Scribe. Reading code beats staring at it and wondering for an hour, and watching it get written beats both.
Previewing is free. Pasting, adjusting, drawing, replaying: none of that needs an account, and there is no cap on how often you do it. An account is needed only to download the finished video. On the free plan you get two exports per UTC day, they reset at 00:00 UTC, and they carry a small todrawn.com watermark. Premium removes the limit and the watermark.
Here is the helper that caused the issue, in the shape it had before the fix:
function prefixed(locale: AppLocale, path?: string): string {
if (locale === routing.defaultLocale) {
return path || "/";
}
return `/${locale}${path || ""}`;
}Paste it into the text field on Scribe and press play. Six lines, and the whole bug lives in the difference between the two return statements.
Adjusting
Scribe has to fit more than one flow, so most of the picture is adjustable from the Adjust panel.
Highlighting takes None, JavaScript, TypeScript, Python, Java, or one shared profile for C, C++, C# and Go. Uploading a file picks the profile from its extension, so a .cs or .go file arrives already coloured. You can also drop highlighting entirely and write the whole thing in one ink colour, or colour a selected fragment by hand when one line deserves the attention.
Background is Paper or Dark board, and the choice applies to the exported frames, not only to the preview. Whichever one your audience reads code in, that is the one to pick.
The pen is the part that matters, because the pen is what writes. Speed runs from half to double. Line pause holds it between lines for up to a second, which is where a snippet stops being a wall and starts being a sequence. In the 3D pen view, Pen lift sets how far the nib rises between strokes; that one is a look rather than a timing change, and it has no effect on the flat 2D render.
Long identifiers are the usual reason a line will not fit. In text mode, size runs from 70 to 140 percent and letter spacing goes up to 0.2em, which is normally enough to keep a long method name on one line. Camera framing zooms between 75 and 200 percent if you would rather crop in than shrink the text.
Format is 16:9 wide or 9:16 vertical, so a reel and a docs page can come out of the same snippet. Playback pauses, replays and scrubs whenever you want, on a real timeline rather than a single play button. There is more in there than this list; the Adjust panel remembers what you set, and there is a Reset when you have gone too far.
What works and what does not
Long lines can be felt, and vertical is where they hurt. On a 9:16 frame short lines win; if the snippet insists on being wide, use 16:9 or cut it down. A wall of code is worse than three lines with a pause after each. Comments read better than clever identifiers while the pen is writing.
30 fps is the smoother of the two, but handwriting does not need it. 24 is enough and it costs noticeably less file size, so 24 is my default and 30 is what I reach for only when the pen is moving fast.
Three limits worth knowing before you paste:
- Input is capped at 100 KB, and only the first 500 lines get drawn.
- The hand-drawn glyph font is printable ASCII, so accented characters come out as a small box and Scribe tells you when that happens. My own surname does not survive it.
- Rendering and encoding happen on your machine, so a long clip or a dense drawing is felt there.
That last one is the trade behind the free preview. Your text, your code, your drawing and every rendered frame stay in the browser; the only thing that leaves it on export is the format and the duration of the render, because the daily counter has to be enforced somewhere. The FAQ spells that out, along with the reset timing.
Where a browser cannot encode MP4 you get WebM instead, and Scribe says so rather than failing quietly. Every limit above is on the list to improve, and doing it without sending your code anywhere is the constraint I would rather design around than drop.
Export and where to put it
Export is 720p or 1080p, 24 or 30 fps, wide or vertical. Before you spend anything, Scribe shows an estimate: the duration, the frame count and roughly how many megabytes you are about to get. Sign in to download; the preview that got you here did not ask for that. If two exports a day is not enough, the pricing page is the honest answer.
Then the file has to land somewhere it earns its keep. Mine mostly go into pull request descriptions, on the changes where the reasoning matters more than the diff. Release notes are the next best home: a 40 second clip gets watched where a changelog gets scrolled past. After that, the docs page for the one function everybody misreads, the Slack channel where written explanations go to die, and a launch thread, where a vertical clip does the work a screenshot cannot.
The video, made with the tool it describes
That is the snippet from the top of this post, exported straight out of Scribe. No camera, no editor, no screen recording: just the pen writing the code in the order that makes the bug obvious.
The preview is free and needs no account, so the fastest way to judge any of this is to paste your own worst explained function into Scribe and watch the pen work. If it holds up, you will know within a minute. If it does not, I would rather hear why.
For the broader developer features, see pricing, then compare the code walkthrough workflow.