Add “View Source” toggle for Playground demos (HTML/JS snippet + settings)

[AvaTheArchitect]

Summary

The Playground is super helpful to see what alphaTab can do, but it’s hard to learn how each demo is wired without digging through the repo or reverse-engineering via devtools.

A simple “View Source” toggle per Playground page would make the demos dramatically more useful as learning references (even if they aren’t intended as plug-and-play).

Current Behavior

Playground demos run and can be configured via the UI, but there’s no quick way to view the minimal HTML/JS (or config/settings) used to create the demo instance.

For example, docs pages often show only a tiny snippet like:

const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
api.isLooping = true;

…but real-world integration usually needs more context (Settings fields, cursor settings, scroll element, event wiring, playbackRange, etc.).

Expected / Proposed Behavior

Add a toggle (or button) in the Playground UI:
• “View Source” (collapsed by default)
• Expands an embedded panel showing:
• Minimal HTML container
• The Settings object / configuration used
• The alphaTab initialization code (and optionally the file load code)
• Ideally includes:
• Copy button
• Optional “Download as snippet” or “Open in StackBlitz” later (not required)

This would still keep alphaTab as an SDK (not “drop in and done”), but gives users a solid reference starting point. This would clear up a lot of comments we see where individuals are not finding their issues in the search, or documents don't include enough information. Some times we see a topic that has been addressed before, but under a different "Title" making it easy to miss.

Why This Helps
• New users learn faster (especially around player/cursor/scroll/interactions).
• Advanced users can quickly confirm how a demo was built (e.g., “what settings is this using?”).
• Reduces repetitive Q&A/issues that boil down to “what does the Playground code actually do?”
• Makes the Playground feel more like an educational tool without requiring large documentation efforts.

Minimal Implementation Idea

This could be as simple as:
• A hardcoded string (or template) shown in a

 block

•	Or an extracted “demo config” object that renders both the demo and the snippet.

Even just showing the Settings + init code would be a big win.

[pratikrath126]

Hey! This is a great idea. One straightforward implementation: In your Playground component, keep the demo configuration (settings, song data, etc.) in a JavaScript object. Add a 'View Source' button that, when clicked, renders a

 block containing: 1) the HTML markup for the container element, 2) the JavaScript code that initializes alphaTab with the current settings, and 3) the settings object as JSON. You can generate the HTML string with a template literal. For a nice UX, use a simple show/hide toggle and maybe a Copy button that uses navigator.clipboard.writeText(). If you want downloadable snippets, create Blob URLs for .html or .js files. This can be built entirely on the client side without changing the core library. Good luck!

[AvaTheArchitect]

Thank you! I definitely think it helps all new and experienced users as they visit the alphaTab.net Paige and research documents and/ or tutorials, etc.

…

On Sun, Feb 22, 2026 at 11:40 AM Pratik Rath ***@***.***> wrote: Hey! This is a great idea. One straightforward implementation: In your Playground component, keep the demo configuration (settings, song data, etc.) in a JavaScript object. Add a 'View Source' button that, when clicked, renders a block containing: 1) the HTML markup for the container element, 2) the JavaScript code that initializes alphaTab with the current settings, and 3) the settings object as JSON. You can generate the HTML string with a template literal. For a nice UX, use a simple show/hide toggle and maybe a Copy button that uses navigator.clipboard.writeText(). If you want downloadable snippets, create Blob URLs for .html or .js files. This can be built entirely on the client side without changing the core library. Good luck! — Reply to this email directly, view it on GitHub <#2576 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BNLESQGYVUFX2DZKVNCA3VT4NIA3DAVCNFSM6AAAAACV4AKMAKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKOBZGA3DKNI> . You are receiving this because you authored the thread.Message ID: ***@***.***>