π¬ Explore Upcoming Features! Remote Functions are an experimental feature in SvelteKit, offering a type-safe alternative to tRPC for full-stack development.
An interactive demonstration of SvelteKit Remote Functions patterns, showcasing type-safe client-server communication with live examples. Experience the future of SvelteKit with end-to-end type safety, automatic serialization, and built-in query batchingβno separate API layer required.
Remote Functions are SvelteKit's approach to type-safe client-server communication. They can be called anywhere in your app but always run on the server, making them perfect for:
This demo showcases 9 different patterns for working with Remote Functions:
{#await query()}
directly in templatesquery().current
for manual control$derived()
for reactive data.refresh()
on demandcommand()
for mutations and updatesform()
<svelte:boundary>
to catch errors{await}
without hash symbol# Clone the repository
git clone https://github.com/wiesson/svelte-async-remote-fn.git
cd svelte-async-remote-fn
# Install dependencies
pnpm install
# Start development server
pnpm dev
Visit http://localhost:5173 to explore the patterns.
// src/routes/example.remote.ts
import { query } from '$app/server';
import { z } from 'zod';
export const getUser = query(z.object({ id: z.string() }), async ({ id }) => {
return await db.user.findById(id);
});
<!-- src/routes/example/+page.svelte -->
<script>
import { getUser } from '../example.remote';
let userQuery = getUser({ id: '123' });
</script>
{#if userQuery.loading}
<p>Loading...</p>
{:else if userQuery.error}
<p>Error: {userQuery.error.message}</p>
{:else if userQuery.current}
<p>User: {userQuery.current.name}</p>
{/if}
// For mutations and updates
export const updateUser = command(
z.object({ id: z.string(), name: z.string() }),
async ({ id, name }) => {
return await db.user.update(id, { name });
}
);
// Progressive enhancement
export const contactForm = form(
z.object({
email: z.string().email(),
message: z.string().min(10)
}),
async (data) => {
await sendEmail(data);
return { success: true };
}
);
Contributions are welcome! If you have ideas for additional patterns or improvements:
git checkout -b feature/amazing-pattern
)git commit -m 'Add amazing pattern'
)git push origin feature/amazing-pattern
)This project is licensed under the MIT License - see the LICENSE file for details.
Made with β€οΈ using SvelteKit