These tutorials cover OpenUI5 application development, from beginner foundations to focused deep dives on specific concepts. Along the way you'll also use the UI5 CLI for local development tooling.
All tutorials (everything except Agentic Development) are available in both TypeScript and JavaScript — use the language toggle at the top of each tutorial page to switch between versions. The Agentic Development tutorial is documentation-only and walks through both languages as part of its workflow rather than offering a toggle.
No prior OpenUI5 experience is needed. Basic familiarity with HTML, CSS, and JavaScript (or TypeScript) is assumed.
| Tutorial | Type | Content |
|---|---|---|
| Quickstart | Foundation | Get a first OpenUI5 app running in minutes, covering bootstrapping, MVC basics, and a quick showcase of data binding and navigation. |
| Walkthrough | Foundation | Builds a complete app from scratch, covering MVC, data binding, navigation, custom controls, testing, and production build. |
| Data Binding | Deep dive | Explores the core binding modes in depth along with formatting, data types, and validation. |
| Navigation and Routing | Deep dive | Covers the core routing API through a realistic employee app: URL parameters, transitions, bookmarkable states, lazy loading, and error handling. |
| OData V4 | Deep dive | Builds a list/detail app against an OData V4 service covering CRUD operations, filtering, sorting, batch groups, and OData actions. |
| Agentic Development | Agentic | Use Claude Code CLI or GitHub Copilot CLI with the UI5 plugin to create, convert, and modernize OpenUI5 apps grounded in the live API reference and best-practice guidelines. |
The live published site is at https://ui5.github.io/tutorials/.
packages/
<tutorial>/
docs/ # Markdown source for the tutorial steps
steps/ # One self-contained app per step (documentation-only tutorials hold just a README per step)
Each step under steps/ in a code-bearing tutorial is a standalone npm workspace package named ui5.tutorial.<name>.stepNN. The Agentic Development tutorial is documentation-only: its steps are READMEs (with optional starter code under apps/) and are not workspace packages.
The JS/TS language toggle is implemented via CSS classes (ts-only, js-only) on elements in the markdown source. The local dev server and the GitHub Pages site both apply the toggle at render time. On plain github.com those elements render as standard collapsed HTML details.
The repository is set up as an npm workspaces monorepo. Each step of a code-bearing tutorial under packages/*/steps/* is a self-contained app you can run standalone, and the root build orchestrator produces a unified preview that mirrors the published GitHub Pages site. The documentation-only Agentic Development tutorial has no runnable steps — npm run build renders its READMEs but builds no apps for it.
Prerequisites:
Node.js 20.11.0 or higher, or v22 or higher (v21 is not supported). The UI5 CLI is installed automatically as part of npm install.
# 1) install dependencies for every step npm install # 2) build every tutorial step (produces dist/<tutorial>/build/NN/ apps + ZIP downloads) npm run build # 3) serve the rendered tutorial pages with working Live Preview links npm start
After npm start, open http://localhost:1337/packages/walkthrough/ (or any other tutorial's packages/<name>/). The dev server renders the markdown overview, rewrites the published https://ui5.github.io/tutorials/... URLs to point at the local dist/, and serves the built apps from the same origin.
To run a single step directly without going through the build:
npm start -w ui5.tutorial.walkthrough.step15
Create an issue in this repository if you find a bug or have questions about the content.
For additional support, ask a question in OpenUI5 Community on Slack.
If you wish to contribute code, offer fixes or improvements, please send a pull request. Due to legal reasons, contributors will be asked to accept a DCO when they create the first pull request to this project. This happens in an automated fashion during the submission process. SAP uses the standard DCO text of the Linux Foundation.
Copyright (c) 2026 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.