Prismic Announcements
·2 min read

Build Websites with Prismic and SvelteKit

🚀 Our latest release gives developers the speed of SvelteKit with the power of Prismic!

SvelteKit joins Next.js and Nuxt as Prismic’s officially supported website frameworks.

Prismic’s latest Slice Machine features — including page types, Slices shared across content types, and Slice screenshots — are now supported in SvelteKit projects.

What’s SvelteKit?

SvelteKit is a modern web application framework that uses Svelte, a compiler for reactive JavaScript UIs. Think of it as an alternative to Next.js with React.
Learn more about SvelteKit and Svelte at their official websites:

SvelteKit: https://kit.svelte.dev/
Svelte: https://svelte.dev/

With integrations for Next.js, Nuxt, and SvelteKit, Prismic can be used with the web’s three major UI frameworks: React, Vue, and Svelte.

Learn how to use SvelteKit with Prismic, what’s supported in this first version, and what we plan to add in the future below.

How to use SvelteKit with Prismic

You can start a new SvelteKit website with Prismic in just a few steps:

  1. Log in to Prismic or create a new account.
  2. Create a new Prismic repository using the new SvelteKit option.
  3. Select the “Minimal” or “Full website demo” starter—choose to start from scratch.
  4. After giving your repository a name, follow the @slicemachine/init installation instructions.

Running @slicemachine/init in your new project automatically detects your SvelteKit project and gives you:

  • A Prismic repository — Create a new repository or connect to an existing one.
  • A Prismic client — Query content from your Prismic repository using @prismicio/client.
  • Prismic’s Svelte SDK — Render your Prismic content in Svelte using @prismicio/svelte.
  • Slice Machine — Model your website’s content.

What’s supported and what’s planned?

In this initial release, Slice Machine can manage your SvelteKit website’s Slices, page types, and custom types, along with the following features:

  • Slice Simulator — Develop your Slices’ design in an interactive environment.
  • Component generation — Bootstrap your Slice’s code as soon as you create them.
  • Code snippets — Quickly develop Slices and pages using templated code.

In future updates, we will bring full feature parity with our Next.js and Nuxt integrations, including:

  • Previews — Let your content writers preview their content before publishing.
  • Guided documentation — Learn best practices to build websites with Prismic and SvelteKit.

Follow @prismicio on Twitter to know when we release updates.

Providing feedback or getting help

Today’s release marks just the start of a deep integration between Prismic and SvelteKit.

Please let us know if you come across any bugs while using Slice Machine or have any feature requests through GitHub.

SvelteKit support is new and in active development. During this time, please submit development questions to the @prismicio/svelte GitHub repository, and we’ll do our best to help.

We’re excited for the Svelte community to join Next.js and Nuxt Prismic developers, and we hope you are too.

Happy coding! 🚀

Article written by

Angelo Ashmore

Senior Developer Experience Engineer at Prismic focusing on Next.js, Gatsby, React, and TypeScript, in no particular order.

More posts

5 comments

Emil

This is great!
Reply·7 months ago

Alex

Thanks for your work and your contribution to the Sveltekit ecosystem
Reply·7 months ago

Alison from Prismic

This is a reply to Emil's comment

This is great!

Thanks, Emil! Glad you are excited. We are, too! 😀
Reply·7 months ago

Alison from Prismic

This is a reply to Alex's comment

Thanks for your work and your contribution to the Sveltekit ecosystem

Thanks, Alex! We are happy to be a part of the SvelteKit community!
Reply·7 months ago

Brian

Great news, my two favs working together!
Reply·6 months ago
Hit your website goals

Websites success stories from the Prismic Community

How Arcadia is Telling a Consistent Brand Story

Read Case Study

How Evri Cut their Time to Ship

Read Case Study

How Pallyy Grew Daily Visitors from 500 to 10,000

Read Case Study