Prismic Toolbar playground

Preview off · Toolbar https://static.cdn.prismic.io/prismic.js?repo=prismic-main

Build Websites with Prismic and SvelteKit

blog · sveltekit-prismic-integration

callout info

title

A note on Slice Machine

content

Slice Machine has been replaced by the Prismic CLI and Type Builder and is no longer maintained. The slice concepts in this article still apply, but for current setup steps, see the SvelteKit docs.

hidden_content
[]

text_content default

content

🚀 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.

callout info

title

What’s SvelteKit?

content

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/

hidden_content
[]

text_content default

content

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.

text_content default

content

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.

text_content default

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.

text_content default

content

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! 🚀

related_posts default

title

You might also like...

Document data
{
  "title": [
    {
      "type": "heading1",
      "text": "Build Websites with Prismic and SvelteKit",
      "spans": []
    }
  ],
  "image": {
    "dimensions": {
      "width": 517,
      "height": 290
    },
    "alt": null,
    "copyright": null,
    "url": "https://prismic-main.cdn.prismic.io/prismic-main/b7c495f0-5b3a-4811-a4b1-505ec613abc6_SvleteKit_Prismic.svg",
    "id": "ZPCoMhEAAC8ATYfN",
    "edit": {
      "x": 0,
      "y": 0,
      "zoom": 1,
      "background": "#fff"
    }
  },
  "author": {
    "id": "ZO8HtREAACwARj88",
    "type": "blog_author",
    "tags": [],
    "lang": "en-eu",
    "slug": "angelo-ashmore",
    "first_publication_date": "2023-08-30T09:19:09+0000",
    "last_publication_date": "2026-06-25T19:15:29+0000",
    "uid": "angelo-ashmore",
    "link_type": "Document",
    "key": "bcdb0620-df96-4dcc-a08f-f256d163ac98",
    "isBroken": false
  },
  "additional_author": {
    "link_type": "Document"
  },
  "category": {
    "id": "agtaYxIAACoAHp5o",
    "type": "blog_category",
    "tags": [],
    "lang": "en-eu",
    "slug": "product-news",
    "first_publication_date": "2026-05-18T18:59:35+0000",
    "last_publication_date": "2026-05-18T18:59:35+0000",
    "uid": "product-news",
    "link_type": "Document",
    "key": "889fd14c-7ddc-4098-b6d6-ae99b902d16f",
    "isBroken": false
  },
  "date": "2023-08-31",
  "updated_date": null,
  "learning_objective": null,
  "card_description": [],
  "slices": [
    {
      "variation": "info",
      "version": "sktwi1xtmkfgx8626",
      "items": [],
      "primary": {
        "title": [
          {
            "type": "heading2",
            "text": "A note on Slice Machine",
            "spans": [],
            "direction": "ltr"
          }
        ],
        "content": [
          {
            "type": "paragraph",
            "text": "Slice Machine has been replaced by the Prismic CLI and Type Builder and is no longer maintained. The slice concepts in this article still apply, but for current setup steps, see the SvelteKit docs.",
            "spans": [
              {
                "start": 182,
                "end": 196,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://prismic.io/docs/sveltekit",
                  "target": "_blank"
                }
              }
            ],
            "direction": "ltr"
          }
        ],
        "hidden_content": []
      },
      "id": "callout$5d506984-54f1-476b-8791-a4fceccdf10c",
      "slice_type": "callout",
      "slice_label": null
    },
    {
      "variation": "default",
      "version": "sktwi1xtmkfgx8626",
      "items": [
        {}
      ],
      "primary": {
        "content": [
          {
            "type": "paragraph",
            "text": "🚀 Our latest release gives developers the speed of SvelteKit with the power of Prismic! ",
            "spans": [],
            "direction": "ltr"
          },
          {
            "type": "paragraph",
            "text": "SvelteKit joins Next.js and Nuxt as Prismic’s officially supported website frameworks.  ",
            "spans": [],
            "direction": "ltr"
          },
          {
            "type": "paragraph",
            "text": "Prismic’s latest Slice Machine features — including page types, Slices shared across content types, and Slice screenshots — are now supported in SvelteKit projects.",
            "spans": [],
            "direction": "ltr"
          }
        ]
      },
      "id": "text_content$de6373fc-aa2a-46fc-a456-0a5f7fadd4a6",
      "slice_type": "text_content",
      "slice_label": null
    },
    {
      "variation": "info",
      "version": "sktwi1xtmkfgx8626",
      "items": [
        {}
      ],
      "primary": {
        "title": [
          {
            "type": "heading2",
            "text": "What’s SvelteKit?",
            "spans": []
          }
        ],
        "content": [
          {
            "type": "paragraph",
            "text": "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.\nLearn more about SvelteKit and Svelte at their official websites:\n\nSvelteKit: https://kit.svelte.dev/\nSvelte: https://svelte.dev/",
            "spans": [
              {
                "start": 226,
                "end": 235,
                "type": "strong"
              },
              {
                "start": 237,
                "end": 260,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://kit.svelte.dev/"
                }
              },
              {
                "start": 261,
                "end": 267,
                "type": "strong"
              },
              {
                "start": 269,
                "end": 288,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://svelte.dev/"
                }
              }
            ]
          }
        ],
        "hidden_content": []
      },
      "id": "callout$55afe77a-f542-497e-800a-e35f0c376766",
      "slice_type": "callout",
      "slice_label": null
    },
    {
      "variation": "default",
      "version": "sktwi1xtmkfgx8626",
      "items": [
        {}
      ],
      "primary": {
        "content": [
          {
            "type": "paragraph",
            "text": "With integrations for Next.js, Nuxt, and SvelteKit, Prismic can be used with the web’s three major UI frameworks: React, Vue, and Svelte.",
            "spans": []
          },
          {
            "type": "paragraph",
            "text": "Learn how to use SvelteKit with Prismic, what’s supported in this first version, and what we plan to add in the future below.",
            "spans": []
          }
        ]
      },
      "id": "text_content$96f480e3-e8b0-40cc-a48d-a02cde0c3d10",
      "slice_type": "text_content",
      "slice_label": null
    },
    {
      "variation": "default",
      "version": "sktwi1xtmkfgx8626",
      "items": [
        {}
      ],
      "primary": {
        "content": [
          {
            "type": "heading2",
            "text": "How to use SvelteKit with Prismic",
            "spans": []
          },
          {
            "type": "paragraph",
            "text": "You can start a new SvelteKit website with Prismic in just a few steps:",
            "spans": []
          },
          {
            "type": "o-list-item",
            "text": "Log in to Prismic or create a new account.",
            "spans": [
              {
                "start": 0,
                "end": 17,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://prismic.io/dashboard"
                }
              },
              {
                "start": 21,
                "end": 41,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://prismic.io/dashboard/signup"
                }
              }
            ]
          },
          {
            "type": "o-list-item",
            "text": "Create a new Prismic repository using the new SvelteKit option.",
            "spans": [
              {
                "start": 0,
                "end": 31,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://prismic.io/dashboard"
                }
              }
            ]
          },
          {
            "type": "o-list-item",
            "text": "Select the “Minimal” or “Full website demo” starter—choose to start from scratch.",
            "spans": [
              {
                "start": 11,
                "end": 20,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://github.com/prismicio-community/sveltekit-starter-prismic-minimal"
                }
              },
              {
                "start": 24,
                "end": 43,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://github.com/prismicio-community/sveltekit-starter-prismic-multi-page"
                }
              }
            ]
          },
          {
            "type": "o-list-item",
            "text": "After giving your repository a name, follow the @slicemachine/init installation instructions.",
            "spans": [
              {
                "start": 48,
                "end": 66,
                "type": "label",
                "data": {
                  "label": "inline-code"
                }
              }
            ]
          },
          {
            "type": "paragraph",
            "text": "Running @slicemachine/init in your new project automatically detects your SvelteKit project and gives you:",
            "spans": [
              {
                "start": 8,
                "end": 26,
                "type": "label",
                "data": {
                  "label": "inline-code"
                }
              }
            ]
          },
          {
            "type": "list-item",
            "text": "A Prismic repository — Create a new repository or connect to an existing one.",
            "spans": [
              {
                "start": 0,
                "end": 20,
                "type": "strong"
              }
            ]
          },
          {
            "type": "list-item",
            "text": "A Prismic client — Query content from your Prismic repository using @prismicio/client.",
            "spans": [
              {
                "start": 0,
                "end": 16,
                "type": "strong"
              },
              {
                "start": 68,
                "end": 85,
                "type": "label",
                "data": {
                  "label": "inline-code"
                }
              }
            ]
          },
          {
            "type": "list-item",
            "text": "Prismic’s Svelte SDK — Render your Prismic content in Svelte using @prismicio/svelte.",
            "spans": [
              {
                "start": 0,
                "end": 20,
                "type": "strong"
              },
              {
                "start": 67,
                "end": 84,
                "type": "label",
                "data": {
                  "label": "inline-code"
                }
              }
            ]
          },
          {
            "type": "list-item",
            "text": "Slice Machine — Model your website’s content.",
            "spans": [
              {
                "start": 0,
                "end": 13,
                "type": "strong"
              }
            ]
          }
        ]
      },
      "id": "text_content$6ed1b68e-c375-416f-831f-6bbaa2413127",
      "slice_type": "text_content",
      "slice_label": null
    },
    {
      "variation": "default",
      "version": "sktwi1xtmkfgx8626",
      "items": [
        {}
      ],
      "primary": {
        "content": [
          {
            "type": "heading2",
            "text": "What’s supported and what’s planned?",
            "spans": []
          },
          {
            "type": "paragraph",
            "text": "In this initial release, Slice Machine can manage your SvelteKit website’s Slices, page types, and custom types, along with the following features:",
            "spans": []
          },
          {
            "type": "list-item",
            "text": "Slice Simulator — Develop your Slices’ design in an interactive environment.",
            "spans": [
              {
                "start": 0,
                "end": 15,
                "type": "strong"
              }
            ]
          },
          {
            "type": "list-item",
            "text": "Component generation — Bootstrap your Slice’s code as soon as you create them.",
            "spans": [
              {
                "start": 0,
                "end": 20,
                "type": "strong"
              }
            ]
          },
          {
            "type": "list-item",
            "text": "Code snippets — Quickly develop Slices and pages using templated code.",
            "spans": [
              {
                "start": 0,
                "end": 13,
                "type": "strong"
              }
            ]
          },
          {
            "type": "paragraph",
            "text": "In future updates, we will bring full feature parity with our Next.js and Nuxt integrations, including:",
            "spans": []
          },
          {
            "type": "list-item",
            "text": "Previews — Let your content writers preview their content before publishing.",
            "spans": [
              {
                "start": 0,
                "end": 8,
                "type": "strong"
              }
            ]
          },
          {
            "type": "list-item",
            "text": "Guided documentation — Learn best practices to build websites with Prismic and SvelteKit.",
            "spans": [
              {
                "start": 0,
                "end": 20,
                "type": "strong"
              }
            ]
          },
          {
            "type": "paragraph",
            "text": "Follow @prismicio on Twitter to know when we release updates.",
            "spans": [
              {
                "start": 7,
                "end": 17,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://twitter.com/prismicio",
                  "target": "_blank"
                }
              }
            ]
          },
          {
            "type": "paragraph",
            "text": "",
            "spans": []
          }
        ]
      },
      "id": "text_content$5c702bca-af6f-4cf4-8f35-7322eddbecb0",
      "slice_type": "text_content",
      "slice_label": null
    },
    {
      "variation": "default",
      "version": "sktwi1xtmkfgx8626",
      "items": [
        {}
      ],
      "primary": {
        "content": [
          {
            "type": "heading2",
            "text": "Providing feedback or getting help",
            "spans": []
          },
          {
            "type": "paragraph",
            "text": "Today’s release marks just the start of a deep integration between Prismic and SvelteKit.",
            "spans": []
          },
          {
            "type": "paragraph",
            "text": "Please let us know if you come across any bugs while using Slice Machine or have any feature requests through GitHub.",
            "spans": []
          },
          {
            "type": "list-item",
            "text": "Submit a bug report or feature request on GitHub",
            "spans": [
              {
                "start": 0,
                "end": 48,
                "type": "strong"
              },
              {
                "start": 0,
                "end": 48,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://github.com/prismicio/slice-machine/issues",
                  "target": "_blank"
                }
              }
            ]
          },
          {
            "type": "paragraph",
            "text": "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.",
            "spans": [
              {
                "start": 113,
                "end": 130,
                "type": "label",
                "data": {
                  "label": "inline-code"
                }
              }
            ]
          },
          {
            "type": "list-item",
            "text": "Submit a development question on GitHub",
            "spans": [
              {
                "start": 0,
                "end": 39,
                "type": "strong"
              },
              {
                "start": 0,
                "end": 39,
                "type": "hyperlink",
                "data": {
                  "link_type": "Web",
                  "url": "https://github.com/prismicio/prismic-svelte/issues",
                  "target": "_blank"
                }
              }
            ]
          },
          {
            "type": "paragraph",
            "text": "We’re excited for the Svelte community to join Next.js and Nuxt Prismic developers, and we hope you are too.",
            "spans": []
          },
          {
            "type": "paragraph",
            "text": "Happy coding! 🚀",
            "spans": []
          }
        ]
      },
      "id": "text_content$15b91283-4a64-4b6e-9d02-9b8c7375afd8",
      "slice_type": "text_content",
      "slice_label": null
    },
    {
      "variation": "default",
      "version": "sktwi1xtmkfgx8626",
      "items": [
        {
          "related": {
            "id": "ZO8HtREAACwARj4O",
            "type": "blog",
            "tags": [
              "Svelte",
              "SvelteKit"
            ],
            "lang": "en-eu",
            "slug": "sveltekit-tutorial-build-a-website-from-scratch",
            "first_publication_date": "2023-08-30T09:19:09+0000",
            "last_publication_date": "2026-10-14T18:27:52+0000",
            "uid": "svelte-sveltekit-tutorial",
            "link_type": "Document",
            "key": "ce12a0dc-a2d2-4019-aa94-1087fa3bd377",
            "isBroken": false
          }
        },
        {
          "related": {
            "id": "ZTAriBEAABMGMgTC",
            "type": "blog",
            "tags": [
              "Svelte",
              "React"
            ],
            "lang": "en-eu",
            "slug": "svelte-vs-react-2024-which-is-better",
            "first_publication_date": "2023-10-20T16:17:01+0000",
            "last_publication_date": "2024-08-14T14:09:23+0000",
            "uid": "svelte-vs-react",
            "link_type": "Document",
            "key": "4c96da3c-e105-44c9-84e7-5fba9c6cfc10",
            "isBroken": false
          }
        }
      ],
      "primary": {
        "title": [
          {
            "type": "heading2",
            "text": "You might also like...",
            "spans": []
          }
        ]
      },
      "id": "related_posts$0f1e23ed-9e4c-4bb4-8310-897ca47a5c77",
      "slice_type": "related_posts",
      "slice_label": null
    }
  ],
  "meta_title": "Build Websites with Prismic and SvelteKit",
  "meta_description": "SvelteKit meets Prismic: Power up with new Slice Machine features for faster web development.",
  "social_image": {},
  "short_name": null,
  "part_of_guide": {
    "link_type": "Document"
  }
}