Menu
- Why Eleventy?
- Get Started
- Community
- Working with Templates
- Using Data
- Configuration
- Template Languages
- Plugins
- API Services
- Release History
- Advanced
1.93s
22.90s
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.
- Edge: A plugin to run Eleventy in an Edge Function to add dynamic content to your Eleventy sites.
- 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.
- Fetch: A utility to fetch and cache network requests.
- Partial Hydration
<is-land>
: A plugin to smartly and efficiently add client-side components to your web site. - Render: A plugin to add shortcodes to render an Eleventy template string (or file) inside of another template.
- RSS: Generate an Atom feed to allow others to subscribe to your content using a feed reader.
- Internationalization (i18n): Utilities to manage pages and linking between localized content on Eleventy projects.
- Syntax Highlighting: Code syntax highlighting using PrismJS without client-side JavaScript.
- Navigation: A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!
- HTML
<base>
: Emulate the<base>
element by adding a prefix to all URLs in.html
output files. - Directory Output: A plugin to group and sort console output by directory, with file size and benchmarks.
- Inclusive Language: A plugin to check for inclusive language in markdown files.
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!
- eleventy-plugin-mathjax A plugin for rendering math equations using MathJax.
- eleventy-plugin-torchlight Plugin to syntax highlight your code blocks with torchlight.dev.
timkley
- eleventy-img-helper Adds responsive images to any template's output using eleventy-img, configurable with CSS selectors.
AlexDueppen
- eleventy-plugin-tailwindcss will add Tailwind CSS support for your website.
dafiulh
- eleventy-plugin-social-img will generate social share images at build-time and return an image URL.
tannerdolby
- @sardine/eleventy-plugin-tinyhtml An 11ty plugin to optimise HTML
marabyte_
- eleventy-plugin-plausible Add the Plausible analytics script tag with a shortcode and remove some of the worry
gingerchew
- eleventy-plugin-hubspot will generate HubSpot forms or meeting calendars.
reatlat
- @johnwargo/eleventy-plugin-post-stats Adds a post statistics collection to a site you can use to generate a table or graph of posts over time as well as average days between posts.
johnwargo
- eleventy-plugin-pwa will generate a Service Worker for you.
okitavera
- @orchidjs/eleventy-plugin-ids Add ids to html headings and other elements
oyejorge
- @vidhill/fortawesome-free-regular-11ty-shortcode Shortcode, allows @fortawesome/free-regular-svg-icons to be embedded as inline svg into templates.
- @grimlink/eleventy-plugin-sass Simple 11ty config wrapper, for running Sass directly as custom template
grimlink
- eleventy-plugin-postcss Easy to use modern Eleventy plugin for PostCSS prepreprocessor
- @sardine/eleventy-plugin-external-links An 11ty plugin to protect you external links.
marabyte_
- eleventy-plugin-i18n will add a clever
i18n
universal filter to assist with internationalization and dictionary translations.duncanadam
- @silexlabs/eleventy-plugin-directus Expose Directus collections as global data in 11ty
lexoyo
- @sardine/eleventy-plugin-tinycss An 11ty plugin to inline and optimise CSS
marabyte_
- eleventy-plugin-embedded-demos A plugin for eleventy that allows you to have embedded demos using HTML, CSS and JavaScript, as well as having the code from those demos displayed in the page.
CodeFoodPixels
- eleventy-plugin-lazyimages will add progressive lazy loading to your images.
- wikity Wikitext as a templating language, with built-in Eleventy support.
Nixinova
- eleventy-plugin-dart-sass Build, watch and template tags for Sass stylesheets via Dart Sass. Includes CSS code splitting and source maps.
chronotope
- eleventy-plugin-link_to a nunjucks tag to link to another internal content in Eleventy
nhoizey
- @quasibit/eleventy-plugin-schema adds a shortcode for generating JSON-LD structured data.
nunof07
- @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-code-highlighter An 11ty plugin to style your <code> with Prism.js
marabyte_
- eleventy-plugin-edit-on-github An Eleventy shortcode to add an "Edit on Github" link to your pages.
christopherpickering
- eleventy-sass Yet another Sass/SCSS plugin for Eleventy
kentaroi
- eleventy-plugin-responsive-images adds a shortcode to take care of the
srcset
attribute for responsive images via Cloudinary and all otherimg
attributes.adamculpepper
- @factorial/eleventy-plugin-fstack Linting, building and watching your assets with as little overhead and configuration as possible by integrating @factorial/stack-core
dnnsjrng
- eleventy-plugin-mastoarchive Create a global data object "mastodon" that contains all your public posts on Mastodon.
declan_byrd
- eleventy-plugin-slide-decks 🎵 It makes an itsy-bitsy, teeny-weeny, web-component slide deck prezzy 🎶. 🎚️ Write slide decks with 11ty and share them over the web 🎴.
@bp@bennypowers.dev
- 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
- @mightyplow/eleventy-plugin-cache-buster will add content hashes to JavaScript and CSS resources.
mightyplow
- eleventy-google-fonts A Nunjucks shortcode to optimize Google Fonts. This shortcode download and inline Google Font's CSS.
takanorip
- eleventy-plugin-og-image Generate OG images from your templates, data and CSS. Fast and reproducible – no need for a headless browser.
KiwiKilian
- 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-unfurl Unfurl links into rich 'cards', as seen in places like Slack and Twitter
DavidDarnes
- eleventy-plugin-automatic-noopener Automatically add rel='noopener' attributes to unsafe <a>, <area> and <form> elements.
jkc_codes
- eleventy-plugin-drawio embed diagrams.net (.drawio) diagrams in your pages
kev4ev
- eleventy-plugin-markdown-shortcode adds a universal shortcode to render markdown.
tylerwilliamsct
- eleventy-plugin-nesting-toc will generate a nested table of contents from your site's headings.
- @vidhill/fortawesome-brands-11ty-shortcode Shortcode, allows @fortawesome/free-brands-svg-icons to be embedded as inline svg into templates.
- @pcdevil/eleventy-plugin-intl-utils a set of internationalization utils
pcdevil
- eleventy-plugin-footnotes will help rendering accessible footnotes with Liquid.
KittyGiraudel
- eleventy-plugin-cloudinary adds a universal shortcode allowing you to add images from your cloudinary account.
juanfernandes
- eleventy-plugin-mtos A plugin for Eleventy that turns your site into a single page application.
satireven
- eleventy-load brings webpack-like loaders to Eleventy
gregiv_es
- eleventy-plugin-webmentions A plugin for eleventy to fetch and filter webmentions from Webmention.io.
CodeFoodPixels
- eleventy-plugin-i18n-gettext adds i18n support with Gettext string translation and moment.js date and times localization.
sgissinger
- markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. Fully compatible with Eleventy!
@huot_mathieu
- eleventy-njk-unpkg-inliner Inline npm modules from unpkg in Eleventy Nunjucks templates.
jaredgorski
- eleventy-plugin-vidyard generate embeds responsive Vidyard videos from share URLs.
reatlat
- eleventy-plugin-embed-everything Automatically embed YouTube, Vimeo, Spotify, Twitter, and more, based on just their URLs.
gfscott
- eleventy-critical-css extracts and inlines critical CSS from your HTML templates
gregiv_es
- eleventy-plugin-metagen will generate metadata for Open Graph, Twitter card, generic meta tags and a canonical link.
tannerdolby
- eleventy-plugin-json-feed adds a Nunjucks shortcode for outputing a JSON feed.
genehack
- eleventy-plugin-inline-link-favicon Add an inline favicon image to a link.
bmuenzenmeyer
- eleventy-plugin-toc will generate a table of contents from your headings.
jdsteinbach
- eleventy-plugin-gen-favicons From a single svg or image, generate "the ultimate favicon setup" with all six commonly used icons plus a webmanifest using 2022 best practices.
njaldwin
- @aaashur/eleventy-plugin-classnames Conditionally join class names using a filter or shortcode, inspired by the 'classnames' package by JedWatson
ashur
- eleventy-plugin-broken-links A plugin to check your build for broken external links and redirects
bradleyburgess
- eleventy-plugin-asciidoc to add support for AsciiDoc files.
saneef
- eleventy-plugin-img2picture replaces <img> using <picture> with resized and optimized images.
saneef
- eleventy-plugin-sharp-respfigure will perform build-time image transformations with Sharp and generate responsive image markup inside <figure> tags.
tannerdolby
- eleventy-plugin-reading-time will generate a tag for the estimated reading time.
johanbrook
- @fec/eleventy-plugin-remark Process Markdown files with Remark and use Remark plugins to add new features to your Markdown.
- eleventy-plugin-social-share-card-generator Automagically creates a share card for social media platforms
tpiros
- eleventy-plugin-code-style-hooks Syntax highlighter supporting CSS colour previews in all template languages with no client side JS.
jkc_codes
- 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-plantuml allows processing of Plantuml markdown code blocks into beautiful diagrams
awaragi
- eleventy-favicon Generates your favicon files and declarations from a single image source
atomrc
- eleventy-plugin-code-demo Add interactive HTML/CSS/JS code demos to an Eleventy site using Markdown code blocks.
hovhaDovah
- eleventy-plugin-backlinks Collect and display backlinks from your notes.
binyamin
- eleventy-multisite Add multi-site building support for Eleventy
bnoctis
- eleventy-plugin-time-to-read A reading time calculator supporting output in hundreds of languages.
jkc_codes
- eleventy-plugin-add-web-component-definitions will add Web Component definitions automatically, by reading custom tags from HTML pages.
jdvivar
- eleventy-plugin-phosphoricons Shortcode, allows phosphor-icons to be embedded as inline svg into templates.
reatlat
- @quasibit/eleventy-plugin-sitemap adds a shortcode for generating a sitemap.
nunof07
- @factorial/eleventy-plugin-twig Add Twig templating engine to Eleventy with the help of twig.js
dnnsjrng
- eleventy-filter-npm-package-downloads will show you the number of downloads for the given npm package.
AndreJaenisch
- eleventy-i18n i18n for Eleventy: Enabling Website Translation
mathieuprog
- eleventy-plugin-react-ssr Write your static content using React SSR (JSX) and transform it using Babel
@scinos
- eleventy-plugin-purgecss will remove unused CSS using PurgeCSS.
proog
- 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
- @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
- @grimlink/eleventy-plugin-lucide-icons This Eleventy plugin enables the inclusion of lucide-icons as inline SVG elements
grimlink
- eleventy-plugin-redirects Automatically generate a Netlify _redirects file, a Vercel vercel.json config file, or pages with client-side redirects from frontmatter aliases.
@type__error
- @tigersway/eleventy-plugin-ancestry Real hierarchical navigation, following folders and documents.
tigerswaynet
- eleventy-plugin-heroicons Shortcodes to add Heroicons to your Eleventy projects
snmcp
- eleventy-plugin-ignore Ignore templates based on their front matter.
TheDocTrier
- @code-blocks/eleventy-plugin Use markdown code blocks to render: charts, graphviz diagrams, MathML, music sheets, HTML tables and highlight code.
idrismaps
- eleventy-plugin-git-commit-date to get recent Git commit time of a file, or an Eleventy collection.
saneef
- @chrisburnell/eleventy-cache-webmentions Cache webmentions using eleventy-cache-assets and make them available to use in collections, templates, pages, etc.
iamchrisburnell
- eleventy-plugin-babel Compiles JS with gulp-babel.
- @inframanufaktur/eleventy-plugin-clean-urls Removes those pesky
utm_bla
orfbclid
tracking params from all external links in your HTML._ovlb
- eleventy-plugin-rollup Allows you to build js bundles directly from your templates using rollup.
Snapstromegon
- eleventy-plugin-unified Use the unified ecosystem in Eleventy with remark and rehype.
NickColley
- eleventy-plugin-sass will add the ability to use Sass for your stylesheets.
- @sardine/eleventy-plugin-tinysvg An 11ty plugin to minify and optimise SVG
marabyte_
- eleventy-plugin-feathericons Shortcode, allows feather-icons to be embedded as inline svg into templates.
reatlat
- eleventy-postcss-extension Add CSS processing with PostCSS to your Eleventy build.
- eleventy-plugin-typeset will make your typography nicer.
johanbrook
- eleventy-plugin-respimg will take care of the
srcset
attribute for responsive images for you.etportis
- @shawnsandy/npm_info will provide you with package detail for an npm package or GitHub info.
- eleventy-plugin-pdfembed A shortcode to simplify usage of Adobe's PDF Embed API
raymondcamden
- eleventy-plugin-sharp will add the full power of Sharp's image processing to your templates.
luwes
- eleventy-plugin-helmet will manage your document head.
vseventer
- eleventy-xml-plugin adds Liquid filters used for sitemap and RSS/feed file generation.
jeremenichelli
- eleventy-plugin-pwa-v2 generates PWA service worker using Google Workbox v6, compatible with Eleventy 2.0 and up
lwojcik
- eleventy-plugin-emoji An accessible emoji shortcode and filter for your Eleventy projects
snmcp
- eleventy-plugin-target-safe Link tags with the target attribute may need a rel attribute. This plugin does that for you automatically.
gingerchew
- eleventy-plugin-ghost Access the Ghost Content API in Eleventy 👻
DavidDarnes
- @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
- eleventy-plugin-html-validate Validate your site's HTML on build.
mattatt4ck
- eleventy-plugin-sharp-respimg will perform build-time image transformations with Sharp and generate responsive image markup using <picture>.
tannerdolby
- 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-shopify Import your Shopify products, pages, and collections into Eleventy as global data.
danleatherman
- eleventy-hast-jsx use JSX as a template language
jed_fox1
- eleventy-plugin-recent-changes will generate a collection containing your recent commit history.
defaced
- eleventy-plugin-green-links Checks all links on a website and returns those which are hosted on verified green hosting providers from The Green Web Foundation's Green Web dataset.
fershad
eleventy-plugin-yamldatawill allow you to use a yaml file as local data file.This plugin has been superceded by Eleventy Custom Data Formats.- 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
.
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.
const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
eleventyConfig.namespace("myPrefix_", () => {
// the rssLastUpdatedDate filter is now myPrefix_rssLastUpdatedDate
eleventyConfig.addPlugin(pluginRss);
});
};