Free Podcast template

Resonance

An episode index for ideas worth spending time with.

Plain HTML · CSS · JavaScript

16 KB · 10 files · No install or build step

Live preview Scroll inside to explore

Inside the design

A bold opening statement sits beside a square signal-inspired cover. Compact episode rows, oversized issue numbers, a light editorial interlude, and readable expanded transcripts give the page a distinct publication rhythm.

Independent podcast creators and small audio journals that want to present accurate episode information, readable transcripts, and their own verified listening destinations.

  • Four original SVG covers and complete written episode samples
  • Topic filters combined with literal case-insensitive transcript search
  • IME-aware search, matching transcript expansion, and honest empty state
  • Native transcripts readable offline and without JavaScript

Start with your own content

Replace the fictional identity, original sample writing, and covers with your publication. Add only your own or separately licensed recordings, faithful transcripts, and working listening links; this package contains no audio or fake player. Search operates on local article text and does not send queries anywhere. Remove the demo noindex directive when publishing the real site.

  1. Download and extract the ZIP, keeping its folder structure intact.
  2. Open index.html in a browser, then edit the HTML, CSS, and JavaScript in your editor.
  3. Replace the fictional text, demo contact details, titles, image descriptions, and any sample pricing.
  4. Follow the included README before publishing, including removing the preview-only noindex tag from your customized site.

These files are static. No message is sent, account created, or payment processed by the template. The embedded preview is isolated from MRHTML; open the full preview to inspect it in its own browser tab.

Code and asset licenses

Original template code is provided under the MIT license included in the ZIP. The visible Designed by MRHTML footer credit uses rel="nofollow"; the MIT license does not require you to keep that visible link.

This design uses original HTML, CSS, and local vector artwork. No external fonts or image services are needed.

Read the setup guide · View asset sources · Read the code license