🚀 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:
- Log in to Prismic or create a new account.
- Create a new Prismic repository using the new SvelteKit option.
- Select the “Minimal” or “Full website demo” starter—choose to start from scratch.
- After giving your repository a name, follow the
@slicemachine/initinstallation 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! 🚀
