White Label

Rendering guide

JSX without React

Use JSX and TSX as rendering syntax without React. White Label View provides a small first-party JSX runtime for browser and server rendering, while keeping JSX optional.

Package documentationAPI reference

Point TypeScript at the White Label JSX runtime

JSX is syntax; it does not require React. TypeScript can compile JSX against White Label View by using the automatic JSX transform and white-label-view as the import source.

The runtime is framework-independent and is part of white-label-view rather than a separate component framework.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "white-label-view"
  }
}

Render JSX through View

Browser View accepts White Label JSX output alongside DOM elements and trusted single-root HTML strings. Server View accepts the same JSX output and renders it to a string without requiring DOM globals.

Function components, fragments, child arrays, className, htmlFor, boolean attributes, and style objects are supported without introducing React lifecycle or state semantics.

import View from 'white-label-view';

const view = new View({
    parentElement: document.querySelector('main'),
    template: data => <section><h1>{String(data.title)}</h1></section>
}).initialize();

Keep escaping explicit

Ordinary JSX child text and attribute values are escaped by default. The raw() helper is an explicit trust boundary for independently trusted or sanitized markup and should never receive untrusted user content.

Direct HTML-string templates remain caller-owned trusted input, so applications are responsible for escaping or sanitizing them for their context.

JSX remains optional

White Label View does not require JSX. Applications can return DOM nodes or trusted HTML strings, or call Handlebars, Eta, EJS, Mustache, Nunjucks, Pug, or another compatible renderer from the View template function.

The generator provides a no-JSX scaffold when another template convention should remain application-owned.