Skia rendering (.NET / Android)
Skia is the default rendering engine on .NET and Android โ reach for it when building a WPF or MAUI desktop app, an Android app hosting AlphaTabView, or any pipeline where you need PNG bytes off a native runtime. alphaTab renders through alphaSkia, a thin wrapper around Google's Skia library, so the same score produces identical glyph metrics across Windows, macOS, Linux, and Android.
The preview below is a browser-side SVG rendering; the code snippet configures the exact same pipeline on .NET or Android, where Skia takes over and produces raster output.
What Skia gets youโ
- Native raster on every non-web target. Skia is the default engine on .NET and Android, so leaving
engineunset already picks it. Setting it explicitly makes intent clear. - Consistent output across platforms. The same score renders identically on WPF, MAUI, and Android โ no more platform-specific font hinting differences.
- PNG export. The alphaSkia canvas exposes
toPng(), which is what powers the Node.js headless rendering workflow. - Custom font support. Register
.ttf/.otffiles withEnvironment.registerAlphaSkiaCustomFontand use them indisplay.resources. See Custom fonts on Skia.
Skia is not available on the Web runtime. If you request engine: 'skia' from a browser context, alphaTab falls back to the platform default (SVG).
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: 'skia',
},
});
getAlphaTabContainer() is a placeholder for the platform-specific step of obtaining the render target โ an AlphaTab control on .NET or an AlphaTabView on Android. On desktop .NET you typically embed the WPF or WinForms control; on Android you place AlphaTabView in a layout.
For a Node.js pipeline that renders to PNG on the server, see Node.js headless rendering.
Where to look nextโ
- Node.js headless rendering โ Skia in a Node.js pipeline.
- Custom fonts on Skia โ register
.ttf/.otffiles. - Choosing a backend โ side-by-side comparison.
core.enginein the settings reference.- alphaSkia on GitHub โ the underlying library.