Web UI Frontend

May 19, 2026 ยท View on GitHub

For most brave-specific WebUI, a different stack to Chromium is used for the frontend.

  • TypeScript/React components often in components/*/resources/ or components/*_ui or browser/ui/webui/resources/*
  • Webpack configuration in components/webpack/
  • Uses Storybook for component development and user, designer, and reviewer verification
  • Tests via jest in sibling *.test.ts(x) files

Storybook

All WebUI should have a Storybook. This allows:

  • Rapid realtime iteration with hot-reload
  • Links to be generated by CI during PRs and shared with other team members

This needs UIs to be:

  • Built with a componentized mindset - data has to be mocked for tests, for storybook, or provided by the real WebUI communications layer (usually mojom).

State

Consider using createInterfaceApi to wrap mojom interfaces and generate React hooks as well as create a layer that is easily mocked.

For local UI-only state, keep it as simple and local as possible whilst avoiding both prop-drilling and unneccessary re-renders. Consider using small Contexts for components that all need all of the same state properties or computed values, or an external store, with individual property-level subscription, only when disparate components need access to some of the same state or computed values.

Testing

See WebUI Testing

Strings

See WebUI Strings

Chromium

See WebUI Overriding for dealing with modifying existing Chromium WebUI frontend (Lit / Polymer).