AbsoluteJS

AbsoluteJS

The full-stack TypeScript framework that server-side renders React, Angular, Svelte, Vue, HTML, and HTMX from a single Elysia server: with universal HMR, end-to-end type safety, and a visual studio for no-code editing.

BASH
bun create absolutejs my-app

#What is AbsoluteJS?

Most meta-frameworks lock you into one UI library. AbsoluteJS doesn't. It's a platform built on Bun and Elysia that gives every frontend framework the same first-class SSR, hydration, and HMR: so you can pick the right tool for each page and serve them all from one server.

Your landing page can be React, your admin panel Angular, your interactive widgets HTMX, and your docs plain HTML. One build, one deploy, one codebase. Types flow from your database schema through your server handlers into your components with zero code generation. TypeScript does all the work.

AbsoluteJS isn't just a renderer. It ships with OAuth authentication for 78 providers, the hosted AbsoluteJS.ai Studio, scoped per-user server state, an opinionated ESLint config, and a project CLI. Everything you need to go from idea to production.

#Key Features

Universal SSR

Render React, Angular, Svelte, Vue, HTML, and HTMX from a single server with consistent patterns. Streaming HTML, automatic hydration, and props injection for every framework.

Universal HMR

Fast hot module replacement across all frameworks. DOM state preservation, CSS-only updates, and framework-aware reloads: your form inputs and scroll position survive every edit.

End-to-End Type Safety

Types flow from your database schema through server handlers to frontend components with zero code generation. Eden Treaty gives your client full type inference from your API.

AbsoluteJS.ai Studio

Build, preview, and manage AbsoluteJS applications through Studio on the hosted AbsoluteJS.ai platform.

#Framework Support

Every framework gets the same treatment: server-side rendering, client hydration, HMR, and type-safe props. Pick the best tool for each route.

One Framework, Any Frontend

Single Build

One build() for all frameworks

Unified Handlers

Same pattern everywhere

Type-Safe Props

End-to-end TypeScript

React

Streaming SSR with React Refresh HMR

Angular

Zoneless SSR with AOT/JIT compilation

Svelte

Compiled SSR with CSS-only hot updates

Vue

SSR with template-aware HMR

HTML

Static pages with asset hashing

HTMX

Server-driven UI with scoped state

#Multi-Framework in One App

Use different frameworks on different routes. Your config declares which directories contain which frameworks, and AbsoluteJS builds them all in a single pass:

TS
// absolute.config.ts : mix frameworks in one app
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  reactDirectory: './src/react',
  angularDirectory: './src/angular',
  svelteDirectory: './src/svelte',
  htmxDirectory: './src/htmx'
});
TS
// Each route can use a different framework
import { handleReactPageRequest } from '@absolutejs/absolute/react';
import { handleAngularPageRequest } from '@absolutejs/absolute/angular';
import { handleSveltePageRequest } from '@absolutejs/absolute/svelte';
import { handleHTMXPageRequest } from '@absolutejs/absolute';

new Elysia()
  .use(absolutejs)
  .get('/', () => handleReactPageRequest({ Page: Home, index: asset(manifest, 'HomeIndex') }))
  .get('/admin', () => handleAngularPageRequest<typeof AdminPage>({ pagePath: adminPage, indexPath: adminIndex }))
  .get('/dashboard', () => handleSveltePageRequest<typeof Dashboard>({ pagePath: dashPage, indexPath: dashIndex }))
  .get('/widget', () => handleHTMXPageRequest('./build/pages/widget.html'))
  .use(networking);

#Type Safety Without Codegen

Define your schema once. Drizzle infers the types, your server handler passes them as props, and your component receives them: all checked at compile time. No generated files, no build step for types, no drift.

TS
// Types flow from database → server → client automatically

// 1. Define schema once
export const posts = pgTable('posts', {
  id: serial('id').primaryKey(),
  title: varchar('title').notNull(),
  authorId: integer('author_id').references(() => users.id)
});
export type Post = typeof posts.$inferSelect;

// 2. Server handler : TypeScript enforces the props match
.get('/posts/:id', async ({ params }) => {
  const post = await db.query.posts.findFirst({ where: eq(posts.id, params.id) });
  return handleReactPageRequest({ Page: PostPage, index: asset(manifest, 'PostPageIndex'), props: { post } });
})

// 3. Component receives typed props : no manual type wiring
export const PostPage = ({ post }: { post: Post }) => (
  <h1>{post.title}</h1>  // Full autocomplete, compile-time errors
);

#Universal HMR

