Eleventy Tricks

`Table of Contents`

This page follows a similar structure to /docs/projects

Getting Started Tricks

Curated list of starters: /starters
Community starters: /docs/starter
Sveltia CMS starters: /en/docs/frameworks/eleventy#starter-templates
Custom start: /docs

Not sure where to begin? Start with a minimal template:

Best Minimal Starters _{as of Feb 2026}

Repo	npm Dependencies	Custom CSS	Custom JS	Custom Templates	CMS Included?
/anydigital/sveleven	~10	~30 lines ♻️ _{uses Tailwind+Typography & Anybricks}	0 ♻️ _{uses 11ty Bricks}	~15 lines ♻️ _{uses Anybricks}	Sveltia CMS
/11ty/eleventy-base-blog	~10	~300 lines	~200 lines	~200 lines	—
/MWDelaney/zeropoint	~15	~200 lines	~300 lines	~250 lines	not included, but documented
Not up-to-date:
/danurbanowicz/eleventy-sveltia-cms-starter	~10	~150 lines	~130 lines	~250 lines	Sveltia CMS
Not so minimal:
/scottsweb/elva	~25 ⚠️	~1000 lines ⚠️	~30 files ⚠️	~20 files	Front Matter CMS _{(local use only)}
/madrilene/eleventy-excellent	~40 ⚠️	~40 files ⚠️ _{Tailwind config for CUBE CSS}	~40 files ⚠️	~40 files ⚠️	—
/adamstddrd/grease	~5 ♻️	~25 files ⚠️	~15 files	~15 files	—
/nhoizey/pack11ty	~15	~30 files ⚠️	~10 files	~10 files	—

Command Line Tricks

Find and kill 11ty processes

ps aux | grep eleventy
pkill -f eleventy

You can even combine it with other processes hanging around:

ps aux | grep -E 'eleventy|tailwind|.bin/serve'
pkill -f tailwind
pkill -f .bin/serve

🥷 Reusable 11ty npm scripts via npm workspace
_{from /anydigital/eleventy-bricks}

This package provides a pre-configured do folder setup that helps organize your development workflow using npm workspaces. The do folder contains scripts for building and running your Eleventy project.

Installation:

Install /anydigital/eleventy-bricks to reuse pre-defined 11ty scripts from there:

npm install @anydigital/eleventy-bricks

Create a helper folder do to symlink the do/package.json within:

mkdir do
cd ./do
ln -s ../node_modules/@anydigital/eleventy-bricks/src/do/package.json

Finally register do folder as npm workspace in your root package.json:

{
  ...
  "workspaces": ["do"],
  "scripts": {
    "start": "npm -w do run start",
    "stage": "npm -w do run stage",
    "build": "npm -w do run build"
  },
  ...
}

Done! 🎉 Now you can run:

npm start to start 11ty dev server with live reload and Tailwind watch mode
npm run stage to build and serve production-like site locally
npm run build to finally build the site for production
all available scripts: /anydigital/eleventy-bricks/blob/main/src/do/package.json

Living example: /anydigital/sveleven

Benefits:

Clean separation: Keep build scripts separate from project configuration
Reusable workflows: Update scripts by upgrading the package
Workspace isolation: Scripts run in their own workspace context
Easy maintenance: No need to manually maintain build scripts

Configuration Tricks

🥷 Symlinked `eleventy.config.js`
_{from /anydigital/eleventy-bricks}

The package includes a fully-configured Eleventy config file eleventy.config.js that you can symlink to your project to get:

All eleventy-bricks plugins enabled
Eleventy Navigation plugin
Table of Contents plugin (conditionally loaded if installed)
Markdown-it with anchors and attributes
YAML data support
CLI input directory support
Symlink support for development
and more

Benefits of symlinking:

Always up-to-date: Configuration automatically updates when you upgrade the package
Less maintenance: No need to manually sync configuration changes
Quick setup: Get started immediately with best-practice configurations
Easy customization: Override specific settings by creating your own config that imports from the symlinked version

Installation as simple as:

npm install @anydigital/eleventy-bricks
ln -s ./node_modules/@anydigital/eleventy-bricks/src/eleventy.config.js

Data & Processing Tricks

Global `siteData` helper

🧩 Install via Plugin — or copy-paste from src/siteData.js

Adds global site data to your Eleventy project, providing commonly needed values that can be accessed in all templates:

Variable	Value
`{{ site.year }}`	The current year as a number (e.g., `2026`)
`{{ site.prod }}`	Boolean indicating if running in production mode (`true` for `eleventy build`, `false` for `eleventy serve`)

🥷 `autoLinkFavicons` transformer

🧩 Install via Plugin — or copy-paste from src/processors/autoLinkFavicons.js

Automatically adds favicon images from Google's favicon service to links that display plain URLs or domain names. This processor processes all HTML output files and adds inline favicon images next to link text that appears to be a plain URL.

