Headless CMS for Svelte

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

Step #1 - Fetching the content from the headless CMS

You can use Svelte's onMount lifecycle function to ensure the data fetching occurs after the component has mounted. The fetch method is used to make a POST request to the GraphQL endpoint, sending a query that requests fields like name, description, image, availability, and slug for products.

The request includes headers for content type and authorization for Hygraph's Content API. Once the data is received and converted to JSON, it's stored in a local products array for use in the Svelte component.

import { onMount } from 'svelte';

let products = [];

onMount(async () => {
  const response = await fetch('https://api-<region>.hygraph.com/v2/<some hash>/master', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_HYGRAPH_TOKEN' // Add this if your API requires authorization
    },
    body: JSON.stringify({
      query: `
        query {
          products {
            name
            description
            image
            availability
            slug
          }
        }
      `
    }),
  });

  const data = await response.json();
  products = data.data.products;
});

Step #2 - Displaying the fetched data in Svelte

To display the product list you can use Svelte's reactive {#each} loop to iterate over each product in the products array. For each product, the code generates HTML elements displaying the product's name, description, image, and availability.

A link to a product-specific page is also created using the product's slug. This approach allows dynamic rendering of the fetched data in a structured, user-friendly format on the web page.

<script>
  // ... (the fetch code from the Step #1)
</script>

<article>
  {#each products as product}
    <div>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <img src={product.image} alt={product.name} />
      <p>Availability: {product.availability}</p>
      <a href={`/products/${product.slug}`}>View Product</a>
    </div>
  {/each}
</article>

Start building with Svelte and Hygraph

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

Quickstart

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

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Svelte project

Using a GraphQL-native headless CMS with a Svelte app simplifies work for both developers and content editors. Developers benefit because Svelte's simple code and GraphQL's efficient data fetching make building and updating apps faster.

Content editors find it easy to use the CMS for updating and managing content without needing much technical know-how. This combination ensures that any changes made to the content are quickly shown on the website, making the whole process smoother and more effective for everyone involved.

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

Contact sales Get started