Overview

Webroute rethinks server-side apps, "from the route up".

As the name suggests, webroutes are concerned with the routes of an app first and foremost. A "webroute" is a self-contained and portable request handler, compatible with any web-standard runtime or framework.

Self-contained: Webroutes are "self-contained" in that any middleware, validation, paths, methods or other information are stored at the route - not the app or router level. In turn, we can bring our routes into any framework or runtime.

Portable: The resulting webroute is a bog-standard request handler, built on WinterCG web-standards. This makes them the most portable and future-proofed way to define endpoints for your next app.

Webroute is packaged as a collection of libraries which culminate in a fully-fledged web framework with all the typical affordances, and more:

• End-to-end type-safety
• I/O validation (BYO schema library)
• Type-safe middleware
• Automatic and configurable OpenAPI specs
• Async
• Web standard Request and Response

Packages are independent of one another, minimising lock-in and maximising visibility and flexibility.

Get Started

The fastest way to get started with webroute is via the create-webroute-app CLI.

npx create-webroute-app webroute-app

Introduction

Webroute has several packages, but chief among them is @webroute/route. Unlike traditional frameworks which rely on a router to orchestrate a web application, webroute packs everything into the route itself, by leveraging bog-standard JavaScript composition.

As a result, every route is a standalone web request handler which can be used anywhere the web-standard Request and Response is available.

Example Usage

import { route } from "@webroute/route";
 
const myRoute = route("/user/:id")
  .use(authMiddleware)
  .params(z.object({ id: z.string() }))
  .handle(async () => {
    // ...do work
  });

This simple route is now fully contained, in the form (req: Request) => Response. As such, it can be used with virtually any framework or runtime, with no modification required.

The route builder only has a handful of methods for building fully-fledged route handlers. The API is intentionally simple, but don't let that fool you – it's rather powerful.

View the route guide

Other Packages

On top of the route builder, webroute offers packages for routing incoming requests to handlers, defining and emitting OpenAPI specs and creating type-safe API clients, among other things.

These packages have all been designed to be useful in isolation, so you won't have to adopt an entire ecosystem or paradigm to use any one of them.

Usage with Next.js, Remix et al.

While so-called "meta-frameworks" such as Next.js offer basic API route capabilities, it's common to layer a framework like Hono, express or tRPC on top for more complex functionality.

However, each of these approaches require packing all routes into a single entrypoint. Consequently, we no longer benefit from filesystem routing and have introduced another routing paradigm to our app.

Webroute makes no assumptions about routing whatsoever - a route handler has everything it needs. This makes it the best approach to building complex APIs within your existing meta-frameworks.

Learn more about using webroute with {Next.js, Remix, SolidStart, SvelteKit,...}.

Usage with Bun, Deno, Node

Webroute is also capable of working standalone or within existing backend frameworks and runtimes.

When necessary, the incredibly straightforward @webroute/router package can be introduced to map incoming requests to your app's routes.

Learn more about standalone usage.