Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions docs/integrations/sveltekit.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,3 +74,58 @@ export const fallback: RequestHandler = ({ request }) => app.handle(request)
This will ensure that Elysia routing will work properly in any location you place it.

Please refer to [SvelteKit Routing](https://kit.svelte.dev/docs/routing#server) for more information.

## Using SvelteKit Hooks

You can also integrate Elysia with SvelteKit using the `elysia-sveltekit` adapter, which allows you to bridge Elysia directly into SvelteKit's server hooks.

### Installation

```bash
bun add elysia-sveltekit
```

### 1. Initialize the Adapter & Define your API

Create your Elysia application and define the context mapping. The `sveltekit` adapter returns both the Elysia `app` and the SvelteKit `hook`.

```typescript
// src/lib/server/api.ts
import { sveltekit } from "elysia-sveltekit";

// 1. Define the context you want to inject
interface MyContext {
locals: App.Locals;
platform: App.Platform;
}
Comment thread
pyoner marked this conversation as resolved.

// 2. Initialize the adapter
export const { app, hook: handleApi } = sveltekit<MyContext, "/api">(
// Context mapping: maps SvelteKit's RequestEvent to Elysia's context
(event) => ({
locals: event.locals,
platform: event.platform,
}),
{ prefix: "/api" }, // The path prefix your Elysia app will listen on
);

// 3. Build your API endpoints
export const api = app.get("/hello", ({ locals, platform }) => {
return {
message: "Hello from Elysia!",
user: locals.user, // Strongly typed!
};
});
```

### 2. Connect the SvelteKit Hook

In your SvelteKit `hooks.server.ts`, simply export the generated `hook`.

```typescript
// src/hooks.server.ts
import { handleApi } from "$lib/server/api";
import type { Handle } from "@sveltejs/kit";

export const handle: Handle = handleApi;
```
1 change: 1 addition & 0 deletions docs/plugins/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ Here are some of the official plugins maintained by the Elysia team:
- [ModernCSRF](https://github.com/auto-medica-labs/modern-csrf) - A lightweight, token-free CSRF protection middleware for ElysiaJS
- [elysia-wide-event](https://github.com/choiexe1/elysia-wide-event) - Wide event logging plugin for structured request-level observability.
- [elysia-beta-headers](https://github.com/P0u4a/elysia-beta-headers) - Elysia plugin for gating your app's beta/experimental features via type-safe API headers
- [Elysia SvelteKit](https://github.com/pyoner/elysia-sveltekit) - adapter for bridging Elysia with SvelteKit hooks

## Complementary projects:

Expand Down