DEV Community

Cover image for Elysia: A Bun-first Web Framework
Urmalveer Singh
Urmalveer Singh

Posted on • Edited on

Elysia: A Bun-first Web Framework

Bun is a fast and lightweight JavaScript runtime that aims to be an alternative to Node.js. It supports features like hot reloading, file system APIs, and native modules. But what if you want to build a web application using Bun? That’s where Elysia comes in.

Elysia is a web framework for Bun that is designed to be performance-focused, simple, and flexible. It has an Express-like syntax, type inference, middleware, file uploads, and plugins for various functionalities like JWT authentication, tRPC, and more. It also claims to be one of the fastest Bun web frameworks, according to its documentation.

In this article, we will explore some of the major features of Elysia and see how to use it to create a simple web application.

elysia

Getting Started

To get started with Elysia, you need to have Bun installed on your system. You can install it using npm:

npm install -g bun
Enter fullscreen mode Exit fullscreen mode

Then, you can use the bun create command to generate a new project using the Elysia template:

bun create elysia myapp
cd myapp
Enter fullscreen mode Exit fullscreen mode

To run the web application in development mode, you can use the bun run dev command:

bun dev
Enter fullscreen mode Exit fullscreen mode

Navigate to localhost:3000 should greet you with "Hello Elysia".

Features

  • Performance - Static code analysis to generate optimized code
  • Unified Type - Shared DTO runtime and compile time validation
  • End-to-end Type Safety - Sync your data both client and server
  • TypeScript - Extensive type system for full TypeScript experience
  • JSX Template Engine - Familiar experience for frontend developer
  • Ergonomic by design - Simple and familiar API for building server

Just Function

One of the core principles of Elysia is that everything is just a function. This means that you can use plain JavaScript functions to define routes, middleware, plugins, and even the Elysia instance itself. This makes Elysia very easy to use, test, and compose.

For example, to define a simple GET route that returns a text response, you can write:

import { Elysia } from 'elysia'

new Elysia()
    .get('/', () => 'Hello World')
    .get('/json', () => ({
        hello: 'world'
    }))
    .listen(3000)
Enter fullscreen mode Exit fullscreen mode

Type Safety

To take a step further, Elysia provide Elysia.t, a schema builder to validate type and value in both runtime and compile-time to create a single source of truth for your data-type.

import { Elysia, t } from 'elysia'

new Elysia()
    .get('/id/:id', ({ params: { id } }) => id, {
        params: t.Object({
            id: t.Numeric()
        })
    })
    .listen(3000)
Enter fullscreen mode Exit fullscreen mode

Standards

Elysia adopts many standards by default, like OpenAPI, and WinterCG compliance, allowing you to integrate with most of the industry standard tools or at least easily integrate with tools you are familiar with.

For instance, as Elysia adopts OpenAPI by default, generating a documentation with Swagger is as easy as adding a one-liner:

import { Elysia, t } from 'elysia'
import { swagger } from '@elysiajs/swagger'

new Elysia()
    .use(swagger())
    .get('/id/:id', ({ params: { id } }) => id, {
        params: t.Object({
            id: t.Numeric()
        })
    })
    .listen(3000)
Enter fullscreen mode Exit fullscreen mode

Plugins

Elysia also supports plugins, which are functions that can extend the functionality of the Elysia instance, the request object, the reply object, or the route methods. For example JWT plugin adds support for using JWT in Elysia handler.

Install with:

bun add @elysiajs/jwt
Enter fullscreen mode Exit fullscreen mode

Then use it:

import { Elysia } from 'elysia'
import { jwt } from '@elysiajs/jwt'

const app = new Elysia()
    .use(
        jwt({
            name: 'jwt',
            secret: 'Fischl von Luftschloss Narfidort'
        })
    )
    .get('/sign/:name', async ({ jwt, cookie: { auth }, params }) => {
        auth.set({
            value: await jwt.sign(params),
            httpOnly: true,
            maxAge: 7 * 86400,
            path: '/profile',
        })

        return `Sign in as ${auth.value}`
    })
    .get('/profile', async ({ jwt, set, cookie: { auth } }) => {
        const profile = await jwt.verify(auth.value)

        if (!profile) {
            set.status = 401
            return 'Unauthorized'
        }

        return `Hello ${profile.name}`
    })
    .listen(8080)
