Example SvelteKit

SvelteKit x caisy

The final code of this demo is available at


In this example, we build on the blog article created in the quick start. If you haven't completed it yet, it is recommended to go through the first four steps of the quick start once more

To proceed, the following query should retrieve the article data using the slug of the previously created article

query allBlogArticle($slug: String) {
  allBlogArticle(where: { slug: { eq: $slug } }) {
    edges {
      node {
        text {

In this example, you will need your project ID and a valid API key.

Create SvelteKit Project

To create a new SvelteKit project, run the following command:

npm create svelte@latest caisy-example-sveltekit
cd caisy-example-sveltekit
npm install (or pnpm install, etc)
git init && git add -A && git commit -m "Initial commit" (optional)
npm run dev -- --open

"Hello world" page

To begin, we will add a link to our newly created blog on the landing page using the <a> tag

<a href="/blog/my-first-article">a link to our first blog page</a>

Note: Replace my-first-article with the slug you have set

If the development server is running, you should see a link on your index page. However, clicking the link will result in a 404 page. Let's fix this by creating a dynamic routed page that handles all of our blog pages.
To do this, create a file called +page.svelte in the path src/routes/blog/[slug]. In this file, you can add a simple "Hello World" placeholder like this:

<h1>hello world</h1>

If you visit your site with the link on the index page, you will see your "hello world" text.

Data fetching

You can install graphql-request by running the following command in your terminal or command prompt:

npm install graphql-request graphql --save

Create a TypeScript page file named +page.server.ts in the same directory as your page, this file will only run on the server (indicated by server in the name) to prevent leaking credentials to the client side.
The following code should be written in the file:

import { gql, GraphQLClient } from 'graphql-request';
import { CAISY_API_KEY, CAISY_PROJECT_ID } from '$env/static/private'

export async function load({ params }: { params: { slug: string } }) {
	const client = new GraphQLClient(
			headers: {
				'x-caisy-apikey': CAISY_API_KEY
	const gqlResponse = await client.request(
			query allBlogArticle($slug: String) {
				allBlogArticle(where: { slug: { eq: $slug } }) {
					edges {
						node {
							text {
		{ slug: params.slug }

	return gqlResponse?.allBlogArticle?.edges?.[0]?.node;

This code uses GraphQL to retrieve information about a specific blog article from an external API. It utilizes an API key and project ID for access and locates the article using a specific "slug."
It returns the title and text of the located article. For proper functionality, the environment variables CAISY_API_KEY and CAISY_PROJECT_ID must be defined in a prior .env file.
If you need information on where to find this in your project, see:

The .env file may look like this:


The query used is from the Quickstart example and can be tested in the Playground.

caisy screenshot interface query playground

Rendering the data

We've fetched the data, but the UI still displays "Hello World." To use the returned object in the Svelte template, grab it from the server-side load function. To render the rich text, we use the pre-built library @caisy/rich-text-svelte-renderer, which can be installed with a package manager like this:

npm install @caisy/rich-text-svelte-renderer --save

It can be used in the page's template file like this:

<script lang="ts">
	import { RichTextRenderer } from '@caisy/rich-text-svelte-renderer';

	export let data: { title: string; text: any };


	{#if data.text && data.text.json}
		<RichTextRenderer node={data.text.json} />


If you navigate to the page, you should now see the headline and full rich text of the blog article displayed on the page.

caisy screenshot my first article live preview

With this, you have all you need to build a blog page with caisy and Svelte. For more complex queries and topics such as preview and localization, further reading may be necessary.

Continue reading on more advanced topics

Localization and Preview

Query your documents in draft mode and multiple locales.


Use pagination to query large chunks of documents.

Filter and Order

Use filter in your queries and order the results

single caisy logo without name
Made for you

© 2023 caisy