The Trevor Project — Saving Young LGBTQ Lives
Eleventy
The possum is Eleventy’s mascot
Eleventy Documentation
WARNING:
This is an older version of Eleventy. Go to the newest Eleventy docs (current path: /docs/plugins/) or the full release history.
Menu
Compare ×4000 file build
Eleventy 1.93s
Next.js 70.65s

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

List of Official Plugins Jump to heading

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

Community Contributed Plugins Jump to heading

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!

Adding a Plugin Jump to heading

Install the plugin through npm. Jump to heading 

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

Add the plugin to Eleventy in your config file Jump to heading

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 Jump to heading

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 Jump to heading

You can namespace parts of your configuration using eleventyConfig.namespace. This will add a string prefix to all filters, tags, helpers, shortcodes, 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);
  });
};
WARNING:
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.

Community Resources

IndieWeb Avatar for https://bryanlrobinson.com/blog/creating-11ty-plugin-embed-svg-contents/Creating an 11ty Plugin—SVG Embed Tool
Screenshot of https://bryanlrobinson.com/blog/creating-11ty-plugin-embed-svg-contents/
+ Add yours!

Plugins: