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.
- Serverless: A plugin to run Eleventy in a serverless function for server side rendering (e.g. Previews in your CMS) and/or in very large sites with On-demand Builders.
- Image: A utility to resize and generate images.
- Render: A plugin to add shortcodes to render an Eleventy template string (or file) inside of another template.
- 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-plugin-mathjax A plugin for rendering math equations using MathJax.
- eleventy-plugin-i18n will add a clever
i18n
universal filter to assist with internationalization and dictionary translations. duncanadam - eleventy-plugin-add-web-component-definitions will add Web Component definitions automatically, by reading custom tags from HTML pages.
jdvivar - eleventy-plugin-plantuml allows processing of Plantuml markdown code blocks into beautiful diagrams
awaragi
- eleventy-plugin-img2picture replaces
<img>
using<picture>
with resized and optimized images. saneef - eleventy-plugin-typeset will make your typography nicer.
johanbrook - @mightyplow/eleventy-plugin-cache-buster will add content hashes to JavaScript and CSS resources.
mightyplow - eleventy-plugin-shopify Import your Shopify products, pages, and collections into Eleventy as global data.
danleatherman - eleventy-plugin-svg-sprite will compile a directory of SVG files into a single SVG sprite and install shortcodes to embed SVG sprite and SVG content
Patrick153 - 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-helmet will manage your document head.
vseventer - 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-tailwindcss will add Tailwind CSS support for your website.
dafiulh
- @fec/eleventy-plugin-remark Process Markdown files with Remark and use Remark plugins to add new features to your Markdown.
- @code-blocks/eleventy-plugin Use markdown code blocks to render: charts, graphviz diagrams, MathML, music sheets, HTML tables and highlight code.
idrismaps - eleventy-plugin-youtube-embed automatically embeds YouTube videos based on just their URLs.
gfscott - eleventy-plugin-lazyimages will add progressive lazy loading to your images.
- eleventy-critical-css extracts and inlines critical CSS from your HTML templates
gregiv_es - eleventy-plugin-reading-time will generate a tag for the estimated reading time.
johanbrook - @quasibit/eleventy-plugin-sitemap adds a shortcode for generating a sitemap.
nunof07 - eleventy-load brings webpack-like loaders to Eleventy
gregiv_es - eleventy-plugin-social-img will generate social share images at build-time and return an image URL.
tannerdolby - eleventy-plugin-time-to-read A reading time calculator supporting output in hundreds of languages.
jkc_codes - @chrisburnell/eleventy-cache-webmentions Cache webmentions using eleventy-cache-assets and make them available to use in collections, templates, pages, etc.
iamchrisburnell - eleventy-plugin-git-commit-date to get recent Git commit time of a file, or an Eleventy collection.
saneef eleventy-plugin-yamldatawill allow you to use a yaml file as local data file.This plugin has been superceded by Eleventy Custom Data Formats.- eleventy-plugin-asciidoc to add support for AsciiDoc files.
saneef - eleventy-plugin-sharp will add the full power of Sharp's image processing to your templates.
luwes - eleventy-plugin-nesting-toc will generate a nested table of contents from your site's headings.
- eleventy-plugin-emoji An accessible emoji shortcode and filter for your Eleventy projects
snmcp - @vidhill/fortawesome-free-regular-11ty-shortcode Shortcode, allows @fortawesome/free-regular-svg-icons to be embedded as inline svg into templates.
- eleventy-plugin-footnotes will help rendering accessible footnotes with Liquid.
KittyGiraudel - eleventy-plugin-json-feed adds a Nunjucks shortcode for outputing a JSON feed.
genehack - @resoc/eleventy-plugin-social-image adds automated social images based on HTML & CSS templates and generated at access time by a Netlify on-demand builder
ph_bernard - wikity Wikitext as a templating language, with built-in Eleventy support.
Nixinova - eleventy-plugin-sharp-respfigure will perform build-time image transformations with Sharp and generate responsive image markup inside
<figure>
tags. tannerdolby - eleventy-plugin-purgecss will remove unused CSS using PurgeCSS.
proog - eleventy-plugin-i18n-gettext adds i18n support with Gettext string translation and moment.js date and times localization.
sgissinger - eleventy-plugin-respimg will take care of the
srcset
attribute for responsive images for you. etportis - eleventy-plugin-sharp-respimg will perform build-time image transformations with Sharp and generate responsive image markup using
<picture>
. tannerdolby - eleventy-xml-plugin adds Liquid filters used for sitemap and RSS/feed file generation.
jeremenichelli - @pcdevil/eleventy-plugin-intl-utils a set of internationalization utils
pcdevil
- eleventy-plugin-sass will add the ability to use Sass for your stylesheets.
- eleventy-plugin-dart-sass Build, watch and template tags for Sass stylesheets via Dart Sass. Includes CSS code splitting and source maps.
chronotope - @vidhill/fortawesome-brands-11ty-shortcode Shortcode, allows @fortawesome/free-brands-svg-icons to be embedded as inline svg into templates.
- eleventy-plugin-pwa will generate a Service Worker for you.
okitavera - eleventy-plugin-find A utility filter to find array members that match a set of rules, helpful for hoisting data from one template to another.
ashur - eleventy-plugin-recent-changes will generate a collection containing your recent commit history.
defaced - @sardine/eleventy-plugin-external-links An 11ty plugin to protect you external links.
marabyte_ - eleventy-plugin-meta-generator will render a generator
<meta>
tag for you. AndreJaenisch - eleventy-plugin-heroicons Shortcodes to add Heroicons to your Eleventy projects
snmcp - eleventy-favicon Generates your favicon files and declarations from a single image source
atomrc - @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-postcss-extension Add CSS processing with PostCSS to your Eleventy build.
- @infinity-interactive/eleventy-plugin-injector allows you to run an arbitrary callback at build time or when using
--serve
or--watch
genehack - @sardine/eleventy-plugin-tinysvg An 11ty plugin to minify and optimise SVG
marabyte_ - eleventy-plugin-metagen will generate metadata for Open Graph, Twitter card, generic meta tags and a canonical link.
tannerdolby - eleventy-filter-npm-package-downloads will show you the number of downloads for the given npm package.
AndreJaenisch - @quasibit/eleventy-plugin-schema adds a shortcode for generating JSON-LD structured data.
nunof07 - @sardine/eleventy-plugin-tinyhtml An 11ty plugin to optimise HTML
marabyte_ - @orchidjs/eleventy-plugin-ids Add ids to html headings and other elements
oyejorge - eleventy-plugin-torchlight Plugin to syntax highlight your code blocks with torchlight.dev.
timkley - eleventy-plugin-code-style-hooks Syntax highlighter supporting CSS colour previews in all template languages with no client side JS.
jkc_codes - eleventy-plugin-markdown-shortcode adds a universal shortcode to render markdown.
tylerwilliamsct - eleventy-plugin-toc will generate a table of contents from your headings.
jdsteinbach - eleventy-google-fonts A Nunjucks shortcode to optimize Google Fonts. This shortcode download and inline Google Font's CSS.
takanorip - eleventy-plugin-pdfembed A shortcode to simplify usage of Adobe's PDF Embed API
raymondcamden - eleventy-plugin-link_to a nunjucks tag to link to another internal content in Eleventy
nhoizey - @tigersway/eleventy-plugin-ancestry Real hierarchical navigation, following folders and documents.
tigerswaynet - eleventy-plugin-responsive-images adds a shortcode to take care of the
srcset
attribute for responsive images via Cloudinary and all otherimg
attributes. adamculpepper - @shawnsandy/npm_info will provide you with package detail for an npm package or GitHub info.
- eleventy-njk-unpkg-inliner Inline npm modules from unpkg in Eleventy Nunjucks templates.
jaredgorski - eleventy-plugin-babel Compiles JS with gulp-babel.
- eleventy-plugin-social-share-card-generator Automagically creates a share card for social media platforms
tpiros - @sardine/eleventy-plugin-tinycss An 11ty plugin to inline and optimise CSS
marabyte_ - eleventy-plugin-automatic-noopener Automatically add rel='noopener' attributes to unsafe <a>, <area> and <form> elements.
jkc_codes - eleventy-plugin-ghost Access the Ghost Content API in Eleventy 👻
DavidDarnes - @sardine/eleventy-plugin-code-highlighter An 11ty plugin to style your
with Prism.js
marabyte_ - eleventy-nbsp-filter Filter for Eleventy to replace spaces between words with characters.
jeremenichelli - eleventy-plugin-reader-bar adds a reader bar as you scroll through the page.
thigoap - eleventy-plugin-cloudinary adds a universal shortcode allowing you to add images from your cloudinary account.
juanfernandes - 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
.
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.
const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
eleventyConfig.namespace("myPrefix_", () => {
// the rssLastUpdatedDate filter is now myPrefix_rssLastUpdatedDate
eleventyConfig.addPlugin(pluginRss);
});
};