svelte-remote-functions

justEstif's avatarfrom justEstif

Use SvelteKit remote functions (query, form, command, prerender) for type-safe client-server communication, data fetching, form handling, and mutations.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 1, 2026
[API Helpers]

When & Why to Use This Skill

This Claude skill streamlines SvelteKit development by implementing type-safe remote functions for seamless client-server communication. It enables developers to handle data fetching, form validation, and server-side mutations with full TypeScript support, reducing boilerplate and preventing runtime errors in web applications.

Use Cases

  • Type-Safe Data Fetching: Implementing the `query` function to fetch dynamic data from the server with automatic TypeScript type inference in Svelte components.
  • Secure Form Handling: Building robust forms using the `form` function combined with schema validation (like Valibot) to ensure data integrity during submissions.
  • Server-Side Mutations: Executing programmatic updates, such as likes, deletes, or database modifications, directly from the client using the `command` pattern.
  • Performance Optimization: Utilizing batched queries to solve the N+1 problem and using `prerender` to cache static data at build time for faster page loads.
  • Full-Stack Workflow Integration: Creating `.remote.ts` files to centralize server logic that remains easily accessible and type-safe across the entire SvelteKit frontend.
namesvelte-remote-functions
descriptionUse SvelteKit remote functions (query, form, command, prerender) for type-safe client-server communication, data fetching, form handling, and mutations.
audiencedevelopers
workflowsveltekit-development

SvelteKit Remote Functions

Remote functions enable type-safe client-server communication in SvelteKit. They run on the server but can be called from anywhere in your app.

When to Use This Skill

  • Creating .remote.ts or .remote.js files
  • Type-safe data fetching from components
  • Form handling with schema validation
  • Server-side mutations (likes, updates, deletes)
  • Prerendering static data at build time

Function Types

Function Purpose Returns
query Read dynamic data Promise-like with refresh()
query.batch Batched queries (n+1 solution) Promise-like
form Form submissions with validation Spreadable form attributes
command Programmatic mutations Promise
prerender Static data at build time Cached Promise-like

Configuration

Enable in svelte.config.js:

const config = {
  kit: {
    experimental: {
      remoteFunctions: true,
    },
  },
  compilerOptions: {
    experimental: {
      async: true, // Optional: enables await in components
    },
  },
};

Basic Pattern

// src/routes/data.remote.ts
import * as v from "valibot";
import { query, form, command } from "$app/server";

export const getItems = query(async () => {
  // fetch from database
});

export const getItem = query(v.string(), async (id) => {
  // validated id parameter
});

export const createItem = form(v.object({ name: v.string() }), async (data) => {
  // handle form submission
});

export const deleteItem = command(v.string(), async (id) => {
  // handle mutation
});

Full Documentation

Use the svelte-mcp skill and fetch documentation with section kit/remote-functions for complete API reference, form fields, validation, single-flight mutations, and advanced patterns.