React Strict DOM

Render platform-native components

React Strict DOM lets you create user interfaces that look and feel right on every platform. Web apps are rendered to HTML and rely on static CSS. Native apps look and feel native because the UI is truly native, not a web view.

Markup interfaces with strict HTML

Strict HTML components are type safe, tightly integrated with cross-platform styling, and exclude legacy attributes.

import { html } from 'react-strict-dom';

function Page() {
  return (
    <html.main>
      <html.div>
        <html.label for="name">Name</label>
        <html.input id="name" />
      </html.div>
    </html.main>
  );
}

Learn about strict HTML

Style components with strict CSS

Strict CSS styling provides a battle-tested, predictable, optimized way to encapsulate component styles on both web and native.
On the web this is powered by StyleX.

import { html, css } from 'react-strict-dom';

const styles = css.create({
  button: {
    backgroundColor: {
      default: 'lightgray',
      ':hover': 'lightblue'
    },
    paddingBlock: '0.5rem'
    paddingInline: '1rem',
  },
})

function Button(props) {
  return (
    <html.button {...props} style={styles.button} />
  );
}

Learn about strict CSS

Adopt cross-platform incrementally

Use platform-specific files and wrapper components to introduce cross-platform components to your app. Opt-in to platform-specific files to use the host platform's native APIs whenever required.

Button.web.js
import {
  html,
  css
} from 'react-strict-dom'

const styles = css.create({
  button: {
    paddingBlock: '0.5rem'
  }
})

function Button(props) {
  return (
    <html.button
      {...props}
      style={styles.button}
    />
  )
}

Button.native.js
import {
  View,
  StyleSheet
} from 'react-native'

const styles = StyleSheet.create({
  button: {
    paddingVertical: 10
  }
})

function Button(props) {
  return (
    <View
      {...props}
      style={styles.button}
    />
  )
}

Add to your app