SvelteKit Remote Functions

SvelteKit’s remote functions are a powerful new experimental feature that’s changing how we handle forms and server-side operations. If you’ve been wrestling with traditional form actions, this might be the solution you’ve been waiting for.

What Are Remote Functions?

Remote functions let you write server-side logic that feels more integrated with your components. Instead of creating separate +page.server.ts files with actions, you can define functions that handle form submissions directly alongside your component logic.

Think of them as a bridge between your frontend and backend that maintains type safety while simplifying the development experience.

Why They’re Useful

The traditional SvelteKit approach requires you to:

• Create +page.server.ts files
• Export actions with specific naming conventions
• Handle form submissions through use:enhance
• Manage form state separately

Remote functions handles this by:

• Better colocation: Form logic lives closer to your components
• Improved type safety: Better TypeScript integration out of the box
• Simpler API: Less boilerplate, more focused on the actual logic
• Progressive enhancement: Still works without JavaScript

Placement Matters

Remote functions must be placed in .remote files within your src/routes directory structure. This isn’t arbitrary - SvelteKit needs to know these functions should be treated as server endpoints.

src/routes/
├── login/
│   ├── auth.remote.ts    # ✅ Correct placement
│   └── +page.svelte
└── profile/
    ├── settings.remote.ts # ✅ Also correct
    └── +page.svelte

The .remote suffix tells SvelteKit’s compiler to generate the necessary server endpoints and client-side integration code automatically.

Replacing Page Server Files

Here’s how remote functions can replace traditional server actions:

Old way with +page.server.ts:

// +page.server.ts
export const actions = {
	login: async ({ request, cookies }) => {
		// form handling logic
	}
};

New way with remote functions:

// auth.remote.ts
import { form } from '$app/server';

export const loginUser = form(async (data, { cookies }) => {
	// same logic, cleaner API
});

The remote function approach gives you the same capabilities with better ergonomics and type inference.

Accessing Cookies in Remote Functions

One of the cleanest aspects of remote functions is cookie access. The second parameter provides everything you need:

import { form, getRequestEvent } from '$app/server';
export const loginUser = form(async (data) => {
	const { cookies } = getRequestEvent();

	// Read cookies
	const existingToken = cookies.get('token');

	// Set cookies after successful login
	cookies.set('token', newToken, {
		path: '/',
		httpOnly: true,
		secure: true
	});

	// Clear cookies
	cookies.delete('oldToken', { path: '/' });
});

Handling Redirects

Remote functions make redirects straightforward. Simply import redirect from @sveltejs/kit and use it:

import { redirect } from '@sveltejs/kit';

export const createPost = form(async (data) => {
	// Process form data
	const slug = await savePost(data);

	// Redirect to the new post
	redirect(303, `/posts/${slug}`);
});

Getting Started

To enable remote functions, add this to your svelte.config.js:

const config = {
	kit: {
		experimental: {
			remoteFunctions: true
		}
	}
};

Then create your first remote function:

// src/routes/contact.remote.ts
import { form } from '$app/server';

export const submitContact = form(async (data) => {
	const message = data.get('message');

	// Process the message
	await sendEmail(message);

	return { success: true };
});

Use it in your component:

<script>
	import { submitContact } from './contact.remote';
</script>

<form {...submitContact}>
	<textarea name="message"></textarea>
	<button>Send</button>
</form>

My Thoughts

Remote functions represent a significant step forward in SvelteKit’s evolution. They maintain all the benefits of traditional form actions while providing a more intuitive developer experience.

As this feature moves from experimental to stable, expect to see it become the recommended approach for form handling in SvelteKit applications.

Learn More

Check out the official SvelteKit documentation for the most up-to-date information on remote functions and other SvelteKit features.

The feature is still experimental, so syntax and APIs may change, but the core concept is solid and worth exploring in your projects.