Hi everyone 
Just released ReadTime, now live on the Elements store. Quick framing: ReadTime is a reading-time badge that reads from your actual article content. Drop it next to your title, point it at the article body via a CSS selector, and you get a clean “5 min read” badge that updates automatically with your text.
Small component, single purpose, but with the polish I’d want from a paid utility: five visual presets, full theme integration, accessible by default, and zero setup beyond pointing at your content.
Five presets, full override
Five styles ready to drop:
• Pill Soft — rounded pill, soft background, subtle shadow. The default.
• Pill Outlined — same shape with a border instead of fill, transparent background. Quieter.
• Inline Text — no container, just inline text with optional icon. For headers where a badge would be too much.
• Bold Badge — solid color, prominent. For magazine-style pages where the badge is a feature, not a detail.
• Number Display — large minutes number with a small suffix label, stacked below or aligned inline (left/right). Editorial-friendly.
Every preset is a starting point. Padding, background, text, border, radius, and shadow each have an Override switch — flip it on and you take over the property with full theme integration. Flip it off and the preset stays in charge.
Reads from the actual content
You give ReadTime a CSS selector for your article body (e.g. #article-body, .post-content) and it does the rest:
• Word count from the rendered text
• Reading speed configurable (default 200 wpm, adjustable for technical or list content)
• Hide below threshold — if the article is shorter than N minutes, the badge hides itself. No “1 min read” on a 50-word card.
• Editable format string with {minutes}, {seconds}, and {words} placeholders — supported in both the main format and the Number Display Suffix Label, so you can split tokens freely between the two lines. Localize by editing one string.
Icon options
Optional icon with two source modes:
• Preset icons — six built-in Heroicons (Clock, Book Open, Bookmark, Document Text, Bookmark Square, Eye) with Outline or Solid style
• Dropzone — switch the source and drop any element inside (your own SVG, an emoji, a small image)
Position before or after the text, with theme spacing for size and gap.
Accessibility & responsive
ARIA label on the wrapper communicates the full reading-time text to screen readers, including the suffix label in Number Display mode. Every visual property is responsive: padding, text size, icon size, gap — adjust per breakpoint where it matters.
Perfect for
• Blog post headers (the obvious case)
• Knowledge base / documentation index pages
• Magazine and editorial layouts (Number Display preset)
• Tutorial pages with long step-by-step content
• Anywhere readers benefit from knowing length upfront
Links
Live demo: ReadTime for Elements - RW Pro Space
Get ReadTime: Elements Store
Happy to answer questions or take feedback. Thanks!
— Massimo