Choosing a backend

Three render backends ship with alphaTab, each optimizing for a different constraint. Use this page as a decision guide when you're not sure which engine matches your target platform and output. In most cases the platform default is the right call; the checklists below cover the times when it isn't.

Pick by runtime first

• Web — SVG (default) or HTML5 Canvas. Skia is not available in the browser.
• .NET — Skia (default). SVG works too if you need scalable text output.
• Android — Skia (default). SVG works too.
• Node.js — SVG for text output; Skia (via alphaSkia) for PNG.

Leaving core.engine at 'default' picks the right backend for the runtime you are on.

Then pick by workload

Reach for SVG when:

• You need scalable output for zoom or print.
• You want the rendered elements in the DOM for CSS styling, hit-testing, or accessibility.
• You are on Web and the score has a normal number of bars.
• You are on the server and want a text artifact you can post-process or embed in an HTML page.

Reach for HTML5 Canvas when:

• You are on Web and the score is long or dense enough that thousands of SVG nodes slow down scrolling.
• You do not need per-glyph DOM access — alphaTab's bounds lookup still supports mouse and touch on canvas.
• You want HighDPI-aware raster output without leaving the browser.

Reach for Skia when:

• You are on .NET or Android and want the platform default — consistent output across Windows, macOS, Linux, and Android.
• You need PNG or raster export from a headless environment (Node.js, CI, server pipelines).
• You register custom .ttf / .otf fonts and want them applied via registerAlphaSkiaCustomFont.

Show it in code

import * as alphaTab from '@coderline/alphatab';

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
  core: {
    file: '/scores/song.gp',
    engine: 'default',
  },
});

getAlphaTabContainer() is a placeholder for the platform-specific step of obtaining the render target — a <div> on Web, an AlphaTab control on .NET, or an AlphaTabView on Android. engine: 'default' picks SVG on Web and Skia on .NET / Android. Replace with 'svg', 'html5', or 'skia' when you want to override.

Where to look next

• SVG rendering — the vector default.
• HTML5 Canvas — Web-only raster.
• Skia rendering (.NET / Android) — native raster off the Web.
• Node.js headless rendering — server-side image pipelines.
• core.engine in the settings reference.