{"ref":"artifact:abap2ui5-playground","page":"/artifacts/abap2ui5-playground","json":"/artifacts/abap2ui5-playground.json","generated":"2026-10-26","drafted_with_ai":true,"entity":{"id":"abap2ui5-playground","name":"abap2UI5 Playground","artifact_type":"web-tool","ecosystem":"abap","domain":"developer-experience","secondary_domains":["learning-and-reference"],"origin_ring":"community-org","description":{"one_line":"ABAP in the editor on the left and the [abap2UI5](artifact:abap2ui5-abap2ui5) app it builds on the right, both inside one browser tab: the framework is transpiled to JavaScript at build time and the class in the editor is compiled when Run is pressed.","short":"In-browser ABAP editor beside the abap2UI5 app it builds","what_it_solves":"Trying an abap2UI5 idea normally needs a system with the framework installed, a class activated in it and a browser pointed at the handler. This page carries the framework instead: the abap2UI5 sources are transpiled to JavaScript at build time, the classes in the editor are compiled on Run in about 20 ms, an in-memory SQLite stands in for the database the framework keeps its drafts in, and the UI5 frontend runs in an iframe whose `window.fetch` is redirected into the parent page for the one request it makes. Two checkers read what you type: [abaplint](artifact:abaplint-abaplint) for whether the ABAP compiles, the [abap2UI5 linter](https://github.com/abap2UI5/linter) for whether the view the builder chain produces works on UI5 1.71. Both rule sets are editable in a tab. What it holds is a few classes rather than a package: no tables of your own, no RFC, no files, and only the ten UI5 libraries that were built in. Share puts every open file into the URL fragment, and Download for abapGit writes a zip laid out as a repository, to import with [abapGit](artifact:abapgit-abapgit).","when_not_to_use":"A `SELECT` from a business table has nothing to select from: the database in the page holds the framework's own tables, and nothing can reach outside the browser, so an app that reads a system's data cannot be tried here. Only the UI5 libraries built in are available and a control from anywhere else will not load; what the transpiler cannot compile is reported in the output panel rather than run. State lives in the tab — a reload, and a press of Run, starts over on a fresh database.","to_build_on_it":"`npm ci` then `npm run build` pins the dependencies, builds the framework and the UI5 frontend and assembles `dist/`; `npm run serve` serves it and `npm test` drives Playwright against a fresh build. The first build takes a few minutes and later ones seconds, because the downport and the UI5 build are cached by a hash of their inputs. Which commits of abap2UI5, its frontend, open-abap-core and the samples go in is one edit in `tools/fetch-deps.mjs`, and PLAYGROUND_PLAN.md records the plan it was built from with what each phase cost."},"links":{"repo":"https://github.com/abap2UI5/playground","homepage":"https://abap2ui5.github.io/playground/","docs":"https://abap2ui5.github.io/docs/advanced/tooling.html"},"provides":[{"capability":"capability:local-development","what_it_does":"Runs an abap2UI5 app with nothing installed and no system behind it: the transpiled framework boots in the page, the classes in the editor are compiled on Run and registered with the running runtime, and Auto presses Run shortly after you stop typing. The database is an in-memory SQLite holding the framework's own tables, and the UI5 frontend in the iframe reaches the framework because `window.fetch` is replaced for that one request with a call into the parent page.","sources":[{"url":"https://abap2ui5.github.io/docs/advanced/tooling.html","title":"abap2UI5 — Tooling, Playground: ABAP in the browser","checked":"2026-10-17","quote":"The framework is transpiled to JavaScript at build time; your class is compiled the moment you press Run , in about 20 ms, and starts against an in-memory database. No server, no SAP system, no account."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"The abap2UI5 frontend runs in an iframe and talks to its backend\n  over a plain `fetch` POST, so the playground replaces `window.fetch` for that\n  one request with a call into the framework in the parent page."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"Only the classes in the editor are compiled, in about 20 ms, and\n  registered with the running runtime. **Auto** beside it presses Run for you,\n  shortly after you stop typing"}]},{"capability":"capability:editor-support","what_it_does":"Monaco with abaplint behind it: diagnostics against the real framework sources, hover, go to definition, rename, references and quick fixes, over a panel holding the reconstructed view, the problems, the class outline, the conversation between the app and the ABAP, and the log. The View tab also turns around — change the XML, press Save, and the builder chain is written again to build it, in the layout the abap2UI5 repositories hold their chains in, with the ABAP behind an attribute you left alone kept as it was.","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"Monaco — the editor from VS Code — with abaplint behind it:\n  diagnostics against the actual framework, hover, go to definition, rename,\n  references and quick fixes."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Editing the view instead of the chain","checked":"2026-10-17","quote":"The **View** tab shows the XML\n  that reconstruction produces, coloured; **Edit** turns it around. Change the\n  XML — move a control, add a property, insert a `Label` — press Save, and the\n  builder chain is written again to build it, in the layout the abap2UI5\n  repositories hold their chains in."}]},{"capability":"capability:abap-static-analysis","what_it_does":"Two checkers over the class in the editor, kept apart in what they block: abaplint with a small rule set against release v750, whose error stops Run because the ABAP does not compile, and the abap2UI5 linter, which reconstructs the view the builder chain produces and checks it against UI5 1.71 while the app still runs. Both configurations are live in a tab — any of abaplint's 188 rules, the ABAP release the syntax check holds you to, the UI5 floor the view is checked against — and Fix them applies abaplint's own fixes and the linter's together, as one edit per file.","sources":[{"url":"https://abap2ui5.github.io/docs/advanced/tooling.html","title":"abap2UI5 — Tooling, Playground: ABAP in the browser","checked":"2026-10-17","quote":"Two checkers read what you type. abaplint says whether the ABAP compiles, against the real framework sources; the abap2UI5 linter reconstructs the view your builder chain produces and says whether that works on UI5 1.71 — a control the release does not have, an icon that is in no icon font."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Which problems it reports","checked":"2026-10-17","quote":"`check_syntax`, `parser_error`, `implement_methods`, `method_implemented_twice`,\n`global_class`, `begin_end_names`, `superclass_final`, `unknown_types` —\nchecked against release v750, the one abap2UI5 lints itself against."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Which problems it reports","checked":"2026-10-17","quote":"Both lists are only a default. The **abaplint** and **abap2UI5 lint** tabs hold\nthe live configuration: add any of abaplint's 188 rules, change the ABAP release\nthe syntax check holds you to, or lower the UI5 floor the view is checked\nagainst to find a control an older system would not render."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Which problems it reports","checked":"2026-10-17","quote":"**Fix them** appears over the list when something is repairable and says how\nmany — abaplint's own fixes and the linter's, applied together."}]},{"capability":"capability:abap-code-formatting","what_it_does":"Format — the braces in the bar, or Shift+Alt+F — is abaplint's pretty printer with layout fixes in front of it: indentation and keyword case, and the tab, the trailing space, the double space, the space before the full stop and two statements sharing a line, over every open file as one edit that Ctrl+Z takes back. It leaves a builder chain unreflowed and the behaviour of the code unchanged.","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"**Format** ({ } in the bar, and Shift+Alt+F, which does the same) is\n  abaplint's pretty printer with its layout fixes in front of it — indentation\n  and keyword case, and also the tab, the trailing space, the double space, the\n  space before the full stop and the two statements sharing a line — over every\n  file that is open, as one edit that Ctrl+Z takes back. It never reflows a\n  builder chain and never changes what the code does."}]},{"capability":"capability:documentation","what_it_does":"The sample catalogue is one searchable page over every sample of the three abap2UI5 sample repositories, narrowed by the control a view actually builds and by the UI5 release a system runs, with the filters in the URL so a search is a link that can be sent. Every sample also has a static page of its own carrying its description, the class with an address per line, every control it builds, the release it needs and what it needs when it cannot run in the browser.","sources":[{"url":"https://abap2ui5.github.io/docs/advanced/tooling.html","title":"abap2UI5 — Tooling, Playground: ABAP in the browser","checked":"2026-10-17","quote":"The playground is also the front door to the samples: the sample catalog lists every sample of all three sample repositories — searchable by what an app does, by the control it builds and by the release your system runs — and each one opens in the editor."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, The sample catalogue","checked":"2026-10-17","quote":"**Every sample has a page of its own** — `samples/<class>/`, a static\ndocument with the sample's description, the class, every control it builds, the\nrelease it needs, what it needs when it cannot run here"},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, The sample catalogue","checked":"2026-10-17","quote":"**The filters live in the URL**, so a search is a link you can send:"}]}],"requires":[{"ref":"artifact:abap2ui5-abap2ui5","requirement":"required","basis":"binding","role":"framework","for":"the framework that answers in the page: its sources are transpiled to JavaScript at build time, at a pinned commit, and the roundtrip the app makes is served by them rather than by a system","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, What it can and cannot do","checked":"2026-10-17","quote":"**It runs real abap2UI5.** Not a subset and not a simulation: the framework in\nthe page is the framework from the repository, at a pinned commit, and the\nroundtrip it answers is the one a real system answers."}]},{"ref":"artifact:abaplint-transpiler","requirement":"required","basis":"binding","role":"transpiler","for":"turning ABAP into JavaScript: the framework at build time, and the classes in the editor on every Run","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"The [abaplint transpiler](https://github.com/abaplint/transpiler) translates ABAP\nto JavaScript. abap2UI5 already relies on it — its CI transpiles the whole\nframework and runs the ABAP unit tests under Node. The playground takes that\npipeline and moves the last step into the browser."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, What it can and cannot do","checked":"2026-10-17","quote":"**Only what the transpiler implements.** It covers a lot, and abap2UI5's whole\n  CI depends on it, but it is not an ABAP kernel."}]},{"ref":"artifact:abaplint-abaplint","requirement":"required","basis":"binding","role":"syntax-check","for":"the checker behind the editor: it parses the real framework sources in the page so the classes are checked against them, and its error stops Run","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"In parallel, abaplint parses the real framework sources so\n  the editor can check your classes against them."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Which problems it reports","checked":"2026-10-17","quote":"an\nabaplint error means the ABAP does not compile, so Run stops and says so."}]},{"ref":"artifact:open-abap-open-abap-core","requirement":"required","basis":"binding","role":"standard-library","for":"the ABAP standard library the transpiled code runs against, bundled into the page with the framework and pinned by commit; its runner is also what Run uses for the test classes beside a class","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"The abap2UI5 sources are downported to 702-compatible syntax\n  (abaplint `--fix`), transpiled, and bundled into one static module along with\n  the open-abap standard library."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Development","checked":"2026-10-17","quote":"pins abap2UI5, its frontend, open-abap-core and abap2UI5/samples by commit under `deps/`"},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Linking a playground","checked":"2026-10-17","quote":"Run runs them first,\nthrough the runner open-abap ships, and starts the app after"}]},{"ref":"artifact:abap2ui5-frontend","requirement":"required","basis":"binding","role":"frontend","for":"the UI5 half of the app: the frontend is pinned by commit, built against OpenUI5 into the site's own `dist/app/`, and runs in the iframe beside the editor","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Development","checked":"2026-10-17","quote":"the abap2UI5 frontend built against OpenUI5 → `dist/app/`"},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"The abap2UI5 frontend runs in an iframe and talks to its backend\n  over a plain `fetch` POST"}]},{"ref":"external:sqlite","requirement":"required","basis":"binding","role":"database","for":"the database the ABAP runtime in the page selects from: sql.js compiled to WebAssembly, in memory, holding the framework's own tables and starting empty again on every Run","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, How it works","checked":"2026-10-17","quote":"That bundle boots the ABAP runtime, and an in-memory SQLite\n  (sql.js, compiled to WebAssembly) takes the place of the database abap2UI5\n  keeps its drafts in."}]}],"connects":[{"ref":"external:github","kind":"data","direction":"outbound","for":"fetching ABAP that lives somewhere else: a `?src=` link, a shared link or a catalogue row is opened by the raw URL of its class, and the hosts it will read from are this site and GitHub's raw hosts","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Linking a playground","checked":"2026-10-17","quote":"Sources are\nlimited to this site and GitHub's raw hosts — the playground fetches on behalf\nof whoever opened the link, and should not be a general-purpose reader for\narbitrary URLs."},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, The examples browser","checked":"2026-10-17","quote":"A chosen entry opens through the same\npath a `?src=` link takes — the raw URL of its class, fetched, checked and run"}]}],"interfaces":[{"key":"embed-loader","kind":"api","direction":"in","for":"embedding a running example in a documentation page: the loader script turns an element carrying `data-src` or `data-code` into one, hands out the playground URL for code through `window.abap2ui5Embed.url()`, and posts `ready`, `status` and `height` back to the page that framed it","sources":[{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Live demos in a documentation page","checked":"2026-10-17","quote":"`embed/abap2ui5-embed.js` turns an empty element into a running example:"},{"url":"https://github.com/abap2ui5/playground","title":"abap2UI5/playground — README, Live demos in a documentation page","checked":"2026-10-17","quote":"An embedded playground posts three kinds of message to the page that framed it —\n`ready` once it has something to show, `status` for each line its status bar\nshows, and `height` for what an app-only demo wants to be."}]}],"maintainers":["actor:abap2ui5"],"provenance":{"discovered_via":[{"source":"source:github"}],"first_seen":"2026-10-17"},"drafted_with_ai":true,"contributors":["actor:oblomov-dev"]},"effective_normative_relations":[],"readings":{"liveness":[{"label":"Maintenance","tier":"unknown","evidence":"no release data"},{"label":"Continuity","tier":"good","evidence":"3 contributors, org-owned"},{"label":"Repository","tier":"good","evidence":"pushed 2026-10, not archived"}],"compatibility":[{"label":"Declared for","tier":"fair","evidence":"nothing declared"},{"label":"Survived majors","tier":"unknown","evidence":"not read on ABAP: its lines run side by side"},{"label":"Maintainer's CI","tier":"good","evidence":"pages green, 2026-10-23"}],"practice":[{"label":"Tests","tier":"good","evidence":"67 test files"},{"label":"Docs","tier":"good","evidence":"docs/ with 15 pages, docs site, README 41 KB"},{"label":"Changelog","tier":"fair","evidence":"none in the repo"}],"reach":[{"value":null,"unit":"installs/week"},{"value":1,"unit":"watching"}]},"signals":{"crawled_at":"2026-10-24","npm":"not published under this name","stars":1,"forks":0,"open_issues":0,"archived":false,"pushed_at":"2026-10-24","license_spdx":"MIT","org_owned":true,"default_branch":"main","created_at":"2026-08-18T11:04:58Z","open_prs":0,"tree_truncated":false,"test_files":67,"workflows":6,"other_ci":false,"readme_bytes":41727,"docs_files":15,"changelog":false,"license_file":true,"dts_files":0,"first_commit":"2026-08-18","last_commit":"2026-10-23","commits":143,"contributors":3,"ci_status":"success","ci_run_at":"2026-10-23","ci_workflow":"pages","ci_event":"push","readme_path":"README.md","readme_sha":"c058142603169dc0fa11ec9e5ed89f76323b49fa","repo_read":"2026-10-24"},"edges":{"maintainers":[{"ref":"actor:abap2ui5","name":"abap2UI5","json":"/actors/abap2ui5.json"}],"contributors":[{"ref":"actor:oblomov-dev","name":"oblomov-dev","json":"/actors/oblomov-dev.json"}],"explained_by":[],"alternative_to_this":[],"needed_by":[],"available_via":[],"parts":[],"add_on_to":{"ref":"artifact:abap2ui5-abap2ui5","name":"abap2UI5","json":"/artifacts/abap2ui5-abap2ui5.json"},"add_ons":[],"answered_through_parts":[]}}