sveltekit-effect-template

SvelteKit Effect Template is a boilerplate that integrates the Effect TypeScript library with SvelteKit, offering two helper functions to run Effect programs on the server and map their success or failure to SvelteKit loader and action responses.

What is SvelteKit Effect Template?

SvelteKit Effect Template is a starter repository that shows how to run Effect programs inside SvelteKit load functions and form actions. Its core function is the pair of helpers runLoader and runAction, which accept an Effect and convert the result or error into the response shape SvelteKit expects. The template runs on SvelteKit, the full-stack framework built on Svelte, and uses Effect for typed, structured error handling and effectful computations. The repository is authored as an open-source example for developers who want to adopt Effect in a SvelteKit project.

What makes SvelteKit Effect Template stand out?

• runLoader helper — Runs an Effect inside a SvelteKit load function and maps the Effect result to a loader response, including error handling.
• runAction helper — Runs an Effect inside a SvelteKit form action and maps the output to an action response, matching the shape SvelteKit actions expect.
• SvelteKit Superforms integration — The template includes SvelteKit Superforms (superforms.rocks) for handling forms with validation and progressive enhancement.
• SvelteKit Flash Message — Adds support for SvelteKit Flash Message (ciscoheat/sveltekit-flash-message) to display one-time notifications after form submissions.
• Shadcn Svelte components — Pre-configured with Shadcn Svelte (shadcn-svelte.com) so you can build with accessible, customizable UI component primitives.
• Minimal setup — The repository is a simple example that avoids unnecessary abstraction, making the integration pattern easy to copy into an existing SvelteKit project.

Who is it for?

SvelteKit Effect Template is aimed at SvelteKit developers who want to use the Effect library for typed errors, dependency injection, and effects-based concurrency on the server. It is also a learning resource for teams evaluating Effect: you can clone it, run npm install, and inspect the two helper functions to see how they bridge Effect and SvelteKit's data loaders. Finally, it suits developers who already build forms with SvelteKit Superforms and want to keep the validation logic inside Effect programs.

What can you do with SvelteKit Effect Template?

• SvelteKit developers migrating to Effect: Replace the promise-returning logic in your load functions and actions with Effect programs using runLoader and runAction, and get typed errors propagating to the UI.
• Form handling with Superforms: Combine Effect's error channel with SvelteKit Superforms to validate and persist form data, then send flash messages after successful actions.
• UI development with Shadcn Svelte: Start a new application that already has Shadcn Svelte installed, so you can quickly assemble buttons, inputs, and dialogs without wiring up styling from scratch.

How does SvelteKit Effect Template work?

1. Clone the repository from GitHub.
2. Run npm install to fetch dependencies (SvelteKit, Effect, Superforms, Flash Message, Shadcn Svelte).
3. Run npm run dev to start the development server.

The runLoader and runAction functions live in the server utilities; they execute an Effect and translate the Exit result into a SvelteKit response, letting you keep the Effect Effect type in your load and action handlers.

FAQ

Is SvelteKit Effect Template free to use?

Yes. The repository is a public GitHub template, so you can clone and use it in your own projects without licensing fees.

What packages does SvelteKit Effect Template include?

The template lists SvelteKit, Effect, SvelteKit Superforms, SvelteKit Flash Message, and Shadcn Svelte. These are the core dependencies that make the effect integration and form handling work.

What is the difference between runLoader and runAction?

runLoader is designed for SvelteKit load functions that run before a page renders, while runAction is for form actions that handle server-side mutations. Both take an Effect and convert its success or error into a SvelteKit response object.

Does this template require prior knowledge of Effect?

Basic familiarity with Effect helps, but the template is intentionally minimal. You can see how runLoader and runAction are implemented in the source and copy the pattern into your own code without deep Effect expertise.