Adding reading times to an Astro blog

Reading times set expectations before someone commits to an article. A “2 min read” label on a blog card tells you it’s a quick technique post. “14 min read” tells you to save it for later. Both are useful signals — and they’re trivial to add once you know which package to reach for.

This post covers adding reading times to both blog listing cards and individual post pages in Astro, using the reading-time npm package from the official Astro recipe.

The package

Astro’s documentation recommends the reading-time package. It accepts a string of text, counts the words, and returns a result object including a .text property formatted as "5 min read".

1
pnpm add reading-time

Usage is a single function call:

1
import readingTime from 'reading-time';
2

3
const result = readingTime(post.body ?? '');
4
// result.text → "5 min read"
5
// result.minutes → 4.7
6
// result.words → 940

The .text property is what gets displayed — it rounds to the nearest minute and appends “min read”.

Where reading times appear

This blog shows reading time in two places:

• Blog cards — after the publication date, separated by a middle dot: 14 Apr 2026 · 5 min read
• Post page hero — in the meta bar between the date and the tag pills

Blog cards

The computation happens in the listing components — BlogGrid.astro for paginated blog pages and index.astro for the homepage recent-posts grid. Both import the package and pass the result down to BlogPost.astro:

1
---
2
import readingTime from 'reading-time';
3
---
4

5
{posts.map((post) => (
6
  <BlogPost
7
    title={post.data.title}
8
    description={post.data.description}
9
    url={`/blog/${post.id}`}
10
    cover={post.data.cover}
11
    pubDate={post.data.pubDate}
12
    readingTime={readingTime(post.body ?? '').text}
13
  />
14
))}

BlogPost.astro receives readingTime as an optional prop and appends it to the existing date string:

1
---
2
const { description, title, subTitle, url, cover, pubDate, draft, readingTime } =
3
  Astro.props;
4
---
5

6
{formattedDate && (
7
  <p class="card-meta">
8
    {formattedDate}{readingTime && ` · ${readingTime}`}
9
  </p>
10
)}

Making readingTime optional means the card degrades gracefully in any context where it isn’t passed — no template changes needed elsewhere.

Post pages

For individual post pages, the computation lives in blog/[id].astro alongside the existing render() call:

1
---
2
import readingTime from 'reading-time';
3

4
const { post } = Astro.props;
5
const { Content, headings } = await render(post);
6
const postReadingTime = readingTime(post.body ?? '').text;
7
---
8

9
<MarkdownPostLayout
10
  frontmatter={post.data}
11
  postId={post.id}
12
  headings={headings}
13
  readingTime={postReadingTime}
14
>
15
  <Content />
16
</MarkdownPostLayout>

MarkdownPostLayout.astro destructures the new prop and passes it straight through to PageHero:

1
const { frontmatter, postId, headings = [], readingTime } = Astro.props;
2

3
// ...
4

5
<PageHero
6
  title={frontmatter.title}
7
  date={formattedDate ?? undefined}
8
  readingTime={readingTime}
9
  tags={frontmatter.tags}
10
  {/* ... */}
11
/>

In PageHero.astro, the reading time sits between the date and the tags divider. The condition that guards the meta bar is extended to include readingTime, and the divider condition is updated to account for either date or reading time being present:

1
{(author || date || readingTime || (tags && tags.length > 0)) && (
2
  <div class="page-hero__meta">
3
    {author && <span class="page-hero__author">By {author}</span>}
4
    {date && <span class="page-hero__date">{date}</span>}
5
    {readingTime && (
6
      <span class="page-hero__reading-time">{readingTime}</span>
7
    )}
8
    {(date || readingTime) && tags && tags.length > 0 && (
9
      <span class="page-hero__divider" aria-hidden="true" />
10
    )}
11
    {/* tags... */}
12
  </div>
13
)}

With that in place, every post page shows its reading time in the hero meta bar next to the date, and the divider between the meta bar and the tags appears whenever either one is present, so tags never end up floating with no separator when a post has no author or date set.

The reading-time package does the hard part: counting words and formatting the label. The rest of the work was just making sure that one value flowed cleanly from post.body, through the listing pages and the post-page render, down to the two places a reader actually sees it: the card and the hero.