Plugins New in v0.2.13 #

Plugins are custom code that Eleventy can import into a project from an external repository.

List of Official Plugins #

All official plugins live under the @11ty npm organization and plugin names will include the @11ty/ prefix.

RSS: Generate an Atom feed to allow others to subscribe to your content using a feed reader.
Syntax Highlighting: Code syntax highlighting using PrismJS without client-side JavaScript.
Navigation: A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!
Inclusive Language: A plugin to check for inclusive language in markdown files.

Community Contributed Plugins #

See all eleventy-plugin packages on npm. The rest have been added to this site by our community (and are listed in random order). Add your own!

eleventy-plugin-reading-time will generate a tag for the estimated reading time. johanbrook
eleventy-plugin-youtube-embed automatically embeds YouTube videos based on just their URLs. gfscott
eleventy-plugin-add-web-component-definitions will add Web Component definitions automatically, by reading custom tags from HTML pages. jdvivar
eleventy-plugin-nesting-toc will generate a nested table of contents from your site's headings.
eleventy-plugin-toc will generate a table of contents from your headings. jdsteinbach
eleventy-plugin-tailwindcss will add Tailwind CSS support for your website. dafiulh
@infinity-interactive/eleventy-plugin-injector allows you to run an arbitrary callback at build time or when using --serve or --watch genehack
~~eleventy-plugin-yamldata~~ ~~will allow you to use a yaml file as local data file.~~ This plugin has been superceded by Eleventy Custom Data Formats.
eleventy-xml-plugin adds Liquid filters used for sitemap and RSS/feed file generation. jeremenichelli
eleventy-plugin-respimg will take care of the srcset attribute for responsive images for you. etportis
@mightyplow/eleventy-plugin-cache-buster will add content hashes to JavaScript and CSS resources. mightyplow
eleventy-plugin-sharp will add the full power of Sharp's image processing to your templates. luwes
@quasibit/eleventy-plugin-sitemap adds a shortcode for generating a sitemap. nunof07
eleventy-plugin-lazyimages will add progressive lazy loading to your images.
eleventy-plugin-i18n will add a clever i18n universal filter to assist with internationalization and dictionary translations. duncanadam
eleventy-plugin-images-responsiver allows authors to use the simple and standard Markdown syntax for images and yet get responsive images in the generated HTML, with srcset and sizes attributes. nhoizey
eleventy-plugin-pwa will generate a Service Worker for you. okitavera
eleventy-plugin-reader-bar adds a reader bar as you scroll through the page. thigoap
eleventy-nbsp-filter Filter for Eleventy to replace spaces between words with characters. jeremenichelli
eleventy-plugin-meta-generator will render a generator <meta> tag for you. AndreJaenisch
eleventy-plugin-i18n-gettext adds i18n support with Gettext string translation and moment.js date and times localization. sgissinger
eleventy-plugin-json-feed adds a Nunjucks shortcode for outputing a JSON feed. genehack
@quasibit/eleventy-plugin-schema adds a shortcode for generating JSON-LD structured data. nunof07
eleventy-plugin-ancestry Real hierarchical navigation, following folders and documents. tigerswaynet
eleventy-plugin-markdown-shortcode adds a universal shortcode to render markdown. tylerwilliamsct
@shawnsandy/npm_info will provide you with package detail for an npm package or GitHub info.
eleventy-plugin-sass will add the ability to use Sass for your stylesheets.
@fec/eleventy-plugin-remark Process Markdown files with Remark and use Remark plugins to add new features to your Markdown. florianeckerstorfer
eleventy-filter-npm-package-downloads will show you the number of downloads for the given npm package. AndreJaenisch
eleventy-plugin-helmet will manage your document head. vseventer
eleventy-plugin-cloudinary adds a universal shortcode allowing you to add images from your cloudinary account. juanfernandes
@code-blocks/eleventy-plugin Use markdown code blocks to render: charts, graphviz diagrams, MathML, music sheets, HTML tables and highlight code. idris-maps
eleventy-plugin-typeset will make your typography nicer. johanbrook
Add your own!

Adding a Plugin #

Install the plugin through npm. #

npm install @11ty/eleventy-plugin-rss --save

Add the plugin to Eleventy in your config file #

Your config file is probably named .eleventy.js.

Filename .eleventy.js

const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginRss);
};

Plugin Configuration Options New in v0.5.4 #

Use an optional second argument to addPlugin to customize your plugin’s behavior. These options are specific to the plugin. Please consult the plugin’s documentation (e.g. the eleventy-plugin-syntaxhighlight README) to learn what options are available to you.

const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginSyntaxHighlight, {

    // only install the markdown highlighter
    templateFormats: ["md"],

    init: function({ Prism }) {
        // Add your own custom language to Prism!
    }
  });
};

Namespace the plugin additions #

You can namespace parts of your configuration using eleventyConfig.namespace. This will add a string prefix to all filters, tags, helpers, shortcodes (as of 0.7.0), collections, and transforms.