Skip to main content

Introduction to Remix 3

Remix 3 is a runtime-agnostic web framework built entirely on web standards. It provides composable, single-purpose packages that work seamlessly across JavaScript runtimes without modification.

What is Remix 3?

Remix 3 represents a fundamental shift in how web frameworks are designed. Rather than building around bundlers and compilers, Remix 3 embraces web standards to create truly portable code that runs anywhere JavaScript runs.
Remix 3 is currently in alpha at version 3.0.0-alpha.3. While under active development, all packages are usable in production and designed to work independently.

Core Philosophy

Remix 3 follows five key principles:

Build on Web APIs

Use Web Streams, Fetch API, Web Crypto, and other standards instead of runtime-specific APIs. This ensures maximum interoperability.

Religiously Runtime-Agnostic

Every package works seamlessly across Node.js, Bun, Deno, Cloudflare Workers, and other environments without modification.

Demand Composition

Abstractions are single-purpose and replaceable. Every package is useful and documented independently.

Avoid Dependencies

Choose dependencies wisely, wrap them completely, and expect to replace most with custom implementations.

Key Features

Runtime-Agnostic by Design

Remix 3 packages work across all major JavaScript runtimes: Your code is portable by default and future-proof.

Web Standards First

Instead of runtime-specific APIs, Remix 3 leverages server-side web standards:
// ✓ Web Streams API instead of node:stream
const stream = new ReadableStream()

// ✓ Uint8Array instead of Node.js Buffers
const bytes = new Uint8Array([1, 2, 3])

// ✓ Web Crypto API instead of node:crypto
const hash = await crypto.subtle.digest('SHA-256', data)

// ✓ Blob and File instead of bespoke APIs
const file = new File([blob], 'document.pdf')

Composable Architecture

Each package has a single responsibility and can be used standalone: And many more packages designed to work together or independently.

Distributed Cohesively

While every package can be installed individually (e.g., @remix-run/fetch-router), Remix is distributed as a single remix package for convenience:
npm install remix
Then import from unified package exports:
import { createRouter } from 'remix/fetch-router'
import { html } from 'remix/html-template'
import { createHtmlResponse } from 'remix/response/html'

Use Cases

Remix 3 excels at:

Full-Stack Web Apps

Build server-rendered applications with routing, sessions, and form handling built-in.

RESTful APIs

Create type-safe REST APIs with composable middleware and resource-based routing.

Edge Functions

Deploy to Cloudflare Workers or other edge runtimes without code changes.

Microservices

Build portable services that run on any infrastructure.

Simple Example

Here’s a complete Remix 3 application:
import { createRouter } from 'remix/fetch-router'
import { route } from 'remix/fetch-router/routes'
import { createHtmlResponse } from 'remix/response/html'
import { html } from 'remix/html-template'

let routes = route({
  home: '/',
  about: '/about',
})

let router = createRouter()

router.map(routes, {
  actions: {
    home() {
      return createHtmlResponse(html`
        <h1>Welcome to Remix 3</h1>
        <a href="${routes.about.href()}">About</a>
      `)
    },
    about() {
      return createHtmlResponse(html`
        <h1>About Remix 3</h1>
        <p>A composable web framework built on web standards.</p>
      `)
    },
  },
})

// Use with any runtime
let response = await router.fetch(new Request('https://example.com/'))

Next Steps

Installation

Install Remix 3 and set up your development environment

Quick Start

Build your first Remix 3 application in minutes

Core Concepts

Learn about routing, middleware, and composable architecture

Packages

Explore all available Remix 3 packages

Build docs developers (and LLMs) love