Astro’s documented approach is to calculate a reading-time label while Markdown is processed, save it in the document’s frontmatter, and render that value on the page. The official recipe supports both Sätteri and Unified Markdown processor routes; use the one that fits your existing Astro configuration.
Choose the Markdown processor route your project uses
Astro’s Add reading time recipe documents two ways to add the value. Both use the reading-time package and a Markdown AST plugin; their supporting packages differ.
As an Amazon Associate I earn from qualifying purchases.
| Route | Packages used in Astro’s recipe | Text extraction |
|---|---|---|
| Sätteri | reading-time, @astrojs/markdown-satteri, and satteri |
Plugin works with the Sätteri processor. |
| Unified | reading-time, mdast-util-to-string, and @astrojs/markdown-remark |
mdast-util-to-string converts the Markdown syntax tree to text. |
Use the processor route already configured for your Markdown content rather than adding a second processor solely for this feature. The recipe provides configuration examples for both routes; consult it for the exact setup applicable to your project.
Recommended Free Tools
Calculate the estimate during Markdown processing
The plugin extracts the document’s text, passes it to reading-time, and stores the returned label in Astro frontmatter. In the Unified route, the key operation is toString(tree), which supplies text from the Markdown tree to the reading-time helper. The plugin then sets the result on Astro’s frontmatter data:
data.astro.frontmatter.minutesRead = readingTime.text;Register the plugin with the processor used by your project: Astro’s recipe shows a satteri() configuration for the Sätteri route and a unified() configuration for the Unified route. Follow the recipe’s complete configuration for your chosen route so the plugin runs as part of Markdown processing.
Render the value on the page
Content collection pages
For a content collection entry, Astro’s recipe imports render from astro:content, renders the entry, and obtains remarkPluginFrontmatter together with Content. Render remarkPluginFrontmatter.minutesRead wherever the reading-time label should appear, such as beside the page title.
Markdown layouts
In a Markdown layout, read the property from Astro.props.frontmatter and render minutesRead there. This makes the label available through the frontmatter mechanism populated by the plugin.
Free tools Windows power users keep installed
One-click scans. No signup required.
What the reading-time label means
The helper returns a friendly estimate such as “3 min read.” It is a package-generated estimate, not a measurement of how long a particular reader will take or a promise based on a universal reading-speed standard. Putting it near a title or summary lets visitors see the estimate before opening or reading the article.
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.
