What is Svelte

Svelte is a JavaScript framework for building UI components that is different from others like React and Vue in that Svelte is a compiler. This means that it ships imperative code to the browser rather than a JavaScript runtime.

Benefits of Svelte

Highly performant code in a small package. It empowers developers to solve problems with less code.

GraphQL and Svelte

SvelteKit allows the use of GraphQL for both client-side and server-side. Meaning any sensitive credentials can be handled on a server route.

Why use a Headless CMS for Svelte

Svelte is well suited to consuming external APIs (both client and server-side) and using a headless CMS to build your project gives the flexibility to separate the content.

Working with Hygraph and Svelte

This example demonstrates how to query from Hygraph with graphql-request in SvelteKit.

Demo | Deploy

How to Use Hygraph and Svelte

Download Manually

npx degit hygraph/hygraph-examples/with-sveltekit with-sveltekit

Install & Run:

cd with-sveltekit
⁠npm install
⁠npm run dev -- --open

Run on Codesandbox

This video covers the above example of adding GraphQL support to your Svelte application. It uses graphql-request, allowing you to query your content using Hygraph's GraphQL Content APIs.

Learn how to build production-ready web applications with SvelteKit and Hygraph in this Jamstack Explorers Mission.