Enter fullscreen mode Exit fullscreen mode

Conclusion

In this article, we have seen how to use Elysia, a Bun-first web framework, to create a simple web application. We have explored some of the major features of Elysia, such as defining routes, using middleware, and using plugins. Elysia is a fast, simple, and flexible web framework that takes full advantage of Bun’s features and APIs.

I hope this article was helpful for you. If you have any feedback or questions, please let me know. 😊

Top comments (15)

Collapse
 
ravavyr profile image
Ravavyr

Ok, i'm all for playing around with these things and trying to improve them, but really, so personal pet projects, heck yea, go for it.
As an industry though, do we need "Another Node" ? and "Another React/Vue/Angular/Svelte/[insert another 20 framework wannabes]"?

Bun claims to be faster than Node and Deno...but the question is:
Do we care? Do we need anything that's faster if they can do sub 100ms responses like any server? Would any human ever notice, or is this just to gain developer bragging rights?

Elysia doesn't add anything new, except another "custom set of javascript syntax rules" to learn because someone felt like it.
I made one too, no one uses it because i frankly didn't go and present it to the dev community as a new standard or "best way" of anything, because i realize it was just "another one for the pile". It's fun and i love using mine, because i know it by heart it's super easy for me, but not for anyone else, and that's what this one feels like too.
At least mine's vanilla js and looks nothing like all the "react-wannabes", and yea i take a little pride in that bit, but that's just my opinion, doesn't matter.

Elysia here feels too much like one of those React-likes, so what will happen is someone in a year or two will run into projects done with Elysia, but because devs are terrible at documenting things, they won't know. They'll see the import calls and some of the methods and go "oh, must React" or "oh, must be Svelte" or whatever, and well, they'll spend a few hours or days going "what the hell? what is this?!" until they finally read the readme i guess or someone goes and points at this obscure thing [unless it magically gets super popular of course] and they will curse to high heaven as they begin inserting hacks to make changes.
Hurray longterm tech support, the one thing no one thinks about when they make these new toys.

Collapse
 
jacques2marais profile image
Jacques Marais

Don't you think that if no "yet-another"s were ever created, the web would never have moved forward in the way that it has and we may have still had only jQuery for the front-end? Just curious :)

Collapse
 
ravavyr profile image
Ravavyr

lol jQuery itself was one hell of an advancement for javascript back when browsers were highly inconsistent.

I fully support "new things" and "innovative things", not "same things that bring nothing new to the table"

Collapse
 
babliobr profile image
Fabio S.

I understand your point, but if all we had was C++ forever everything would have been written in C++. There is such a thing as good enough.

Collapse
 
oggy107 profile image
Urmalveer Singh

i agree... it's human intuition to keep advancing. We always try to find something better.

Collapse
 
andyjessop profile image
Andy Jessop

Looks like Bun are going to spend more time now on stability, which is great news: x.com/jarredsumner/status/17545324...

Collapse
 
oggy107 profile image
Urmalveer Singh

thats great 🔥

Collapse
 
andylarkin677 profile image
Andy Larkin

excellently written! Thank you

Collapse
 
oggy107 profile image
Urmalveer Singh

thanks :>

Collapse
 
610470416 profile image
NotFound404

You may take a look at aex :)

Collapse
 
alxwnth profile image
Alex

Okay now that looks interesting. I definitely gotta try it with my next pet project

Collapse
 
chasm profile image
Charles F. Munat

Where's the link? Shouldn't that be right at the top of the article?

Collapse
 
oggy107 profile image
Urmalveer Singh

elysiajs.com/
its up too :>

Collapse
 
alexroor4 profile image
Alex Roor

this is interesting! I’m a little jealous of your ability to write articles so beautifully