Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Eleventy Documentation

This is an older version of Eleventy. Go to the newest Eleventy docs (current path: /docs/plugins/) or the full release history.
Menu

Plugins

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 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.

    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!

    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 #

    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, 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.

    Plugins: