CONCEPT Cited by 1 source

CSS subset cross-platform UI¶

CSS subset cross-platform UI is the approach of writing application UI in an HTML + CSS subset that a library maps to each target platform's native primitives at build/runtime. On web, the output is plain HTML + CSS with no adapter overhead; on React Native, the output is mapped to RN's View / Text / etc. The canonical implementation is react-strict-dom + StyleX.

The inversion¶

The historical cross-platform pattern for RN-based web builds was react-native-web: write RN components (<View />, <ScrollView />, <Text />), and let the library translate them to HTML at runtime. The CSS-subset approach inverts this:

react-native-web           react-strict-dom
────────────────           ────────────────
RN <View />                html.div
    │                          │
    ├── web: adapted to        ├── web: plain HTML
    │   DOM at runtime         │   (zero-runtime)
    └── native: native RN      └── native: mapped to RN
                                   at build/runtime

Both approaches let you write the UI once; the difference is which substrate is the truth, and where the adapter runs.

Zalando's decision rationale¶

Zalando chose react-strict-dom over react-native-web on two axes:

Substrate longevity. "HTML and CSS are incredibly expressive, have evolved over many years, and are likely to remain relevant for years to come. In contrast, any other form of UI representation could potentially become obsolete at any point." HTML has multiple decades of compounding specification work and browser implementation inertia behind it; RN's component model is younger and more volatile.
Zero runtime cost on web. react-strict-dom's build step strips the abstraction layers; the web output is plain HTML + CSS. react-native-web by contrast carries its RN→DOM adaptation at runtime in the browser.

The subset constraint¶

Any cross-platform UI substrate — regardless of direction — can only guarantee behaviour for the intersection of what all target platforms support natively. Writing to that intersection gives you platform-agnostic UI within the subset; anything outside has to drop to a per-platform escape hatch. See concepts/cross-platform-ui-subset-tradeoff for the general rule and patterns/compat-native-escape-hatch for react-strict-dom's ejection API.

Pair with tokens¶

The CSS subset is incomplete without cross-platform styling variables. StyleX tokens fill this gap: colours, font sizes, borders, spacing all defined once and resolved per-platform at build time. See concepts/design-token-cross-platform-theming.

Seen in¶

sources/2025-10-02-zalando-accelerating-mobile-app-development-with-rendering-engine-and-react-native — canonical wiki first source. Zalando names both candidate approaches (react-native-web vs react-strict-dom) and explains their rationale for choosing the CSS-subset direction.