remix

Minor Changes

• Mixins created through remix/component can use createMixin(setup, { ssr: false }) to skip setup and render on the server while keeping browser behavior and hydration. Server rendering remains enabled by default. The option is intended for behavior that does not contribute to the server HTML.

• Server rendering with remix/component is about twice as fast as in 3.0 and uses less memory, with no code changes. Rendering a 48-product listing page with renderToString() takes 244 µs instead of 513 µs (Node.js 24.18 on an Apple M5 Pro, median of 5 fresh-process runs, identical HTML output). Under sustained HTTP load on a 24-product store page, assembling each response with a single join lowers the server's resident memory after load from 793 MiB to 527 MiB (see #12006, #12016, #12018, and #12020).

  Apps that render client entries also benefit from getScriptEntry() caching in remix/assets: a warm lookup takes about 3 µs instead of 210 µs (see #12005). See the @remix-run/component and @remix-run/assets changelogs for details.

• Use frame.reload({ src, method, encType, body }) from remix/component to reload another source or submit data and render the response without changing browser history. FormData follows GET query and POST encoding defaults, with multipart and plain-text encodings available.

• Prefetch frame HTML and assets with data-rmx-prefetch="intent", data-rmx-prefetch="viewport", or the imperative prefetch() API from remix/component. Both link modes support named frames and source overrides, respect Save-Data, and skip slow-2g/2g connections. See the prefetching guide for usage, customization, and caching behavior.

• Opt out of automatic focus resets during intercepted navigation with resetFocus: 'manual' in navigate() and link(), or data-rmx-reset-focus="manual" on links, forms, and submit buttons. Scroll and focus controls in remix/component now accept the Navigation API values "after-transition" (the default) and "manual"; existing boolean values remain supported.

• remix/file-storage/s3 now streams files to S3 with multipart uploads in storage.set(), so large files no longer need to fit in memory. A new partSize option controls the size of each part. See the @remix-run/file-storage-s3 changelog for details.

• Add remix/multipart-parser/future, remix/form-data-parser/future, and remix/middleware/form-data/future, which stream multipart parts and file uploads instead of buffering them in memory. Future APIs are not stable and may change in any release, but they are a good indication of where these packages will land in Remix's next major release.

  In our benchmarks, parsing a request with a 100 MiB file upload takes 37 ms instead of 68 ms, the upload handler is called after 0.2 ms instead of 45 ms, and peak memory grows by 29 MiB instead of 396 MiB. Small forms perform the same as before. See the @remix-run/form-data-parser changelog for the full comparison.

  To try it in an app, import formData() from the /future entrypoint. Its options are the same as the stable middleware:

  -import { formData } from 'remix/middleware/form-data'
  +import { formData } from 'remix/middleware/form-data/future'
  
   export const router = createRouter({
     middleware: [
       formData({
         async uploadHandler(upload) {
           let key = crypto.randomUUID()
           await storage.set(key, upload)
           return key
         },
       }),
     ],
   })

  Each upload streams from the request body, so read it inside uploadHandler (for example by passing it to storage.set()). It can be read only once, upload.size is not available until it has been read, and upload.slice() is not supported. Uploads the handler returns unread are read into a regular File. Paired with the new streaming set() in remix/file-storage/s3, large uploads go straight to S3 without being held in memory.

  If your app handles file uploads, please give these entrypoints a try and tell us how it goes in GitHub Discussions. We'd especially like to hear about anything that breaks, behaves unexpectedly, or feels awkward, since that feedback will shape the next major release.

• The remix/* entrypoints now preserve default exports from their underlying packages, including the callable assertion helper from remix/assert and SuperHeaders from remix/headers.

  Added package.json exports:

  • remix/form-data-parser/future to re-export APIs from @remix-run/form-data-parser/future

  • remix/middleware/form-data/future to re-export APIs from @remix-run/form-data-middleware/future

  • remix/multipart-parser/future to re-export APIs from @remix-run/multipart-parser/future

Patch Changes

• Ensure client entries requested after an HMR update use current cache-busting URLs.

• Include unsafeHTML() guidance in remix/component raw HTML prop errors (innerHTML, srcDoc, and srcdoc) and clarify that outerHTML is not supported on host elements.

• Bumped @remix-run/* dependencies:

  • assets@1.0.1

  • cli@1.0.1

  • component@1.1.0

  • compression-middleware@1.0.1

  • cookie@1.0.1

  • cors-middleware@1.0.1

  • fetch-proxy@1.0.1

  • file-storage-s3@1.1.0

  • form-data-middleware@1.1.0

  • form-data-parser@1.1.0

  • headers@1.0.1

  • multipart-parser@1.1.0

  • render-middleware@1.0.1

  • response@1.0.1

  • session-middleware@1.0.1

  • spa@1.0.1

  • static-middleware@1.0.1

  • tar-parser@1.0.1

Major Changes

• breaking

  Most existing remix/ui usage now moves to remix/component. The component runtime, JSX runtimes, server rendering, testing helpers, styles, and general-purpose mixins are available from the renamed entrypoints:

  -import { createRoot, css, on } from 'remix/ui'
  +import { createRoot, css, on } from 'remix/component'

  Apply the same rename to runtime subpaths such as remix/ui/server, remix/ui/test, and remix/ui/dev/refresh.

  Applications that use the Remix JSX runtime must also update jsxImportSource:

   {
     "compilerOptions": {
       "jsx": "react-jsx",
  -    "jsxImportSource": "remix/ui"
  +    "jsxImportSource": "remix/component"
     }
   }

  Component HMR entrypoints similarly move from remix/ui-hmr to remix/component-hmr. Rename the asset loader to componentHmr():

  -import { uiHmr } from 'remix/ui-hmr/assets'
  +import { componentHmr } from 'remix/component-hmr/assets'
  
   let assetServer = createAssetServer({
     scripts: {
  -    loaders: [uiHmr()],
  +    loaders: [componentHmr()],
     },
   })

  If the development server uses the component HMR Node hook, rename that entrypoint too:

  -node --import remix/ui-hmr/node server.ts
  +node --import remix/component-hmr/node server.ts

  The remix package no longer exports UI components, primitives, or animation utilities. Headless, accessible UI primitives and animation utilities remain in @remix-run/ui. This package is currently unstable, versioned independently in the v0.x range, and not part of the Remix 3.0 release candidate. Applications using these APIs must install the package separately:

  npm i @remix-run/ui

  Move animation imports to the standalone package:

  -import { animateEntrance, spring } from 'remix/ui/animation'
  +import { animateEntrance, spring } from '@remix-run/ui/animation'

  Move headless UI primitive imports to its flat subpaths:

  -import * as accordion from 'remix/ui/accordion/primitives'
  +import * as accordion from '@remix-run/ui/accordion'

  This applies to all remaining primitives: accordion, anchor, combobox, listbox, menu, popover, select, tabs, and toggle. The visually styled components and style mixins have been removed, including the previous breadcrumbs, button, checkbox, input, and radio modules.

  If the asset server restricts imports with allowPackages, add @remix-run/ui for both the primitive and animation imports:

   {
     "assets": {
  -    "allowPackages": ["remix"]
  +    "allowPackages": ["@remix-run/ui", "remix"]
     }
   }

• breaking

  First stable release of Remix 3.

Patch Changes

• Installation and new-app examples now use the stable Remix release.

• Bumped @remix-run/* dependencies:

  • assert@1.0.0

  • assets@1.0.0

  • async-context-middleware@1.0.0

  • auth@1.0.0

  • auth-middleware@1.0.0

  • cli@1.0.0

  • component@1.0.0

  • component-hmr@1.0.0

  • compression-middleware@1.0.0

  • cookie@1.0.0

  • cop-middleware@1.0.0

  • cors-middleware@1.0.0

  • csrf-middleware@1.0.0

  • data-schema@1.0.0

  • data-table@1.0.0

  • data-table-mysql@1.0.0

  • data-table-postgres@1.0.0

  • data-table-sqlite@1.0.0

  • fetch-proxy@1.0.0

  • fetch-router@1.0.0

  • file-storage@1.0.0

  • file-storage-s3@1.0.0

  • form-data-middleware@1.0.0

  • form-data-parser@1.0.0

  • fs@1.0.0

  • headers@1.0.0

  • html-template@1.0.0

  • lazy-file@5.0.8

  • logger-middleware@1.0.0

  • method-override-middleware@1.0.0

  • mime@1.0.0

  • multipart-parser@1.0.0

  • multiple-import-maps-polyfill@1.0.0

  • node-fetch-server@1.0.0

  • node-hmr@1.0.0

  • node-tsx@1.0.0

  • render-middleware@1.0.0

  • response@1.0.0

  • route-pattern@1.0.0

  • session@1.0.0

  • session-middleware@1.0.0

  • session-storage-memcache@1.0.0

  • session-storage-redis@1.0.0

  • spa@1.0.0

  • static-middleware@1.0.0

  • tar-parser@1.0.0

  • terminal@1.0.0

  • test@1.0.0