The React Framework for building quality apps, fast

Aplos helps you create high-quality React applications with less effort and faster builds.

$bun add aplosjs react react-dom react-router-dom
Routing

File-based routing

Create a file, get a route. No configuration needed. Dynamic parameters, nested directories, and catch-all routes work out of the box.

src/pages/
// Just create files in src/pages/
// Routes are generated automatically

src/pages/
  index.tsx        →  /
  about.tsx        →  /about
  blog/
    index.tsx      →  /blog
    [slug].tsx     →  /blog/:slug
Layouts

Nested layouts

Share UI across pages with nested layouts. Add a _layout.tsx file to any directory and it wraps all pages within it automatically.

src/pages/_layout.tsx
// src/pages/_layout.tsx
import { Outlet } from 'aplos/navigation';

export default function Layout() {
  return (
    <div className="app">
      <nav>...</nav>
      <Outlet />
      <footer>...</footer>
    </div>
  );
}
Performance

Lightning-fast builds

Powered by Rspack, a Rust-based bundler. Hot Module Replacement in dev, optimized production builds with code splitting, tree shaking, and the React Compiler.

Terminal
// Lightning-fast builds with Rspack
// React Compiler enabled by default

$ aplos build

  Built in 320ms
  Output: public/dist/
  Chunks: 3 (vendor, common, app)
  CSS: extracted & minified
Developer Experience

TypeScript & React 19

First-class TypeScript support. Built on React 19 with the React Compiler enabled by default. Use the latest hooks, patterns, and best practices.

src/pages/blog/[slug].tsx
// src/pages/blog/[slug].tsx
import { useParams } from 'aplos/navigation';
import Head from 'aplos/head';

export default function BlogPost() {
  const { slug } = useParams();

  return (
    <>
      <Head>
        <title>{slug}</title>
      </Head>
      <article>...</article>
    </>
  );
}
Static

"use static" pre-rendering

Pre-render any page at build time with a single directive. Add "use static" at the top of a page and it gets rendered to HTML during the build.

src/pages/about.tsx
// src/pages/about.tsx
"use static";

export default function About() {
  return (
    <div>
      <h1>About us</h1>
      <p>Pre-rendered at build time.</p>
    </div>
  );
}

Ready to build?

Get started in seconds. Build your next React app with Aplos.

Get started