I Built FrameNotes to Keep Screenshots and Transcripts Together

A transcript can preserve every word of a tutorial and still leave you wondering which button the speaker clicked.

That is the problem behind FrameNotes, a project I am building to turn short videos into visual notes. The idea is to keep the screen, the spoken explanation, and the timestamp together so a recording becomes easier to review.

The unit of a note

For visual material, a useful note needs three parts:

• An image: the diagram, slide, or interface state being discussed.
• A time range: a way to locate that moment in the source.
• The corresponding transcript: the explanation that gives the image context.

This is especially useful for software walkthroughs. “Open this panel” means little without the screen; a screenshot alone may not explain why the panel matters.

Here is an illustration of the format:

Illustrative example only. The visuals and sample narration are AI-generated; this is not a screenshot of a real video conversion.

What the beta does

FrameNotes accepts short video uploads, extracts selected keyframes, transcribes the audio, and builds downloadable notes. When the transcription provider returns timestamps, transcript segments can be matched to the relevant part of the video.

The workflow has distinct stages: upload, visual extraction, transcription, and export. Keeping those stages visible helps explain where a job is spending time or where it failed.

The output is intended to remain useful outside the website. HTML provides a reading document, while a Markdown ZIP keeps editable text and its image folder together. DOCX is another option for a conventional document workflow.

Three design tradeoffs

More frames are not always better. Repeated screenshots make a note longer without necessarily making it clearer. The aim is to preserve meaningful visual changes, although automatic selection can still miss details.

Transcription is a dependency, not a certainty. Noise, overlapping speech, and provider availability affect the result. Important commands, names, and numbers still need to be checked against the recording.

Portable files need portable images. A Markdown document is less useful if its screenshots disappear when it moves to another folder. Packaging the note with its images is part of the workflow, rather than an afterthought.

Current limits

This is a short-video beta: keep videos under 30 minutes and local files under 500 MB. Local upload is the recommended route. YouTube links are a convenience option, but access restrictions can prevent a server from retrieving a video even when it plays in a browser.

It also involves server-side processing and a speech-to-text provider. Use a recording you are authorized to process, avoid confidential material, and download the results you want to keep.

What I would like feedback on

You can explore the project at FrameNotes.

For developers learning from recorded tutorials, which is the bigger problem: choosing the right screenshots, matching explanations to them, or moving the finished notes into your existing workflow?

I would particularly like to understand where this format helps and where plain text is enough.

---

Disclosure: I am the creator of FrameNotes. This article was prepared with AI assistance using the project's current public documentation. The illustrative image above is also AI-generated.