Skip to content

End-to-End Type Safety ​

Imagine you have a toy train set.

Each piece of the train track has to fit perfectly with the next one, like puzzle pieces.

End-to-end type safety is like making sure all the pieces of the track match up correctly so the train doesn't fall off or get stuck.

For a framework to have end-to-end type safety means you can connect client and server in a type-safe manner.

Elysia provide end-to-end type safety without code generation out of the box with RPC-like connector, Eden

Others framework that support e2e type safety:

  • tRPC
  • Remix
  • SvelteKit
  • Nuxt
  • TS-Rest

Elysia allows you to change the type on the server and it will be instantly reflected on the client, helping with auto-completion and type-enforcement.

Eden ​

Eden is a RPC-like client to connect Elysia end-to-end type safety using only TypeScript's type inference instead of code generation.

Allowing you to sync client and server types effortlessly, weighing less than 2KB.

Eden is consists of 2 modules:

  1. Eden Treaty (recommended): an improved version RFC version of Eden Treaty
  2. Eden Fetch: Fetch-like client with type safety.

Below is an overview, use-case and comparison for each module.

Eden Treaty is an object-like representation of an Elysia server providing end-to-end type safety and a significantly improved developer experience.

With Eden Treaty we can connect interact Elysia server with full-type support and auto-completion, error handling with type narrowing, and creating type safe unit test.

Example usage of Eden Treaty:

typescript
import { treaty } from '@elysiajs/eden'
import type { App } from './server'

const app = treaty<App>('http://localhost:8080')

// Call [GET] at '/'
const { data, error } = app.index.get()

// Call [POST] at '/nendoroid/:id'
const { data: nendoroid, error } = await app.nendoroid({ id: 1895 }).put({
    name: 'Skadi',
    from: 'Arknights'
})
import { treaty } from '@elysiajs/eden'
import type { App } from './server'

const app = treaty<App>('http://localhost:8080')

// Call [GET] at '/'
const { data, error } = app.index.get()

// Call [POST] at '/nendoroid/:id'
const { data: nendoroid, error } = await app.nendoroid({ id: 1895 }).put({
    name: 'Skadi',
    from: 'Arknights'
})

Eden Fetch ​

A fetch-like alternative to Eden Treaty for developers that prefers fetch syntax.

typescript
import { edenFetch } from '@elysiajs/eden'
import type { App } from './server'

const fetch = edenFetch<App>('http://localhost:8080')

const data = await fetch('/name/:name', {
    method: 'POST',
    params: {
        name: 'Saori'
    },
    body: {
        branch: 'Arius',
        type: 'Striker'
    }
})
import { edenFetch } from '@elysiajs/eden'
import type { App } from './server'

const fetch = edenFetch<App>('http://localhost:8080')

const data = await fetch('/name/:name', {
    method: 'POST',
    params: {
        name: 'Saori'
    },
    body: {
        branch: 'Arius',
        type: 'Striker'
    }
})

NOTE

Unlike Eden Treaty, Eden Fetch doesn't provide Web Socket implementation for Elysia server