11ty

Eleventy Documentation

This is an older version of Eleventy. Full release history. Go to the newest Eleventy docs. You could try /docs/data-js/ although it may not exist.

Documentation Pages

JavaScript Data Files #

This file applies to both Global Data Files (*.js inside of your _data directory) and Template and Directory Data Files (*.11tydata.js files that are paired with a template file).

Examples #

Using JS Data Files #

You can export data from a JavaScript file to add data, too. This allows you to execute arbitrary code to fetch data at build time.

module.exports = [
"user1",
"user2"
];

If you return a function, we’ll use the return value from that function.

module.exports = function() {
return [
"user1",
"user2"
];
};

We use await on the return value, so you can return a promise and/or use an async function, too. Fetch your data asynchronously at build time!

module.exports = function() {
return new Promise((resolve, reject) => {
resolve([
"user1",
"user2"
]);
});
};
async function fetchUserData(username) {
// do some async things
return username;
}

module.exports = async function() {
let user1 = await fetchUserData("user1");
let user2 = await fetchUserData("user2");

return [user1, user2];
};

Example: Using GraphQL #

This “Hello World” GraphQL example works out of the box with Eleventy:

var { graphql, buildSchema } = require("graphql");

// this could also be `async function`
module.exports = function() {
// if you want to `await` for other things here, use `async function`
var schema = buildSchema(`type Query {
hello: String
}
`
);

var root = {
hello: () => "Hello world async!"
};

return graphql(schema, "{ hello }", root);
};

Example: Exposing Environment Variables #

You can expose environment variables (e.g. ELEVENTY_ENV) to your templates by using Node.js’ process.env property.

Filename _data/myProject.js
module.exports = {
environment: process.env.ELEVENTY_ENV
};

Saving this as myProject.js in your global data directory (by default, this is _data/) gives you access to the myProject.environment variable in your templates.

Sample commands #

# Serve for Development
ELEVENTY_ENV=development npx eleventy --serve

# Build for Production
ELEVENTY_ENV=production npx eleventy

Template Usage #

Working from our Inline CSS Quick Tip, we can modify the output to only minify our CSS if we’re building for production:

{% if myProject.environment == "production" %}
<style>{{ css | cssmin | safe }}</style>
{% else %}
<style>{{ css | safe }}</style>
{% endif %}