Remix Newsletter #40

Hello Web Dev Heads, and welcome to Remix Newsletter #40!

We've got a short one for you, covering a few updates to React Router, including a new unstable URL Masking API, and a quick recap of what's been going on in the Remix repo as we're gearing up for a Remix 3 beta release.

Let's dive in 💿

React Router v7.13.1

New Features

React Router v7.13.1 adds support for <Link unstable_mask> in Framework and Data Mode for contextual routing flows like modals. More on this below.

Bug Fixes & Improvements

• Fixed matchPath for optional params without a / separator, so paths like matchPath("/users/:id?", "/usersblah") now correctly return null
• Fixed HydrateFallback rendering during initial lazy route discovery when a matching splat route is involved
• Preserved query params and hash fragments on manifest version mismatch reloads
• Improved the error message when the Origin header is invalid
• Cleared timeouts correctly when turbo-stream encoding completes
• RSC: Added a new unstable_getRequest API
• RSC: Fixed a null reference issue that could lead to invalid route tree comparisons
• RSC: Updated failed origin checks to return a 400 with more appropriate UI instead of a generic 500

Check out the full React Router changelog ↗

URL Masking (unstable)

The headline feature in v7.13.1 is the new <Link unstable_mask> API for Framework and Data Mode.

As the name suggests, this API is still unstable, so treat it as experimental and expect some iteration before you wire it into production-critical flows.

This gives React Router a first-class way to do contextual routing flows where the router navigates to one location, but the browser shows another. A common example is a modal on top of a gallery. You can load the modal data from a route like /gallery?image=3, while showing a cleaner shareable URL like /images/3 in the address bar.

That means an in-app navigation can keep the gallery in the background, while a direct visit to the masked URL can still load as its own page. This is the same kind of pattern people used to achieve in Declarative Mode via manual backgroundLocation management, but now there is a dedicated API for it in Framework and Data Mode.

Here's a minimal example:

Check out the full Data Mode example ↗

Remix 3 Updates

We are continuing to release new alpha versions of Remix 3 with major improvements to the core packages, along with a few new modules that flesh out our vision of remix as a fullstack, batteries-included web framework. You can try the latest by running npm install remix@next. You can also follow along in the Remix repo ↗.

Here are a few updates to pay attention to for the curious:

• data-table - Typed relational query toolkit, with a query builder, higher-level CRUD helpers, relation loading, optional runtime validation, lifecycle hooks, raw SQL escape hatches, and first-class migrations. On top of that, we already have dedicated adapters for data-table-postgres, data-table-mysql, and data-table-sqlite.
• data-schema - A tiny standards-aligned validation library for TypeScript and JavaScript runtimes. It's Standard Schema v1 compatible, works with coercion and validation pipelines, and gives Remix a lightweight native option for parsing and validating data without pulling in a much larger dependency.
• Cleaner request context APIs - fetch-router is simplifying how request-scoped state works. Instead of a pile of special-purpose fields hanging off context, the API is converging on context.get(...), context.set(...), and context.has(...) with typed keys from createContextKey(...). Sessions and parsed FormData now fit into that same model.
• A stronger mixin model for components - The component package is adding a new mix prop and mixin authoring APIs like createMixin, on(...), ref(...), and css(...), plus new helpers for input and animation such as pressEvents(...), keysEvents(...), animateEntrance(...), animateExit(...), and animateLayout(...).

There's still more to come before we're able to move from alpha releases to beta, but the story is becoming clearer. Remix is shaping up to be a batteries-included, ultra-productive, zero dependencies and bundler-free framework, ready to develop with in an agent-first world.

Check out the Remix repo ↗

Connect at a Remix Meetup

Remix Meetups are run voluntarily by members of the community all around the globe with in-person and online options. These meetups feature local speakers, hackathons, workshops, and more!

Find a meetup near you ↗

No meetups near you? Reply to this email if you are interested in starting your own meetup. We've even created some guides to help you get started.

Starting a New Remix Meetup ↗

If you enjoy getting this email, please let us know! We'd love to hear from you, what you like about Remix and these updates, and any suggestions you have to improve them.

- The Remix Team