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.
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 66+ providers, a visual page builder, 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.
Absolute Studio
A visual page builder with drag-and-drop blocks, live preview, and asset management: no code required.
#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:
1// absolute.config.ts : mix frameworks in one app
2import { defineConfig } from '@absolutejs/absolute';
3
4export default defineConfig({
5 reactDirectory: './src/react',
6 angularDirectory: './src/angular',
7 svelteDirectory: './src/svelte',
8 htmxDirectory: './src/htmx'
9});1// Each route can use a different framework
2import { handleReactPageRequest } from '@absolutejs/absolute/react';
3import { handleAngularPageRequest } from '@absolutejs/absolute/angular';
4import { handleSveltePageRequest } from '@absolutejs/absolute/svelte';
5import { handleHTMXPageRequest } from '@absolutejs/absolute';
6
7new Elysia()
8 .use(absolutejs)
9 .get('/', () => handleReactPageRequest(Home, asset(manifest, 'HomeIndex')))
10 .get('/admin', () => handleAngularPageRequest(adminImporter, adminPage, adminIndex))
11 .get('/dashboard', () => handleSveltePageRequest(Dashboard, dashPage, dashIndex))
12 .get('/widget', () => handleHTMXPageRequest('./build/pages/widget.html'))
13 .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.
1// Types flow from database → server → client automatically
2
3// 1. Define schema once
4export const posts = pgTable('posts', {
5 id: serial('id').primaryKey(),
6 title: varchar('title').notNull(),
7 authorId: integer('author_id').references(() => users.id)
8});
9export type Post = typeof posts.$inferSelect;
10
11// 2. Server handler : TypeScript enforces the props match
12.get('/posts/:id', async ({ params }) => {
13 const post = await db.query.posts.findFirst({ where: eq(posts.id, params.id) });
14 return handleReactPageRequest(PostPage, asset(manifest, 'PostPageIndex'), { post });
15})
16
17// 3. Component receives typed props : no manual type wiring
18export const PostPage = ({ post }: { post: Post }) => (
19 <h1>{post.title}</h1> // Full autocomplete, compile-time errors
20);#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 66+ 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.
Absolute Studio
A visual page builder that runs alongside your dev server. Drag-and-drop blocks for headings, text, images, columns, and more. Edit styles visually, manage assets, and preview changes live: then drop into the Monaco code editor when you need full control.
elysia-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.
@absolutejs/eslint
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.
1// absolute.config.ts
2import { defineConfig } from '@absolutejs/absolute';
3
4export default defineConfig({
5 reactDirectory: './src/frontend'
6});1// src/backend/server.ts
2import { prepare, asset, networking } from '@absolutejs/absolute';
3import { handleReactPageRequest } from '@absolutejs/absolute/react';
4import { Elysia } from 'elysia';
5import { Home } from '../frontend/pages/Home';
6
7const { absolutejs, manifest } = await prepare();
8
9new Elysia()
10 .use(absolutejs)
11 .get('/', () =>
12 handleReactPageRequest(Home, asset(manifest, 'HomeIndex'))
13 )
14 .use(networking);#Next Steps
- Quickstart: Build a real app with a database, typed props, and an API in 5 minutes
- Core Concepts: Learn how SSR, the build system, and routing work
- Frontends: Deep dives into React, Angular, Svelte, Vue, HTML, and HTMX