Headless CMS for Svelte and SvelteKit

Managing content never Svelte this good!

Svelte's simple approach to code and GraphQL's efficient data fetching is a dream combo. When adding content to the mix, pair it with a CMS that gets out of your way.

Worldwide CDN

Building with Svelte is fast. Use a CMS that can keep up.

If your content is always fetched from a single geographical location, there’s no point in building apps with Svelte within a serverless architecture, that is why DatoCMS and Svelte are so powerful together.

DatoCMS delivers your content from a CDN with edges all around the globe, minimizing latency and providing the fastest content delivery on the market.

Read more about our Worldwide CDN

GraphQL Content API

Ask for what you need, get exactly that

Our Content Delivery API is built with GraphQL. That means powerful developer tools, multiple resources in a single request and complete control over the data your website downloads. The perfect solution for a SvelteRead more about our GraphQL API

{}

Svelte example

Svelte + DatoCMS = ✨

Svelte gives you powerful capabilities and supports data fetching for server-side rendering or SSG. If you're familiar with getStaticProps from NextJS, you're going to love load in Svelte.

Bonus point, Svelte pairs wonderfully with our GraphQL API

<!-- src/routes/movie/+page.js -->
import { request } from 'graphql-request';
const query = `{
movie(filter: { title: { eq: "Inception" } }) {
releaseDate
actors {
name
}
}
}`;
export async function load({ fetch, session }) {
const preview = session?.preview || false;
const endpoint = preview ?
'https://graphql.datocms.com/preview' :
'https://graphql.datocms.com/';
const { movie } = await request(endpoint, query);
return { movie };
}
<!-- src/routes/movie/+page.svelte -->
<script>
export let data;
$: ({ movie } = data)
</script>
<main>
<h1>{movie.title}</h1>
<p>Release Date: {movie.releaseDate}</p>
<h2>Actors</h2>
<ul>
{#each movie.actors as actor}
<li>{actor.name}</li>
{/each}
</ul>
</main>

Svelte images

State of the art image handling for optimizations and responsiveness

Feeling stumped without built-in image optimizations when working in Svelte? Combine it with SvelteKit and pair it with our Images API to enjoy a standard HTML approach as we handle image optimizations, lazy loading, and progression through our capabilities with imgix.

Before
Svelte with DatoCMS
Acme Inc. - DatoCMS
Create new Blog post
Title
The Best Video Games to Play
Author
Dan Poe
Content
Text
Lorem ipsum....
Gallery
Text
Lorem ipsum....
CTA label
Try it now!
CTA URL
http://...
Quote
Lorem ipsum....
Author
Steve Jobs
Add a new block:
Text
Gallery
Quote
Call to action
Save Blog Post

A component-centric approach, just like Svelte

Svelte really feels like going back to completeness 😌 - JS, HTML, and CSS in single files creating bidirectional data binding components. Our component-based approach allows developers to clearly divide work amongst themselves and editors to immediately visualize a wireframe, ultimately providing a scalable and customizable experience.

Read more about DatoCMS modular blocks

Svelte example

We're running out of space for how much we love Svelte

With a gorgeous DX, friendly ecosystem, and a less-code approach, working with Svelte and DatoCMS is a dream for SEO-friendly component-based projects.

Stack it up with SvelteKit and you've got all the power of file-based routing, partial hydration, SSR, and SSG readily available at your fingertips 💅

npm install @datocms/svelte
DatoCMS does not force you to speak its language, instead gives you the peace of mind of being able to use the right solution for each project.
Matteo Manzo
Technical Project Manager @ Cantiere Creativo