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:

 npx @tinacms/cli@latest init

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

  "scripts": {
    "dev": "tinacms dev -c \"vite dev\"",
    "build": "tinacms build && vite build",
    "preview": "tinacms build && vite preview"
  }

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 Tina is configured to use this directory.

Confirm you have both directories under static:

 # Tina admin
 static/admin/index.html
 
 # Tina media/images
 static/images

Adjust tina configuration

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

import { defineConfig } from 'tinacms';
export default defineConfig({
  // ... other config
  clientId: process.env.PUBLIC_TINA_CLIENT_ID,
  token: process.env.TINA_TOKEN,
  build: {
    outputFolder: 'admin',      // This creates static/admin
    publicFolder: 'static'      // REQUIRED for SvelteKit
  },
  media: {
    tina: {
      mediaRoot: 'images',      // Folder inside static/
      publicFolder: 'static'    // REQUIRED for SvelteKit
    }
  },
  schema: {
    collections: [
      {
        name: 'post',
        label: 'Posts',
        path: 'content/posts', // Where your markdown files live
        fields: [ /* ... */ ]
      }
    ]
  }
});

Model your content

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

Learn more about content modelling

Starting TinaCMS

You can start TinaCMS with:

npm run dev

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 Tina admin, select a post, save changes, and see the changes persisted to your local markdown files.

SvelteKit + TinaCMS Setup Guide

Introduction

Getting Started

Updating your build scripts

Move static files

Adjust tina configuration

Model your content

Starting TinaCMS

Next Steps

See Also

Remix + Tina Setup Guide

Framework-Agnostic TinaCMS Setup Guide

On This Page