https://github.com/wiesson/svelte-async-remote-fn
Interactive showcase of SvelteKit Remote Functions patterns - query, command, and form patterns with live examples
https://github.com/wiesson/svelte-async-remote-fn
async command demo form query remote-functions shadcn-svelte svelte sveltekit tailwindcss
Last synced: about 2 months ago
JSON representation
Interactive showcase of SvelteKit Remote Functions patterns - query, command, and form patterns with live examples
- Host: GitHub
- URL: https://github.com/wiesson/svelte-async-remote-fn
- Owner: wiesson
- License: mit
- Created: 2025-10-02T09:40:37.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-10-04T11:15:01.000Z (9 months ago)
- Last Synced: 2025-10-04T13:13:05.808Z (9 months ago)
- Topics: async, command, demo, form, query, remote-functions, shadcn-svelte, svelte, sveltekit, tailwindcss
- Language: Svelte
- Homepage: https://svelte-async-remote-fn.vercel.app
- Size: 106 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 SvelteKit Remote Functions - Interactive Showcase
[](https://svelte-async-remote-fn.vercel.app)
[](https://kit.svelte.dev)
[](https://tailwindcss.com)
[](https://opensource.org/licenses/MIT)
> **🔬 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 `` 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
```bash
# 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](http://localhost:5173) to explore the patterns.
## 📖 Pattern Examples
### Query Pattern
```typescript
// 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);
});
```
```svelte
import { getUser } from '../example.remote';
let userQuery = getUser({ id: '123' });
{#if userQuery.loading}
Loading...
{:else if userQuery.error}
Error: {userQuery.error.message}
{:else if userQuery.current}
User: {userQuery.current.name}
{/if}
```
### Command Pattern
```typescript
// 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
```typescript
// 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
- **[SvelteKit 5](https://kit.svelte.dev)** - The fastest way to build Svelte apps
- **[Tailwind CSS 4](https://tailwindcss.com)** - Utility-first CSS framework
- **[shadcn-svelte](https://shadcn-svelte.com)** - Beautiful UI components
- **[Lucide Icons](https://lucide.dev)** - Beautiful & consistent icons
- **[Zod](https://zod.dev)** - TypeScript-first schema validation
## 📚 Learn More
- 📖 [Official Remote Functions Documentation](https://svelte.dev/docs/kit/remote-functions)
- 💬 [SvelteKit Discussion #13897](https://github.com/sveltejs/kit/discussions/13897)
- 📰 [What's New in Svelte: August 2025](https://svelte.dev/blog/whats-new-in-svelte-august-2025)
## 🎨 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](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 →](https://svelte-async-remote-fn.vercel.app)**
Made with ❤️ using SvelteKit