Every framework gets fast hot module replacement with no configuration. AbsoluteJS detects what changed and picks the minimal update strategy: CSS-only swaps, template-only patches, or full component reloads. Form inputs, scroll positions, and open menus are preserved across edits.

React Refresh

Component-level updates without losing state. Edit a component and only that component re-renders: useState, useRef, and context all survive. Powered by React's official Fast Refresh protocol.

Angular View Transitions

CSS-only edits hot-swap instantly. For template and logic changes, the View Transitions API captures a screenshot while the app re-bootstraps with the new module behind it. Component state is restored via ng.getComponent and the browser crossfades. Zero flicker.

Svelte Smart Updates

AbsoluteJS detects whether you changed styles, markup, or logic. Style-only edits swap the CSS without touching the DOM. Template changes patch surgically. Full reloads only happen when component logic changes.

Vue Change Detection

HMR metadata tracks what changed in each Single File Component: style-only, template-only, script, or full. Vue's HMR API applies the minimal update, keeping reactive state and computed properties intact.

HTML & HTMX Reload

Scripts and stylesheets are wrapped with HMR hooks at build time. When you edit an HTML or HTMX file, only the changed scripts or styles reload: no full page refresh needed.

DOM State Preservation

Across all frameworks, AbsoluteJS snapshots form values, checkbox states, select options, scroll positions, and open details/dialog elements before each update and restores them after.

#Ecosystem

AbsoluteJS ships with everything you need to go from idea to production. Authentication, linting, state management, scaffolding, and a visual editor: all designed to work together.

@absolutejs/auth

Drop-in OAuth authentication supporting 78 providers including Google, GitHub, Discord, and Apple. Handles PKCE, OpenID Connect, token refresh, and session management. Integrates with Elysia as a plugin: one .use() call to protect your routes.

AbsoluteJS.ai Studio

The hosted AbsoluteJS.ai platform includes Studio for visually building, previewing, and managing AbsoluteJS applications without distributing Studio as a standalone package.

@absolutejs/scoped-state

Per-user server state that's isolated between visitors. Each user gets their own store keyed to their session: perfect for HTMX apps where the server manages UI state. Supports a preserve option to survive page navigations and a reset to clear state.

eslint-plugin-absolute

20+ custom lint rules designed for AbsoluteJS projects. Catches common SSR mistakes like inline prop types, unnecessary divs, deeply nested JSX, and short variable names. Ships with Prettier and Biome support out of the box.

create-absolutejs

Project scaffolding CLI that sets up your directory structure, installs dependencies, configures TypeScript, and wires up your chosen frontend framework and database. One command to go from nothing to a running app.

AbsoluteJS CLI

Development and production commands built in. absolute dev starts an HMR server with an interactive terminal. absolute start builds and runs for production. Includes formatting, linting, and system info commands.

#Quick Example

A minimal AbsoluteJS app with React includes three pieces: config, server, and done.

TS
// absolute.config.ts
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  reactDirectory: './src/frontend'
});
TS
// src/backend/server.ts
import { prepare, asset, networking } from '@absolutejs/absolute';
import { handleReactPageRequest } from '@absolutejs/absolute/react';
import { Elysia } from 'elysia';
import { Home } from '../frontend/pages/Home';

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

new Elysia()
  .use(absolutejs)
  .get('/', () =>
    handleReactPageRequest({ Page: Home, index: asset(manifest, 'HomeIndex') })
  )
  .use(networking);

#Next Steps

QuickstartBuild a real app with a database, typed props, and an API in 5 minutes
Core ConceptsLearn how SSR, the build system, and routing work
FrontendsDeep dives into React, Angular, Svelte, Vue, HTML, and HTMX

Current package surface

What ships today

@absolutejs/absolutev0.20.0-beta · betaFrontend & UXnpmSource
39entry points281symbols6subpackages

Import surface · click to copy

80 symbols
ConventionKindtypePermalinkSource
TS
type ConventionKind = 'error' | 'loading' | 'not-found';
Exported from @absolutejs/absolute

Outcomes

What you can build

One full-stack runtime

Build type-safe Bun and Elysia applications with server rendering, streaming, islands, framework adapters, asset handling, and production compilation in one toolchain.

Composable application architecture

Compose route plugins and package manifests so application features remain independently testable and discoverable by the build system.

Hardening checklist

Production guidance

Ship reproducible artifactsCompile immutable production artifacts with environment-independent route composition, explicit assets, health checks, and deployment configuration supplied at the appropriate boundary.

Follow in order

Troubleshooting path

1
Build or runtime mismatch
Run the CLI doctor and inspect commands before deployment. Verify the build manifest, route composition, static assets, environment configuration, and compiled runtime target.