Why use this? When you have links in your content that display raw URLs or domain names (like https://example.com/page), adding favicons provides a visual indicator of the external site. This processor automatically detects these plain-text URL links and enhances them with favicon images, making them more visually appealing and easier to recognize.

How it works:

Scans all HTML output files for <a> tags
Checks if the link text appears to be a plain URL or domain
Extracts the domain from the URL
Removes the domain from the link text (keeping only the path)
Adds a favicon image from Google's favicon service inline with the remaining text

Example:

Before processing:

<a href="https://github.com/anydigital/eleventy-bricks">https://github.com/anydigital/eleventy-bricks</a>

After processing:

<a href="https://github.com/anydigital/eleventy-bricks" class="whitespace-nowrap" target="_blank">
  <i><img src="https://www.google.com/s2/favicons?domain=github.com&sz=32" /></i>
  <span>/anydigital/eleventy-bricks</span>
</a>

Rules:

Only applies to links where the text looks like a plain URL (contains the domain or starts with http:///https://)
Removes the protocol and domain from the display text
Removes the trailing slash from the display text
Only applies if at least 3 characters remain after removing the domain (to avoid showing favicons for bare domain links)
Uses Google's favicon service at https://www.google.com/s2/favicons?domain=DOMAIN&sz=32
Adds target="_blank" to the processed links (only if not already present)
Adds whitespace-nowrap class to the link
Wraps the link text in a <span> element
The favicon is wrapped in an <i> tag for easy styling

mdAutoRawTags preprocessor

🧩 Install via Plugin — or copy-paste from src/processors/markdown.js

Prevents Nunjucks syntax from being processed in Markdown files by automatically wrapping {{, }}, {%, and %} with {% raw %} tags.

Why use this? When writing documentation or tutorials about templating in Markdown files, you often want to show Nunjucks/Liquid syntax as literal text. This preprocessor automatically escapes these special characters so they display as-is instead of being processed by the template engine.

Example:

Before mdAutoRawTags, writing this in Markdown:

### Using {{ variable }} to output variables

Would try to process {{ variable }} as a template variable. With mdAutoRawTags, it displays exactly as written.

mdAutoNl2br converter

🧩 Install via Plugin — or copy-paste from src/processors/markdown.js

Automatically converts \n sequences to <br> tags in Markdown content. This is particularly useful for adding line breaks inside Markdown tables where standard newlines don't work.

Why use this? Markdown tables don't support multi-line content in cells. By using \n in your content, this preprocessor will convert it to <br> tags, allowing you to display line breaks within table cells and other content.

Example:

In your Markdown file:

| Column 1               | Column 2                          |
| ---------------------- | --------------------------------- |
| Line 1\nLine 2\nLine 3 | Another cell\nWith multiple lines |

Will render as:

<td>Line 1<br />Line 2<br />Line 3</td>
<td>Another cell<br />With multiple lines</td>

Note: This processes literal \n sequences (backslash followed by 'n'), not actual newline characters. Type \n in your source files where you want line breaks.

Eleventy Tricks

`Table of Contents`

Getting Started Tricks

Best Minimal Starters _{as of Feb 2026}

Command Line Tricks

Find and kill 11ty processes

🥷 Reusable 11ty npm scripts via npm workspace
_{from /anydigital/eleventy-bricks}

Configuration Tricks

🥷 Symlinked `eleventy.config.js`
_{from /anydigital/eleventy-bricks}

Data & Processing Tricks

Global `siteData` helper

🥷 `autoLinkFavicons` transformer

mdAutoRawTags preprocessor

mdAutoNl2br converter

Templating Tricks

Nunjucks & Liquid Tricks →

Awesome 11ty List

Eleventy Tricks

Table of Contents

Getting Started Tricks #

Best Minimal Starters as of Feb 2026 #

Command Line Tricks #

Find and kill 11ty processes #

🥷 Reusable 11ty npm scripts via npm workspace from /anydigital/eleventy-bricks #

Configuration Tricks #

🥷 Symlinked eleventy.config.js from /anydigital/eleventy-bricks #

Data & Processing Tricks #

Global siteData helper #

🥷 autoLinkFavicons transformer #

mdAutoRawTags preprocessor #

mdAutoNl2br converter #

Templating Tricks #

Nunjucks & Liquid Tricks → #

Awesome 11ty List #

`Table of Contents`

Getting Started Tricks

Best Minimal Starters _{as of Feb 2026}

Command Line Tricks

Find and kill 11ty processes

🥷 Reusable 11ty npm scripts via npm workspace
_{from /anydigital/eleventy-bricks}

Configuration Tricks

🥷 Symlinked `eleventy.config.js`
_{from /anydigital/eleventy-bricks}

Data & Processing Tricks

Global `siteData` helper

🥷 `autoLinkFavicons` transformer

mdAutoRawTags preprocessor

mdAutoNl2br converter

Templating Tricks

Nunjucks & Liquid Tricks →

Awesome 11ty List