Here's a quick summary of everything we released in Q1 2024.

Headless CMS for Preact

Hygraph is the ideal Headless CMS for Preact websites and applications. Read further to learn how our API-first CMS allows you to add components to your Preact apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Fetching content from a headless CMS in Preact

To fetch the content you can use JavaScript's fetch method to send a POST request to the specified GraphQL endpoint. The request headers include 'Content-Type' set to 'application/json' and 'Authorization' with a bearer token for secured access.

The body of the request contains the GraphQL query string. The function then waits for the response, converts it to JSON, and returns the data part of the JSON. This is a typical pattern for interacting with a GraphQL API in a JavaScript-based application, handling data fetching and API authentication.

import { useState, useEffect } from 'preact/hooks';
const fetchData = async () => {
const response = await fetch('https://api-<region><some hash>/master', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_HYGRAPH_TOKEN' // Include your authorization token here
body: JSON.stringify({
const json = await response.json();
const DataFetchingComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
}, []);
if (!data) return <p>Loading...</p>;
// You can now use the 'data' variable to render your UI

Step #2 - Displaying the fetched content in Preact

After that you define the DataFetchingComponent, which manages the state of the fetched data using the useState hook. It initializes the data state to null. The useEffect hook is used to call the fetchData function when the component mounts.

Upon successful data retrieval, the state is updated with the fetched data. The component renders a loading message until data is available. Once content is fetched, it can render the desired UI.

const DisplayDataComponent = ({ data }) => {
// Assuming 'data' is an array of items
return (
{ => (
<div key={}>
const App = () => {
// Assuming you're passing the fetched data to this component
const [fetchedData, setFetchedData] = useState(null);
useEffect(() => {
fetchData().then(data => setFetchedData(data));
}, []);
return (
{fetchedData ? <DisplayDataComponent data={fetchedData} /> : <p>Loading...</p>}

Start building with Preact

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Preact project.


Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Preact website or app.

Learn GraphQL

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.

Why Hygraph

Choosing Hygraph for your Preact project

Using a GraphQL-native headless CMS with a Preact app benefits developers and content editors in several ways. Developers enjoy streamlined data management and efficient querying capabilities, making the application faster and more responsive. Preact's lightweight nature complements GraphQL's efficient data fetching, enhancing overall performance.

For content editors, the headless CMS offers flexible content management, enabling easy updates independent of the app's structure. This separation enhances content dynamism and responsiveness, improving user experience.

preact cms

Developer Experience

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.

Headless CMS

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.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects