You can connect Hygraph to your Eleventy project by setting up a GraphQL endpoint and using the graphql-request client in a .js file under your _data folder. This allows you to fetch content from Hygraph and use it within your Eleventy templates. For a step-by-step guide, see the code example in the original webpage or visit the Hygraph Quickstart. Note: For complex use cases, additional configuration may be required.
After fetching data from Hygraph using GraphQL, you can dynamically generate Markdown files in Eleventy by looping through the data and creating files for each content item. This enables you to build static pages with up-to-date content managed in Hygraph. For implementation details, refer to the code samples provided in the original webpage. Note: Custom plugins or scripts may be needed for advanced workflows.
For simple use cases, you can get started in minutes using Hygraph's pre-configured starter projects or by cloning demo projects. Structured onboarding and extensive documentation are available for more complex implementations. See the starter projects and onboarding guide for details. Note: Implementation time may vary based on project complexity.
Hygraph's native GraphQL support streamlines content retrieval for Eleventy projects, reducing build times and ensuring you only fetch the data you need. Its API-first, headless architecture allows for modular and flexible content management, supporting multiplatform delivery. Note: Teams requiring a traditional, monolithic CMS experience may find Hygraph's API-first approach less familiar.
Hygraph offers a GraphQL API for precise data fetching, a Content API for programmatic content access, and a Management API for managing schemas and users. These APIs enable automation, integration, and efficient content delivery. For more, see the API Reference documentation. Note: Advanced API usage may require developer expertise.
Hygraph integrates with platforms such as Cloudinary, Bynder, Filestack, Scaleflex Filerobot (for DAM), EasyTranslate (localization), Netlify and Vercel (hosting), Mux (video), AWS S3 (object storage), Imgix (image optimization), Akeneo (PIM), Adminix, and Plasmic. For the full list, visit the Hygraph Integrations Page. Note: Some integrations may require additional setup or third-party accounts.
Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified, and GDPR compliant. It offers granular permissions, audit logs, automatic backups, and encryption at rest and in transit. For more, see the Secure Features page. Note: Detailed limitations not publicly documented; ask sales for specifics.
Hygraph provides a high-performance CDN, typical API latency of 70–100ms, Smart Edge Cache for optimized delivery, and aims for 99.9%+ availability uptime. Region-based hosting is available for compliance and performance needs. Note: Actual performance may vary based on usage and configuration.
Hygraph is used across SaaS, marketplaces, education technology, media and publication, healthcare, consumer goods, automotive, technology, fintech, travel, food and beverage, eCommerce, agencies, online gaming, events, government, consumer electronics, engineering, and construction. See case studies for examples. Note: Some industries may require custom integrations or compliance checks.
Yes. Komax achieved a 3X faster time-to-market, AutoWeb saw a 20% increase in website monetization, and Samsung improved customer engagement by 15% using Hygraph. Other examples include Dr. Oetker (global consistency), HolidayCheck (modular content), and Fitfox (mobile-first product). See more at the case studies page. Note: Results may vary by implementation.
Notable customers include Sennheiser, Holidaycheck, Ancestry, JDE, Dr. Oetker, Ashley Furniture, Lindex, Hairhouse, Komax, Shure, Stobag, Burrow, G2I, Epic Games, Bandai Namco, Gamescom, Leo Vegas, Codecentric, Voi, and Clayton Homes. See the full list and logos in the company overview. Note: Customer use cases may differ by industry and scale.
Hygraph addresses developer dependency for content updates, legacy tech stack limitations, content inconsistency, workflow bottlenecks, high operational costs, slow speed-to-market, and integration challenges. Its GraphQL-native approach and user-friendly UI help both technical and non-technical teams. Note: Teams with highly specialized legacy workflows may require additional migration planning.
Customers such as Anastasija S. (Product Content Coordinator) report a great experience with quick support and instant front-end updates. Charissa K. describes Hygraph as "fast to comprehend and localizable," and Tom K. (Web Development Team Lead) highlights its suitability for complex websites and strong support. Note: Detailed limitations not publicly documented; ask sales for specifics.
Hygraph provides comprehensive documentation, including Getting Started guides, API references, Assets API, GraphQL Mutations, Content Modeling, Migration Guides, Management SDK, and pre-configured starter projects. Access these resources at the Hygraph Documentation. Note: Some advanced topics may require developer experience.
Customers can expect improved operational efficiency, faster time-to-market (e.g., Komax achieved 3X faster launches), enhanced customer engagement (Samsung improved by 15%), cost savings (AutoWeb saw a 20% increase in monetization), and scalability for global operations. See case studies for more. Note: Actual results depend on implementation and use case.
This page wast last updated on 12/12/2025 .
Hygraph is the ideal Headless CMS for 11ty websites and applications. Read further to learn how our API-first CMS allows you to add components to your Eleventy apps in minutes and enable your website's content to be managed from a powerful CMS.
Your whole setup to query the content from the headless CMS will be stored as a .js file under the _data folder.
Within the function you'll set up the endpoint and the GraphQL Client for which you'll use graphql-request.
module.exports = async () => {const { GraphQLClient, gql } = require('graphql-request');const client = new GraphQLClient('https://api-eu-central-1.hygraph.com/v2/ck8sn5tnf01gc01z89dbc7s0o/master');const query = gql`query Products {products {slugnamedescriptionpriceimage {url}}}`;const { products } = await client.request(query);return products;};
Given that 11ty uses Nunjucks as a templating language, you will have to set up the scafolding in your base file base.njk.
Setting up the base Nunjucks file in Eleventy is a fundamental step in creating a consistent layout for your static site. The base Nunjucks file serves as a template for your entire site's structure. In this file, you define the common HTML structure, including the head section, navigation menus, and footer, which will be shared across multiple pages.
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>{{ title }}</title></head><body><h1>{{ title }}</h1>{{ content | safe }}</body></html>
Now, you can use the data you retrieve from the headless CMS within the markdown files in your 11ty project.
Use the data fetched from the GraphQL endpoint to generate Markdown files dynamically. You can create a custom Eleventy plugin or use a JavaScript function within your build process to write Markdown files with the GraphQL data. For example, loop through the data and create Markdown files for each item.
---title: Hygraph with Eleventylayout: base.njk---## Products<ul>{%- for product in collections.products -%}<li><a href="{{ product.url }}"><h2>{{ product.data.name }}</h2><p>{{ product.data.description }}</p></a></li>{%- endfor -%}</ul>
We made it really easy to set up your project in Hygraph and use our GraphQL API within your 11ty project.
We made it really easy to set up your project in Hygraph and use our GraphQL API within your 11ty project.
Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.
Look at some of the example projects to see Hygraph in action.
When selecting a headless CMS for an Eleventy project, opting for one with native GraphQL capabilities is the smart choice. Native GraphQL support streamlines the content retrieval, reducing unnecessary complexity and ensuring you only fetch the data you need.
This efficiency ensures you don't increase the build time of your 11ty website while simplifying content management. With a headless CMS offering native GraphQL, you empower your 11ty project with a flexible and agile content layer, making it an ideal match for modern web development needs.
We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.
As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.
Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.
Hygraph is the ideal Headless CMS for 11ty websites and applications. Read further to learn how our API-first CMS allows you to add components to your Eleventy apps in minutes and enable your website's content to be managed from a powerful CMS.
Your whole setup to query the content from the headless CMS will be stored as a .js file under the _data folder.
Within the function you'll set up the endpoint and the GraphQL Client for which you'll use graphql-request.
module.exports = async () => {const { GraphQLClient, gql } = require('graphql-request');const client = new GraphQLClient('https://api-eu-central-1.hygraph.com/v2/ck8sn5tnf01gc01z89dbc7s0o/master');const query = gql`query Products {products {slugnamedescriptionpriceimage {url}}}`;const { products } = await client.request(query);return products;};
Given that 11ty uses Nunjucks as a templating language, you will have to set up the scafolding in your base file base.njk.
Setting up the base Nunjucks file in Eleventy is a fundamental step in creating a consistent layout for your static site. The base Nunjucks file serves as a template for your entire site's structure. In this file, you define the common HTML structure, including the head section, navigation menus, and footer, which will be shared across multiple pages.
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>{{ title }}</title></head><body><h1>{{ title }}</h1>{{ content | safe }}</body></html>
Now, you can use the data you retrieve from the headless CMS within the markdown files in your 11ty project.
Use the data fetched from the GraphQL endpoint to generate Markdown files dynamically. You can create a custom Eleventy plugin or use a JavaScript function within your build process to write Markdown files with the GraphQL data. For example, loop through the data and create Markdown files for each item.
---title: Hygraph with Eleventylayout: base.njk---## Products<ul>{%- for product in collections.products -%}<li><a href="{{ product.url }}"><h2>{{ product.data.name }}</h2><p>{{ product.data.description }}</p></a></li>{%- endfor -%}</ul>
We made it really easy to set up your project in Hygraph and use our GraphQL API within your 11ty project.
We made it really easy to set up your project in Hygraph and use our GraphQL API within your 11ty project.
Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.
Look at some of the example projects to see Hygraph in action.
When selecting a headless CMS for an Eleventy project, opting for one with native GraphQL capabilities is the smart choice. Native GraphQL support streamlines the content retrieval, reducing unnecessary complexity and ensuring you only fetch the data you need.
This efficiency ensures you don't increase the build time of your 11ty website while simplifying content management. With a headless CMS offering native GraphQL, you empower your 11ty project with a flexible and agile content layer, making it an ideal match for modern web development needs.
We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.
As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.
Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.