Skip to content

Migrating from SvelteKit

SvelteKit is a framework for building web applications on top of Svelte.

Key Similarities between SvelteKit and Astro

Section titled Key Similarities between SvelteKit and Astro

SvelteKit and Astro share some similarities that will help you migrate your project:

Key Differences between SvelteKit and Astro

Section titled Key Differences between SvelteKit and Astro

When you rebuild your SvelteKit site in Astro, you will notice some important differences:

  • Astro sites are multi-page apps, whereas SvelteKit defaults to SPAs (single-page applications) with server-side rendering, but can also create MPAs, traditional SPAs, or you can mix and match these techniques within an app.

  • Components: SvelteKit uses Svelte. Astro pages are built using .astro components, but can also support React, Preact, Vue.js, Svelte, SolidJS, AlpineJS and raw HTML templating.

  • content-driven: Astro was designed to showcase your content and to allow you to opt-in to interactivity only as needed. An existing SvelteKit app might be built for high client-side interactivity. Astro has built-in capabilities for working with your content, such as page generation, but may require advanced Astro techniques to include items that are more challenging to replicate using .astro components, such as dashboards.

  • Markdown-ready: Astro includes built-in Markdown support, and includes a special frontmatter YAML layout property used per-file for page templating. If you are converting a SvelteKit Markdown-based blog, you will not have to install a separate Markdown integration and you will not set a layout via a configuration file. You can bring your existing Markdown files, but you may need to reorganize as Astro’s file-based routing does not require a folder for each page route.

Switch from SvelteKit to Astro

Section titled Switch from SvelteKit to Astro

To convert a SvelteKit blog to Astro, start with our blog theme starter template, or explore more community blog themes in our theme showcase.

You can pass a --template argument to the create astro command to start a new Astro project with one of our official starters. Or, you can start a new project from any existing Astro repository on GitHub.

Terminal window
npm create astro@latest -- --template blog

Bring your existing Markdown (or MDX, with our optional integration) files as content to create Markdown or MDX pages.

While file-based routing and layout components are similar in Astro, you may wish to read about Astro’s project structure to learn where files should be located.

To convert other types of sites, such as a portfolio or documentation site, see more official starter templates on astro.new. You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in StackBlitz, CodeSandbox and Gitpod online development environments.

More migration guides

Contribute

What’s on your mind?

Create GitHub Issue

Quickest way to alert our team of a problem.

Community