Render
The render engine walks the score model, applies traditional music-engraving rules, and draws the result through a pluggable canvas backend. alphaTab uses the Bravura SMuFL font for every glyph and re-flows the score when the container it lives in changes size.
Every capability below is available on Web, .NET, and Android unless a card names specific platforms. Follow any card into the reference for the exact signature.
Layout
Page layout
The default LayoutMode.Page; bars flowing into rows, when to use.
Horizontal layout
LayoutMode.Horizontal; single-line scrolling view for timeline UIs.
Parchment layout
since 1.9LayoutMode.Parchment; respects the systems layout from the source file (Guitar Pro embedded layout), with per-bar displayScale for relative sizing.
Density and spacing
since 1.9Control horizontal note spacing with spacingRatio and stretchForce, and decide with lastSystemFillThreshold when the last system of a page is justified.
Effect placement
since 1.9How alphaTab places annotations such as texts, chord names, dynamics, palm mute and let ring against the outline of the notation, and which settings control their clearances.
Zoom and scale
display.scale, live slider demo.
Responsive resize
ResizeObserver, triggerResize(), resize event.
Rendering a slice
startBar / barCount to render partial scores.
Notation types
Standard notation
The traditional five-line staff, showStandardNotation.
Guitar tablature
String-and-fret rendering, rhythm modes, small grace tabs.
Slash notation
Chord rhythm slashes, showSlash.
Numbered notation (jiวnpว)
Cipher notation, showNumbered.
Drum and percussion notation
Percussion staff with 1/2/3 lines, drum piece heads, and drum tablature.
Multi-track and grand staff
Piano grand staff, multi-track rendering, multiple tunings displayed.
Backends
SVG rendering
Vector output, scaling, print, when to reach for it.
HTML5 Canvas
since 1.2Raster output, HighDPI awareness, when it's the right choice.
Skia rendering (.NET / Android)
Native rendering via alphaSkia.
Node.js headless rendering
Server-side image rendering.
Choosing a backend
Decision guide comparing SVG / Canvas / Skia.
Fonts & symbols
Bravura and SMuFL
The default music font, why SMuFL matters.
Using a custom music font
Swap Bravura for Petaluma or Leland, live demo.
Custom fonts on Skia
Register any font with the Skia rendering backend used on .NET and Android via Environment.registerAlphaSkiaCustomFont.
Custom text fonts
Configure title / subtitle / lyrics / chord / effect / marker fonts.
Font family fallbacks
since 1.2Multiple families with graceful fallback.
Score-wide display policies
Score-level toggles that live on `score.stylesheet` and apply to the whole document.
Hiding dynamics
Score-wide dynamics visibility, live toggle.
Track name policies
Where names appear (first-system vs every-system), format, orientation; one page for all four track-name fields.
Multi-bar rests
Collapse consecutive empty bars.
Bracket extend mode
How instrument brackets span multiple staves.
Chord diagrams on top
Position chord diagrams above the first system.
System sign separator
Diagonal separator glyph between systems.
Tuning display
Show or hide guitar tuning at the start.
Staff element display
since 1.9Show, hide or restrict clefs, key signatures, time signatures, bar numbers and tab rests per staff type, on the score, staff or bar level.
Bar numbers
since 1.9Bar numbering with pick-up bars, custom numbers and texts, and display on every bar, the first bar of each system, or nowhere.
Coloring & element styling
Per-element colors
since 1.5Color any note head, stem, beam, or effect via the `style.colors` map on the corresponding model class.
Score-wide palette
display.resources default colors for staff lines, glyphs, and text.
Styling the playback cursor
CSS classes on Web for cursor / beat highlight / selection.
Notation coverage
alphaTab renders the full grammar of Western music notation and the guitar-specific effects Guitar Pro supports. Each entry below has a rendered example โ pick a category to jump straight to the demos.
Effects and articulations
Bends, whammy, vibrato, palm mute, let ring, taps, slaps, pops, tremolo picking, slides, hammer-ons, pull-offs. Section per effect, mini-demo per section.
Chord diagrams and chord names
Chord diagrams above bars and inline chord symbols.
Dynamics, hairpins, and accents
ppp-fff, crescendo / decrescendo, sudden accents.
Grace notes, tuplets, and ornaments
Grace positioning, tuplet brackets, trills, mordents, turns.
Repeats and structural elements
Repeats, alternate endings, D.C./D.S., segno, coda, markers, and the order in which the player follows them.
Lyrics
Multi-verse lyrics aligned to beats.
Special notes
Harmonics, ghost notes, dead notes, tied notes.
Rests and full-bar notes
since 1.9Centered full-bar notes and rests, explicit rest positions per beat, and rest placement with several voices.
Special tracks
Drums, percussion, piano grand staff, string instruments with unusual tunings.
Toggling notation elements off
Hide any notation category โ bends, dynamics, markers, lyrics, tuning โ through the `notation.elements` map.
See it liveโ
The layout and stylesheet settings above compose freely. Try switching them live on the playground:
Adding a feature cardโ
Each card on this page comes from an .mdx file in this directory. Two kinds are supported:
- Highlight page โ a full page with prose (e.g. Per-element colors). Add
sidebar_custom_props.feature_chapter: <chapter-id>to its frontmatter and it appears as a card. The card links to the page. - External-link stub โ a
.mdxfile that only exists to source a card. Setunlisted: trueandsidebar_custom_props.feature_external_link: <url>. The card links to that URL and the stub is hidden from the sidebar.
Chapters are defined in _chapters.ts โ add a new entry there to introduce a new H2 section. Full frontmatter schema lives in the FeatureChapterGrid component source.