SvelteKit + TinaCMS Setup Guide

Introduction

TinaCMS can be added to your SvelteKit site locally. In this doc, we'll guide you through the local setup, as well as editing on your production site.

Getting Started

From within your site's directory, run:

This will ask you a few setup questions.

If you are importing your site from Forestry.io CMS, some models & config will be auto-imported.

Updating your build scripts

Move static files

TinaCMS assumes your static files are in the public directory. However, SvelteKit serves static files from the static directory. You'll need to ensure TinaCMS is configured to use this directory.

Confirm you have both directories under static:

Adjust tina configuration

Update the output directories to target the static directory used by SvelteKit

Model your content

To edit your site's content in TinaCMS, you can model your content in the tina/config.ts file.

Learn more about content modelling

Starting TinaCMS

You can start TinaCMS with:

With TinaCMS running, navigate to http://localhost:5173/admin/index.html

Hint: If you encounter an error when running this command, please see the Common Errors page.

At this point, you should be able to see the TinaCMS admin, select a post, save changes, and see the changes persisted to your local markdown files.

Next Steps

• Check out the content Modeling docs
• Learn how to query your content
• Deploy Your Site

See Also

• Astro setup guide - Another modern framework option
• Remix setup guide - React-based alternative
• Next.js setup guide - Most popular React framework