The classic case — a clean 5 min read pill sits under the post title, calculated automatically from the article body below. Drop ReadTime, point it at your content, done.

My Blog Post

Author: John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in quam ac ipsum fermentum sagittis et et felis. Cras iaculis sed sem non maximus. Maecenas accumsan turpis quis urna eleifend, maximus consectetur mauris egestas.

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium.

In a docs index list, every entry shows its reading time inline next to the title — but only when it's worth showing. The minimum threshold hides the badge on quick entries, so < 1 min clutter never appears."

Documentation

TOPICS

Section One

Section Two

Section Three

Section Four

Section One

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque.

Section Two

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales.

Section Three

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut.

Section Four

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium.

For editorial layouts where the reading time is a design feature, not a detail. The Number Display preset shows the minutes large with a small 'min read' label below — independent typography for each line.

My Magazine Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate diam non suscipit viverra aenean in quam ac ipsum fermentum sagittis et et felis.

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium.

Tutorials with code blocks read slower than prose. Adjust the reading speed to 150 wpm and pick a custom icon via Dropzone — here we use a custom icon to signal learning content.

Tutorial

Fetch JSON from an API

Step 1 — Make the request

const response = await fetch('https://api.example.com/posts');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra, lorem ipsum dolor sit amet, consectetur adipiscing elit.

Step 2 — Parse the JSON

const posts = await response.json();
console.log(`Received ${posts.length} posts`);

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra, lorem ipsum dolor sit amet, consectetur adipiscing elit.

Step 3 — Render the list

const container = document.querySelector('#posts');
posts.forEach(post => {
const item = document.createElement('article');
item.innerHTML = `<h3>${post.title}</h3><p>${post.body}</p>`;
container.appendChild(item);
});

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra, lorem ipsum dolor sit amet, consectetur adipiscing elit.

For pages where the word count itself matters — newsletters, essays, study materials — the format string accepts a {words} placeholder alongside {minutes}. Pair it with the Bold Badge preset for a prominent, can't-miss indicator.

The State of Reading in 2026

Author: John Doe — Newsletter: n° 10/2026

Freepik - Magnific.com

Nulla non nunc maximus

Condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam.

Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium.

Mauris venenatis telit

Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales.

Aliquam eget est eu quam interdum pretium. Nulla non nunc maximus, condimentum lectus ut, faucibus velit. Mauris a pretium leo. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Nulla faucibus nec quam sed eleifend. Maecenas dignissim nulla nec enim blandit, eu aliquet elit elementum. Vestibulum faucibus non ipsum non pellentesque. Cras egestas eros at dolor feugiat viverra. Nulla vulputate diam non suscipit viverra. Fusce tortor est, varius ac gravida non, malesuada ac dui. Proin lobortis risus et mauris venenatis accumsan quis eu quam. Duis condimentum accumsan erat, quis facilisis arcu porttitor ut. Nunc posuere ut enim vel porta. Nam rutrum odio id lacus feugiat sodales. Aliquam eget est eu quam interdum pretium.

Designed for

Quick build, launch faster.

Set the pace with ReadTime

A reading-time badge for articles and blog posts — calculated from your actual content.

Be the first to know

Get notified about new components and updates.

No spam. Privacy policy.

ReadTime, a reading-time badge that just works

© RW Pro Space • All rights reserved