We Built a Brand New SvelteKit Starter for Our Headless CMS

At Agility CMS, we’re always exploring new ways to improve the developer experience.

As the person responsible for managing our SDKs and starters, I spend a lot of time evaluating frameworks to see which ones offer the best combination of speed, flexibility, and ease of use.

That’s why we recently built a brand-new SvelteKit Starter for Agility CMS—giving developers a modern, high-performance way to build websites with our headless CMS. 

Check it out on our github! https://github.com/agility/sveltekit-starter

Why SvelteKit?

While Next.js has been a popular choice for Jamstack applications, we wanted to offer an alternative that provided better performance and an easier learning curve—especially for junior developers. After evaluating several frameworks, SvelteKit stood out for a few key reasons:

1. Performance – SvelteKit consistently benchmarks faster than Next.js. Unlike React-based frameworks that rely on a virtual DOM, Svelte compiles components into highly efficient JavaScript at build time. This means fewer runtime overheads and snappier websites.

2. Simplicity – Svelte’s syntax is more intuitive and concise compared to React. This makes it a great choice for developers who want to build apps without getting bogged down by complex abstractions.

3. SSR and SSG Support – Like Next.js, SvelteKit provides built-in support for server-side rendering (SSR) and static site generation (SSG). This allows developers to optimize performance and SEO while benefiting from a smooth development experience.

Building the Starter

When creating the Agility CMS SvelteKit Starter, we focused on making it as developer-friendly as possible. Here’s how we approached it:

1. Using @agility/content-fetch for API Operations

Instead of building out custom API endpoints, we leveraged the @agility/content-fetch SDK to handle all CMS data fetching. This SDK simplifies access to Agility CMS content, making API calls seamless without requiring additional backend setup.

2. Dynamic Routing with a Catch-All […path] Folder

SvelteKit’s routing system is file-based, and we took advantage of a catch-all [...path] folder to dynamically capture all routes and render pages accordingly. This works similarly to the [...slug] folder in Next.js, allowing us to fetch and display content based on Agility CMS’s powerful and unique sitemap structure.

3. Hybrid Rendering Capabilities

With SvelteKit, developers can choose between SSG for static content (faster load times) and SSR for dynamic content (real-time updates). We designed the starter to support both, giving developers flexibility in how they deploy their sites.

4. Minimal Setup & Developer Experience

One of our key goals was to make the onboarding process effortless. The starter comes pre-configured with TypeScript support, Tailwind CSS and we also included clear documentation and example components to help developers get started quickly.

The Result: A Faster, Simpler Way to Build with Agility CMS

By introducing a SvelteKit Starter, we’ve made it easier than ever for developers to build lightweight, high-performance websites powered by Agility CMS.

Whether you’re a seasoned developer looking for a performance boost or a newcomer exploring modern frameworks, SvelteKit offers a fantastic developer experience with minimal complexity.

If you’re interested in trying it out, check out the Agility CMS SvelteKit Starter on GitHub and let us know what you think! 🚀