Skip to main content

Web

The web target is a Vite + MUI single-page app. It runs your screens/web/ screens with a Material UI theme generated from your design tokens, behind the navigation.tsx (react-router) output of build:nav. It is the primary UI family — and the same screens and navigation the desktop target renders inside its Electron shell.

Three pieces make up the web target:

  • Styling — your design tokens drive the MUI theme; you edit tokens, not per-platform style code.
  • Routing — storybook.web.ts compiles to a react-router navigation.tsx, navigated with a typed useNav.
  • Vite tooling — dev:web for a hot-reloading dev server, build:web for a production bundle.

How it renders​

Your app mounts from the web/ entry, a Vite project. Vite gives you a fast dev server with hot module replacement and a small, optimized production bundle.

At the top of the tree, <SublimeProvider tokens={tokens}> turns your tokens into a real MUI theme, so every @sublime-ui/library component renders as actual Material UI. Inside it, the generated <Navigation> (react-router) mounts your web screens. See Styling for how tokens become the theme.

Where web screens live​

Web screens live in src/screens/web/. They are platform-specific — a web screen and a mobile screen are different files — but they reach for the same shared src/components/, src/models/, and src/theme/ underneath. You write the screen; you share everything below it.

src/
  screens/
    web/                # web screens (e.g. TaskList → TaskDetail)
  navigation/
    storybook.web.ts    # you author this — imports ../screens/web
    navigation.tsx      # generated by build:nav (react-router)
  theme/                # SHARED design tokens
web/                    # Vite entry — mounts the web app

How navigation compiles​

You never hand-write react-router. You author storybook.web.ts — a declarative storybook of books and pages with a web print format (sidebar, stack, or tabs) — and sublime build:nav compiles it ahead of time into the idiomatic navigation.tsx. You don't run that by hand during development: dev:web watches the storybooks and recompiles on every change. See Routing for the full flow, and the Storybook Navigation docs for the shared model across platforms.

Develop and build​

npm run dev:web     # Vite dev server with HMR, from the web/ entry
npm run build:web   # production bundle

dev:web serves your app with hot module replacement — edits to web screens reload live — and recompiles the navigation whenever a storybook changes. build:web compiles navigation, then produces the static, deployable bundle. For the full per-target dev loop and CLI details, see Running Your App.