Unlock One-Code Multi-Device UI with Rexd: Alibaba’s Hema Design System

Background and Open‑Source Release

Six months after presenting the Hema cross‑platform solution at D2 Frontend Tech Talk, Alibaba open‑sourced the core code of the Rex Design for OS (Rexd) on GitHub, launching a beta version.

Designing for Multiple Devices

Unlike traditional back‑office systems that target only PCs, Hema’s operations involve diverse devices such as PCs, smartphones, tablets, scanners, trucks, and IoT equipment. To avoid fragmented user experiences and high development costs, Rexd adopts a unified multi‑device design system.

The system classifies environmental factors into four categories—human, machine, task, and site—and focuses on five key aspects: operation state, screen size, interaction form, information density, and lighting conditions.

Environment‑Based Design Token System

Rexd links design thinking with UI implementation through a formulaic configuration system. By mapping environment tokens to design tokens, it automatically generates UI rule packages that front‑end components can consume.

One Code, Multi‑Device Ready

Rexd provides a cross‑device component library that abstracts viewport, pointer, keyboard, sensor, and network capabilities, allowing developers to write a single codebase that works across PCs, mobiles, and other devices.

Developers enjoy a consistent API and coding style, reducing the learning curve for mobile development and enabling tool support for multi‑device applications.

Lightweight Theming Logic

The theming system configures global design tokens (colors, fontSizes, sizes, space, borders, radii, shadows, zIndices) at the framework level. Changes to tokens propagate throughout the UI, enabling seamless theme switching.

const theme = {
  // colors
  colors: { primary, secondary, gray, red, green, yellow },
  // font sizes
  fontSizes: { note, body, subtitle, title, subheader, header },
  // sizes
  sizes: { s1, /* ... */ },
  // spacing
  space: { s, m, l, xl, xxl },
  // borders
  borders: { none, solid, dashed },
  // radii
  radii: { s, m, l },
  // shadows
  shadows: { low, median, high },
  // z‑indices
  zIndices: {}
};

Theme consumption example:

<AppProvider theme={theme}>
  <Box color="primary.50" border="solid" borderColor="line.border">hello world</Box>
</AppProvider>

Flexible Multi‑Device Styling

Rexd adopts a CSS‑in‑JS approach with Style Props and CSS Variables, offering isolated, dynamic, and responsive styling directly in React.

<Box color="brand.normal" border="solid" borderColor="line.border">hello world</Box>

Responsive usage:

<Flex wrap="wrap">
  <FlexItem span={{s:12, m:6, l:4}}>responsive</FlexItem>
  <FlexItem>item</FlexItem>
  <FlexItem>item</FlexItem>
</Flex>

Dynamic Form Solution

Rexd includes a MobX‑based dynamic form library that offers on‑demand rendering, low learning cost, and strong performance for large forms.

const model2 = new FormModel({ prov: '浙江', cities: ['杭州', '绍兴'] });
function BasicEffect() {
  const prov = model2.getField('prov');
  const cities = model2.getField('cities');
  return (
    <Observer>{() => (
      <Form model={model2}>
        <FormItem component="singleSelect" label="省份(单选)" field={prov} componentProps={{ dataSource: ALL_CITIES.map(item => item.prov) }} />
        <FormItem component="multiSelect" label="城市(多选)" field={cities} componentProps={{ dataSource: ALL_CITIES.find(item => item.prov === prov.value).cities }} />
        <Form.Effect watch={prov} effect={() => { cities.value = []; }} />
        <ValuePreview />
      </Form>
    )}>
    </Observer>
  );
}

Additional Features

Responsive and adaptive interaction optimized for mobile devices

Built‑in dark mode and multi‑color mode support

Mini‑program compatibility via Remax

New overlay component suite

High‑performance table component

Accessibility support for core components

Modern grid layout capabilities

Enhanced gesture handling

Future Vision

The goal is to evolve Rexd into a community‑driven, flexible multi‑device design system, offering robust design rule configuration, powerful component libraries, and low‑cost mobile enablement for complex back‑office scenarios.