iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use a Markdown processing plugin to calculate a reading-time label, then render the value on your page. Astro’s official recipe documents two processor routes—Sätteri and Unified—and shows how to display the result from either a content collection page or a Markdown layout. The label is an estimate, not a promise of how long any particular person will take to read.
Choose the Markdown processor your project uses
Astro’s Add reading time recipe calculates the value while processing Markdown. A plugin extracts the document text, passes it to the reading-time package, and stores the result in Astro frontmatter. Pick the route that fits the Markdown processor already configured in your project.
| Route | Packages used | Text extraction |
|---|---|---|
| Sätteri | reading-time, @astrojs/markdown-satteri, and satteri |
An mdast plugin extracts the document text. |
| Unified | reading-time, mdast-util-to-string, and @astrojs/markdown-remark |
A remark plugin calls toString(tree) on the syntax tree. |
Both routes produce a frontmatter property for later display. The package set and Astro Markdown configuration differ, so follow the route that matches your existing processor rather than adding both.
Calculate and store the estimate during Markdown processing
For either route, the plugin gets the document’s text, calculates its reading time with reading-time, and assigns the formatted label to Astro frontmatter. In Astro’s documented example, the assignment is:
data.astro.frontmatter.minutesRead = readingTime.text;The Unified route uses mdast-util-to-string to convert the Markdown syntax tree to text before calculating. Register the plugin through unified() in Astro’s Markdown configuration. The Sätteri route defines an mdast plugin and registers it with satteri() in that configuration. Use Astro’s recipe for the complete route-specific installation and configuration code.
Render the value where readers can see it
Once the plugin has written minutesRead to frontmatter, the display code depends on how the page is built.
Content collection page
Import render from astro:content and render the entry. The render result provides Content and remarkPluginFrontmatter; display the plugin-produced value with remarkPluginFrontmatter.minutesRead. Placing it by the title or summary lets readers see the estimate before they start.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Markdown layout
In a Markdown layout, read the field from Astro.props.frontmatter and render minutesRead there. This lets the layout present the estimate consistently for Markdown pages using that layout.
What the label means
The package returns a friendly label such as “3 min read.” Treat that as an estimate generated from the content and the package’s calculation, not a measured reading duration or a universal reading-speed standard. Astro’s recipe does not establish that an individual reader will finish in the displayed time.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
