Maximilian Boll

13. May 2024 (~2min)

I've been using eleventy for quite a while now and a couple of plugins with it, some official, some by community members. It was about time to create my own plugin. I decided to add a reading time display to my blog posts and even though there are plugins for that already I chose to build my own and publish it—for learning purposes.

May I proudly present: my very first node package and eleventy plugin! You can find the package at NPM and the full source code on GitHub.

So, what is it?

The plugin is really small and simple to use. You can add it to your 11ty project and use a custom filter to display the average reading time of a post or page. You can see an example on every single post on the blog page.

How to use it

First install the package to your project like so:

npm i @myxotod/eleventy-plugin-readingtime

After that you have to add and register it inside your .eleventy.js config file

// .eleventy.js
const readingtime = require("@myxotod/eleventy-plugin-readingtime");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(readingtime);
};

Finally use it in your code with the readingtime-filter

<div>Reading time: {{ post | readingtime }}</div>

Example output

<div>Reading time: ~3min</div>

You will have to pass the whole post or page to the filter as shown above.

Can I customize it? Sure you can!

You can pass several options when adding the plugin in your eleventy config file like so:

eleventyConfig.addPlugin(readingtime, {
  wordsPerMinute: 200,
  suffixDisplay: true,
  suffixText: 'min',
  prefixDisplay: true,
  prefixText: '~',
  verbose: false
});

If you have any questions, feel free to open an issue or send me a message on X.