A web framework for building anything

Remix gives you the power and tools to build anything you can dream of. To get started, just npx remix run and you're off to the races.

Cohesive frontend and backend

Closing the gap between the initial spark and shipping

Remix is the world's first truly full-stack JavaScript framework. It includes a server, router, data layer, UI components, testing, and much more. Everything you need to go from idea to launch in a single dependency.

Ready to build right out of the box

Built for humans and models

Remix ships with skills that help your AI agent learn the API and follow best practices. Whether you let the agent write all the code, or you tweak it by hand, Remix just works. It's one unified stack that speaks Remix end to end, not a patchwork of tools. When you want to change something, explain it in plain language. The framework stays out of your way.

The next generation of UI

High-performance components in plain, beautiful JavaScript

Remix components build on web primitives like EventTarget and avoid the runtime semantics of React hooks, giving you back normal JavaScript control flow and execution. This works seamlessly with the web, including web components and third-party libraries. Remix also provides native mixins for the DOM that make it easier than ever to compose and apply complex behavior on native platform elements.

import { type Handle, on } from 'remix/component'
import { ui, Glyph } from 'remix/ui'
import { tooltip } from 'remix/ui/tooltip'

function CopyToClipboard(handle: Handle) {
  let state: 'idle' | 'copied' | 'error' = 'idle'

  return (props: { url: string }) => {
    let label = state === 'idle' ? 'Copy to clipboard' : state === 'copied' ? 'Copied' : 'Error'

    return (
      <button
        aria-label={label}
        aria-live="polite"
        mix={[
          ui.button,
          tooltip(label),
          on('click', async (event) => {
            try {
              await navigator.clipboard.writeText(props.url)
              if (handle.signal.aborted) return
            } catch (error) {
              state = 'error'
              handle.update()
              return
            }

            state = 'copied'
            handle.update()
            setTimeout(() => {
              if (handle.signal.aborted) return
              state = 'idle'
              handle.update()
            }, 2000)
          }),
        ]}
      >
        {state === 'copied' ? <Glyph name="check" /> : <Glyph name="clipboard" />}
      </button>
    )
  }
}

One framework for any kind of project

A store overnight. A business in a weekend. The app you always wanted to ship.

Whatever you want to build, Remix can meet the project where it is. Start something new, grow it into a business, or bring Remix into an app that already exists. One technology, used in whatever way the project needs.

Describe the destination

Building with Remix can take you there

Remix 3 is currently available as a beta release.

Watch the repo

Subscribe to our newsletter

Stay in the loop

Once a month, we write about everything in the world of Remix. Sign up to be notified about progress on Remix 3. No spam. Unsubscribe anytime.