AbsoluteJS

Routing & Handlers

Define routes with Elysia and render pages with AbsoluteJS page handlers.

#Basic Routing

Routes are defined using Elysia's routing methods. Each route handler returns a page handler call:

Elysia Type-Safe Context

Context properties are fully typed based on your route's TypeBox schema

.get('/users/:id', (context) => { ... })

params

Path parameters extracted from URL e.g. /user/:id

params.id

query

Query string values after the ? in URL e.g. ?limit=10

query.limit

body

Request payload JSON, form data, or file uploads

body.email

headers

HTTP request headers Content-Type, Auth, User-Agent, etc.

headers.auth

cookie

Reactive cookie store Read/write cookies via .value property

cookie.session

path

URL pathname The resource path being requested

/users/123

set

Response config Modify status and response headers

set.status = 201

status

Return with status Enables TypeScript type narrowing

return status(201)

redirect

Redirect to URL Supports custom status (301, 302)

redirect('/login')

request

Web Standard Request object for low-level access

request.url

store

Global mutable state for Elysia instance Shared across reqs

store.db

...derived

Custom properties added via .derive() or .state()

user, auth, etc.
TS
import { Elysia } from 'elysia';
import { prepare, asset } from '@absolutejs/absolute';
import { handleReactPageRequest } from '@absolutejs/absolute/react';

const { absolutejs, manifest } = await prepare();

new Elysia()
  .use(absolutejs)
  .get('/', () => handleReactPageRequest({ Page: Home, index: asset(manifest, 'HomeIndex') }))
  .get('/about', () => handleReactPageRequest({ Page: About, index: asset(manifest, 'AboutIndex') }))
  .get('/contact', () => handleReactPageRequest({ Page: Contact, index: asset(manifest, 'ContactIndex') }))
  .listen(3000);

#Route Parameters

Dynamic route segments are defined with colons and accessed via params:

TS
// Dynamic route parameters
.get('/users/:id', ({ params: { id } }) =>
  handleReactPageRequest({
    Page: UserProfile,
    index: asset(manifest, 'UserProfileIndex'),
    props: { userId: id }
  })
)

// Multiple parameters
.get('/posts/:category/:slug', ({ params: { category, slug } }) =>
  handleReactPageRequest({
    Page: Post,
    index: asset(manifest, 'PostIndex'),
    props: { category, slug }
  })
)

#Query Parameters

Access query string parameters via the query object:

TS
// Query string parameters
.get('/search', ({ query: { q, page } }) =>
  handleReactPageRequest({
    Page: Search,
    index: asset(manifest, 'SearchIndex'),
    props: {
      searchTerm: q,
      currentPage: Number(page) || 1
    }
  })
)

// URL: /search?q=hello&page=2

#Cookies & Headers

Access cookies and headers directly in your route handlers:

TS
// Access cookies and headers
.get('/dashboard', async ({ cookie, headers }) => {
  const session = cookie.session?.value;
  const authHeader = headers.authorization;

  const user = await validateSession(session);

  return handleReactPageRequest({
    Page: Dashboard,
    index: asset(manifest, 'DashboardIndex'),
    props: { user }
  });
})

#Elysia Patterns

Your AbsoluteJS server IS an Elysia server. All Elysia routing patterns work including groups, guards, and type derivation:

TS
// AbsoluteJS uses Elysia routing: all Elysia patterns work
new Elysia()
  // Route groups
  .group('/api', (app) =>
    app
      .get('/users', getUsers)
      .post('/users', createUser)
  )
  // Guards and middleware
  .derive(({ cookie }) => ({
    user: validateCookie(cookie)
  }))
  // Type-safe route parameters with schema
  .get('/users/:id', ({ params }) => getUser(params.id), {
    params: t.Object({ id: t.String() })
  })

#Page Handlers

Each frontend framework has its own page handler with a consistent pattern:

TS
// All page handlers follow this pattern:
// import from '@absolutejs/absolute/react'
handleReactPageRequest({ Page, index, props?, ...options })

// import from '@absolutejs/absolute/svelte'
handleSveltePageRequest<typeof Page>({ pagePath, indexPath, props?, ...options })

// import from '@absolutejs/absolute/vue'
handleVuePageRequest<typeof Page>({ pagePath, indexPath, headTag?, props?, ...options })

// import from '@absolutejs/absolute/angular'
handleAngularPageRequest<typeof PageModule>({ pagePath, indexPath, headTag?, props?, ...options })

// import from '@absolutejs/absolute'
handleHTMLPageRequest(htmlPath)
handleHTMXPageRequest(htmxPath)

See the Page Handlers reference for detailed documentation on each handler.