Stop forgetting the Eleventy Data Cascade

Eleventy is a great static site generator and one of the best parts of it is The Data Cascade. It's a notably simple way to map data to templates and I mean that in the best possible Simple Made Easy sense. I hope more static site generators steal it.

I wrote this document because I always need to look it up when I come back to Eleventy after a bit. I intend for this summary to help me re-remember by showing the patterns and structure of The Data Cascade all in one place.

In ascending order of precedence:

Global Data Directory File: _data/<filename>.(json|js) Scope: In all templates Access: {{ <filename>.<key> }} Examples: Site-wide data such as API keys, header/footer inputs.
Directory Data File: <dirname/<dirname>.(json|11tydata.js) Scope: All templates in directory or subdirectories if not overridden Access: {{ <key> }} Examples: Section specific overrides like a new default layout, or section specific data to subsequently dynamically generate pages from.
Template Data File File: <templateFilename>.(json|11tydata.js) Scope: In template Access: {{ <key> }} Examples: This data is the input for this page. Similar to input props for a component or database information for a server rendered page.
Layout Frontmatter File: _includes/<layout>.njk Scope: In template Access: {{ <key> }} Examples: Presentational properties to override, such as a layout specific page title.
Template Frontmatter File: <filename>.md Scope: In Template Access: {{ <key> }} Examples: More common for this to be metadata about this page to be used in listing pages.


I hope you find it useful!