svelte-async-remote-fn Svelte Themes

Svelte Async Remote Fn

Interactive showcase of SvelteKit Remote Functions patterns - query, command, and form patterns with live examples

πŸš€ SvelteKit Remote Functions - Interactive Showcase

πŸ”¬ 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.

🎯 What are Remote Functions?

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:

  • πŸ”’ Safely accessing server-only resources (environment variables, databases)
  • 🎨 Writing full-stack features in a single file
  • πŸ”„ Automatic data fetching and caching
  • πŸ“ Progressive form enhancement
  • ⚑ Built-in optimizations (batching, lazy discovery)

🎨 Live Patterns

This demo showcases 9 different patterns for working with Remote Functions:

πŸ“Š Query Patterns

  • Top-level await - Using {#await query()} directly in templates
  • Direct .current access - Accessing query().current for manual control
  • Derived reactive queries - Using $derived() for reactive data
  • Manual refresh - Calling .refresh() on demand

🎬 Command Patterns

  • Command pattern - Using command() for mutations and updates

πŸ“ Form Patterns

  • Form pattern - Progressive enhancement with form()

πŸ›‘οΈ Advanced Patterns

  • Error boundary - Using <svelte:boundary> to catch errors
  • Dynamic import with await - Lazy-loading components that use async data
  • Dynamic import (no # syntax) - Testing {await} without hash symbol

πŸš€ Quick Start

# 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.

πŸ“– Pattern Examples

Query Pattern

// 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}

Command Pattern

// 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 });
    }
);

Form Pattern

// 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 };
    }
);

πŸ› οΈ Tech Stack

πŸ“š Learn More

🎨 Features

  • βœ… All major patterns covered with live examples
  • βœ… Type-safe end-to-end with TypeScript
  • βœ… Responsive design with Tailwind CSS
  • βœ… Beautiful UI using shadcn-svelte components
  • βœ… Toast notifications for user feedback
  • βœ… Error handling demonstrations
  • βœ… Progressive enhancement examples

🀝 Contributing

Contributions are welcome! If you have ideas for additional patterns or improvements:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-pattern)
  3. Commit your changes (git commit -m 'Add amazing pattern')
  4. Push to the branch (git push origin feature/amazing-pattern)
  5. Open a Pull Request

πŸ“ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • SvelteKit team for creating Remote Functions
  • shadcn for the amazing component library
  • The Svelte community for continuous inspiration

View Live Demo β†’

Made with ❀️ using SvelteKit

Top categories

Loading Svelte Themes