⚡ SvelteKit Remote Functions Example

Welcome to a demo of the new Remote Functions in SvelteKit! This feature is currently experimental 🧪 and provides a powerful way to colocate server logic directly with components using .remote.ts files.

[!WARNING] Remote Functions are currently in experimental and not yet officially released in a stable version.

🤣 Fast use

pnpm dlx gitpick https://github.com/devgauravjatt/svelte-remote-functions-example

cd svelte-remote-functions-example

pnpm i && pnpm dev

🧪 What Are Remote Functions?

Remote Functions let you write server-only logic in .remote.ts files and call them from your Svelte components as if they were regular functions. Depending on whether you're on the client or server, they either execute directly or automatically wrap a fetch() request behind the scenes.

✨ Highlights:

• 🔐 Safe & secure server-only code (e.g., DB access, secrets)
• 📦 Fully type-safe and colocated logic
• 💨 Automatically serialized via devalue
• 🔄 Reactive and cached query results
• 🧩 Supports query, form, command, and prerender

📂 Examples

Explore the source code examples:

• ✅ Todos Example (Full CRUD)
• 🧱 Simple Todos (Inspired by Joy of Code)

🔗 Official Resources

• 📚 Remote Functions Official Discussion #13897
• 🎥 Joy of Code's Remote Function Example Repo

🧑‍💻 Try It Yourself

To enable Remote Functions in your project:

// svelte.config.js
const config = {
    kit: {
        experimental: {
            remoteFunctions: true
        }
    },
    compilerOptions: {
        experimental: {
            async: true
        }
    }
};

Then create a .remote.ts file and use query, form, or command from $app/server.

Example:

// data.remote.ts
import { query, form } from '$app/server';
import * as db from '$lib/server/db';

export const getLikes = query(async (id: string) => {
    const [row] = await db.sql`SELECT likes FROM item WHERE id = ${id}`;
    return row.likes;
});

export const addLike = form(async (data: FormData) => {
    const id = data.get('id');
    await db.sql`UPDATE item SET likes = likes + 1 WHERE id = ${id}`;
    return { success: true };
});

📣 Contributions Welcome!

Got ideas, examples, or improvements? Open a PR or issue — let’s build this together! 🚀

📜 License

MIT © devgauravjatt and Joy of Code