Plugins New in v0.2.13

Community Resources:

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.

Image: A utility to resize and generate images.
Cache Assets: A utility to fetch and cache network requests.
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-xml-plugin adds Liquid filters used for sitemap and RSS/feed file generation. jeremenichelli
eleventy-load brings webpack-like loaders to Eleventy gregiv_es
eleventy-plugin-page-assets Automatically copy images and assets relative to a template to /dist folder and rewrite paths to hashes (Similar to webpack html-loader, or Hexo Post Asset)
eleventy-plugin-reading-time will generate a tag for the estimated reading time. johanbrook
eleventy-google-fonts A Nunjucks shortcode to optimize Google Fonts. This shortcode download and inline Google Font's CSS. takanorip
eleventy-plugin-lazyimages will add progressive lazy loading to your images.
eleventy-plugin-add-web-component-definitions will add Web Component definitions automatically, by reading custom tags from HTML pages. jdvivar
eleventy-plugin-tailwindcss will add Tailwind CSS support for your website. dafiulh
eleventy-plugin-link_to a nunjucks tag to link to another internal content in Eleventy nhoizey
@quasibit/eleventy-plugin-sitemap adds a shortcode for generating a sitemap. nunof07
eleventy-plugin-reader-bar adds a reader bar as you scroll through the page. thigoap
eleventy-plugin-sharp-respimg will perform build-time image transformations with Sharp and generate responsive image markup using <picture>. tannerdolby
eleventy-plugin-toc will generate a table of contents from your headings. jdsteinbach
@fec/eleventy-plugin-remark Process Markdown files with Remark and use Remark plugins to add new features to your Markdown.
@quasibit/eleventy-plugin-schema adds a shortcode for generating JSON-LD structured data. nunof07
@mightyplow/eleventy-plugin-cache-buster will add content hashes to JavaScript and CSS resources. mightyplow
@code-blocks/eleventy-plugin Use markdown code blocks to render: charts, graphviz diagrams, MathML, music sheets, HTML tables and highlight code. idrismaps
eleventy-plugin-helmet will manage your document head. vseventer
eleventy-plugin-i18n-gettext adds i18n support with Gettext string translation and moment.js date and times localization. sgissinger
eleventy-plugin-recent-changes will generate a collection containing your recent commit history. defaced
eleventy-plugin-responsive-images adds a shortcode to take care of the srcset attribute for responsive images via Cloudinary and all other img attributes. adamculpepper
eleventy-njk-unpkg-inliner Inline npm modules from unpkg in Eleventy Nunjucks templates. jaredgorski
eleventy-critical-css extracts and inlines critical CSS from your HTML templates gregiv_es
eleventy-plugin-meta-generator will render a generator <meta> tag for you. AndreJaenisch
eleventy-plugin-cloudinary adds a universal shortcode allowing you to add images from your cloudinary account. juanfernandes
@infinity-interactive/eleventy-plugin-injector allows you to run an arbitrary callback at build time or when using --serve or --watch genehack
@shawnsandy/npm_info will provide you with package detail for an npm package or GitHub info.
eleventy-plugin-babel Compiles JS with gulp-babel.
eleventy-plugin-markdown-shortcode adds a universal shortcode to render markdown. tylerwilliamsct
eleventy-plugin-sharp-respfigure will perform build-time image transformations with Sharp and generate responsive image markup inside <figure> tags. tannerdolby
eleventy-plugin-youtube-embed automatically embeds YouTube videos based on just their URLs. gfscott
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-filter-npm-package-downloads will show you the number of downloads for the given npm package. AndreJaenisch
eleventy-plugin-metagen will generate metadata for Open Graph, Twitter card, generic meta tags and a canonical link. tannerdolby
eleventy-plugin-sass will add the ability to use Sass for your stylesheets.
eleventy-plugin-i18n will add a clever i18n universal filter to assist with internationalization and dictionary translations. duncanadam
eleventy-plugin-nesting-toc will generate a nested table of contents from your site's headings.
@tigersway/eleventy-plugin-ancestry Real hierarchical navigation, following folders and documents. tigerswaynet
eleventy-plugin-respimg will take care of the srcset attribute for responsive images for you. etportis
eleventy-plugin-json-feed adds a Nunjucks shortcode for outputing a JSON feed. genehack
eleventy-plugin-pwa will generate a Service Worker for you. okitavera
~~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.
@greyskullrocks/eleventy-plugin-tinycss An 11ty plugin to inline and optimise external CSS marabyte_
eleventy-plugin-typeset will make your typography nicer. johanbrook
eleventy-nbsp-filter Filter for Eleventy to replace spaces between words with characters. jeremenichelli
eleventy-plugin-emoji An accessible emoji shortcode and filter for your Eleventy projects snmcp
eleventy-plugin-ghost Access the Ghost Content API in Eleventy 👻 DavidDarnes
eleventy-plugin-sharp will add the full power of Sharp's image processing to your templates. luwes
@11tyrocks/eleventy-plugin-emoji-readtime provides a configurable filter to display an estimated read time for Eleventy content, optionally with an emoji visual indicator. 5t3ph
eleventy-plugin-footnotes will help rendering accessible footnotes with Liquid. HugoGiraudel
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.

Filename .eleventy.js

const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
  eleventyConfig.namespace("myPrefix_", () => {
    // the rssLastUpdatedDate filter is now myPrefix_rssLastUpdatedDate
    eleventyConfig.addPlugin(pluginRss);
  });
};

Plugin namespacing is an application feature and should not be used if you are creating your own plugin (in your plugin configuration code). Follow along at Issue #256.

Eleventy Documentation