Sampleby a community orgReference

@ui5-community/jsx-runtime-helloworld

A scaffolded UI5 TypeScript app in the jsx-runtime repository that consumes the runtime the way a project outside the repository would, with two views converted from XML.

The adoption path of @ui5-community/jsx-runtime as a plain app rather than as a feature tour: a scaffolded UI5 TypeScript project with the tsconfig.json, ui5.yaml and manifest.json wiring in place and two views, App and Main, that were converted from .view.xml. The conversion guide in the same repository is written from that conversion and points back at these two views as its working example. It is run from the workspace with pnpm dev:helloworld and is not published.

GitHub18 ★

Docs

Facts

Last push2026-10-05LicenceApache-2.0

Where it sits

Lives in

UI5

Part of

@ui5-community/jsx-runtime

Requires

@ui5-community/jsx-runtime

Who is behind it

UI5 Communitymaintainer1 contributor

Before choosing this

Sources

Conditions

PracticalFunctional boundary

It shows the wiring and a converted view pair, not the runtime's API surface; the directives, the plugin SPI and the binding forms are demonstrated in @ui5-community/jsx-runtime-showcase instead.

What it declares

Sources

Every artifact

Type: Sample
Origin: By a community org
Use as: A reference

As a sample

Form: does not say
declared, What kind of example it is, as its own documentation presents it.

Connections2

Download

README

quoted from ui5-community/jsx-runtime under Apache-2.0, read 2026-10-25

ui5-community/jsx-runtime/packages/jsx-runtime-helloworld/README.mdthe maintainer’s wordsOn GitHub

@ui5-community/jsx-runtime-helloworld

A minimal UI5 TypeScript application that consumes @ui5-community/jsx-runtime and authors its views as .tsx.

Unlike the showcase — which carries a lot of documentation machinery — this package is a plain, @ui5/generator-scaffolded app with the smallest possible set of changes needed to adopt the runtime. It is the reference answer to "how do I use the JSX runtime in my own project from scratch?" and doubles as an end-to-end integration check that the published package works as a normal dependency.

It is private and never published.

What adopting the runtime takes

All of it is configuration; there is no runtime glue code to write.

Depend on the package — package.json:

"dependencies": {
  "@ui5-community/jsx-runtime": "workspace:^"   // a normal version range when consumed from npm
}

Type-check the JSX — tsconfig.json:

// tsconfig.json
"jsx": "react-jsx",
"jsxImportSource": "ui5/community/jsx/runtime",
"types": ["@openui5/types", "@types/qunit", "@ui5-community/jsx-runtime"]

Transpile .tsx, transform the JSX, and bundle the runtime — ui5.yaml: the transformJSX option enables @babel/plugin-transform-react-jsx (runtime: automatic, importSource: "ui5/community/jsx/runtime") — no .babelrc.json needed; ui5-tooling-transpile assembles the rest of the Babel pipeline. transpileDependencies: true lets dev mode transpile the workspace-linked runtime sources on the fly, and includeDependency: ui5.community.jsx.runtime bundles the runtime's AMD modules into the build output.

Then views are just TSX — see webapp/view/Main.tsx, converted from a classic Main.view.xml. The full conversion walkthrough is in docs/xmlview-to-tsx.md.

Scripts

Run these from this package directory, or from the repo root via the :helloworld aliases (pnpm dev:helloworld, pnpm test:helloworld, …).

Script	What it does
`npm run dev`	Serve on `http://localhost:8080` with live reload, transpiling `.tsx` (and the linked runtime) on the fly. No prior build needed.
`npm run dev-cdn`	Same, but bootstraps UI5 from the CDN (`index-cdn.html`).
`npm start`	Serve the app against a built (`ui5-dist.yaml`) configuration.
`npm run build`	Build the app into `dist/`.
`npm run build:opt`	Self-contained build (bundles the UI5 framework resources too).
`npm run ts-typecheck`	`tsc --noEmit` type check.
`npm run lint`	ESLint over `webapp`.
`npm test`	Lint + unit + OPA5 integration tests via `ui5-test-runner`.