shadcn.io is not affiliated with official shadcn/ui
Show Notes Chapters Podcast Upload Block for React Aria
An episode form where show-notes lines that start with a time become a chapter list with lengths, malformed time lines are flagged, and a single-file slot takes the audio.
Installation
Overview
Turn timestamps in show notes into chapters, with this podcast episode upload form for React with React Aria. It is the episode form of Mikestand, a podcast host, in two cells. The first holds the title Input, season and episode Number Inputs, a publish date, an Explicit Switch and a single-file File Upload slot for the audio. The second holds the show notes Textarea: every line that starts with mm:ss or h:mm:ss becomes a chapter in the list under it, with its length worked out from the next start, and a line that looks like a chapter but is not is listed as a line to fix and not used. Publish names what is missing and moves focus there. For podcast hosts, video platforms and any form that derives structure from free text.
FAQ
What stays local in the demo?
Publish only writes the status line: nothing is published or scheduled. The picked audio file is listed by name and size and never opened, so no episode length is shown and the last chapter's length says "to the end". To wire it for real, read the duration on the server, store the chapters as a list of start times and titles, and publish the audio and the feed together.
Which lines become chapters?
Lines that start with mm:ss or h:mm:ss followed by a space and a title. Seconds must be 0 to 59 and, when hours are given, minutes too. Each chapter must start after the one before. Other lines stay plain notes.
What is flagged and why?
A line that starts like a time but fails the rules: "7:5 ..." (seconds need two digits), "12:75 ..." (seconds past 59) or a start at or before the previous chapter. Each is listed with its line number and the reason, and is not used as a chapter.
How are chapter lengths worked out?
From the next chapter's start. The last one has no end without the audio's length, which the demo does not read, so it says "to the end".