SvelteKit

Create a SvelteKit Project

To create a new SvelteKit project, run the following command:

npx sv@latest create remult-sveltekit-todo

During the setup, answer the prompts as follows:

1. Which Svelte app template?: ... minimal Project
2. Add type checking with TypeScript? ... Yes, using TypeScript syntax
3. Select additional options: ... We didn't select anything for this tutorial. Feel free to adapt it to your needs.
4. Which package manager?: ... We took npm, if you perfer others, feel free.

Once the setup is complete, navigate into the project directory:

cd remult-sveltekit-todo

Install Required Packages and Remult

Install Remult and any necessary dependencies by running:

npm install remult --save-dev

Bootstrap Remult

To set up Remult in your SvelteKit project:

1. Create your remult api

src/server/api.ts

import { remultSveltekit } from 'remult/remult-sveltekit'

export const api = remultSveltekit({})

2. Create a remult api route

src/routes/api/[...remult]/+server.ts

import { api } from '../../../server/api'

export const { GET, POST, PUT, DELETE } = api

Final Tweaks

Remult uses TypeScript decorators to enhance classes into entities. To enable decorators in your SvelteKit project, modify the tsconfig.json file by adding the following to the compilerOptions section:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Run the App

To start the development server, run the following command:

npm run dev

Your SvelteKit app will be available at http://localhost:5173.

Your SvelteKit project with Remult is now up and running.

Extra

Extra - Remult in other SvelteKit routes

To enable remult across all sveltekit route

src/hooks.server.ts

import { sequence } from '@sveltejs/kit/hooks'
import { api as handleRemult } from './server/api'

export const handle = sequence(
  // Manage your sequence of handlers here
  handleRemult,
)

Extra - SSR and PageLoad

To Use remult in ssr PageLoad - this will leverage the event's fetch to load data on the server without reloading it on the frontend, and abiding to all api rules even when it runs on the server

src/routes/+page.ts

import { remult } from 'remult'
import type { PageLoad } from './$types'

export const load = (async (event) => {
  // Instruct remult to use the special svelte fetch
  // Like this univeral load will work in SSR & CSR
  remult.useFetch(event.fetch)
  return repo(Task).find()
}) satisfies PageLoad

TIP

You can add this in +layout.ts as well and all routes under will have the correct fetch out of the box.

Extra - Svelte 5 & Reactivity

Remult is fully compatible with Svelte 5, Rune, and Reactivity.

To take full advantage of it, add this snippet:

src/routes/+layout.svelte

<script lang="ts">
  import { Remult } from 'remult'
  import { createSubscriber } from 'svelte/reactivity'

  // To be done once in the application.
  function initRemultSvelteReactivity() {
    Remult.entityRefInit = (x) => {
      let update = () => {}
      let s = createSubscriber((u) => {
        update = u
      })
      x.subscribe({
        reportObserved: () => s(),
        reportChanged: () => update(),
      })
    }
  }
  initRemultSvelteReactivity()
</script>

Then you can use $state, $derived like any other places

src/routes/+page.svelte

<script lang="ts">
  // Prepare a new task
  let editingTask = $state(repo(Task).create())

  // Check if the form has empty fields
  let formHasEmpty = $derived(!editingTask || editingTask.title.length === 0)

  // Clone the task to edit
  const editTask = async (task: Task) => {
    editingTask = repo(Task).getEntityRef(task).clone()
  }
</script>