Interactive Music Viewer
Renders MusicXML and MXL files as scalable SVG chunks with zoom, orientation options, and adjustable stave dimensions, supporting lyrics, dynamics, chord diagrams, and grace slurs.
Offline-First Digital Sheet Music and Ensemble Collaboration Platform
Music collaboration software that renders music natively from MusicXML rather than static PDFs, keeping scores, annotations, and ensemble permissions fully available in rehearsal spaces with no network connection at all.
Project Overview
The platform changes how musicians, students, teachers, and ensembles practise and perform. Instead of paper or static PDF readers, it renders music natively on the MusicXML standard, so a score becomes live data a musician can zoom, edit, annotate, and share. Around that viewer sit a cloud-synced personal library, collaborative group workspaces, and event scheduling for rehearsals and performances. Ditstek delivered this custom music app development offline-first on React Native against a Node.js serverless backend, because musicians work in basements, concert halls, and practice rooms without usable networks.
Challenges
Complex Notation On Small Screens
Rendering multiple voices, grace slurs, tuplets, and clef changes accurately on a phone requires precision that static PDF viewers avoid entirely by never reflowing content.
Reflow Breaks Practice Markings
Native MusicXML reflows to fit each screen, which is what a musician needs for readability and exactly what pushes overlay annotations off the bars they belong to.
Locking Layout Defeats The Product
Fixing the layout to protect annotations would have reduced the application to a PDF reader with extra steps, removing the adaptability that justified building it natively.
Venues Without Any Connectivity
Musicians perform in basements, concert halls, and practice rooms with zero network, so libraries, group data, and personal instruments all had to remain fully reachable offline.
Offline Data Conflict Risk
Full offline access introduces conflicts, such as one user deleting a shared group score from a device that has not reached the server for several hours.
Strict Ensemble Permission Structure
Orchestras and bands operate under structural hierarchies, needing a role model separating group managers, section leaders, and members with edit rights confined to authorized people.
Solution
Ditstek bypassed off-the-shelf rendering limits with locally modified notation libraries, isolated annotations from the rendering engine entirely, and built an offline-first synchronization layer that removes conflict classes rather than resolving them.
Customized Rendering Engine
Locally modified versions of vexflow and opensheetmusicdisplay were integrated, with the parser converting MusicXML into structured data that custom logic feeds into the drawing layer.
Precise Notation Alignment
Working at library level let the team resolve X-axis alignment on whole notes, correct slur and crescendo positioning, and render dots and measure numbers across multiple voices.
Isolated Annotation Architecture
The annotation feature was engineered as a completely independent module, so structural changes to the rendering engine cannot corrupt or misalign the overlay annotations above them.
Single-Payload Offline Caching
On login the application fetches all user data as one payload and caches it locally in Realm DB, making the full library available without any further network calls.
Destructive Action Restriction
Deleting groups or shared scores is explicitly blocked while offline, which removes that conflict class entirely rather than attempting to resolve collisions after the device reconnects.
Queued Reconnection Sync
When connectivity returns, a predefined queue of API calls executes automatically through Axios, synchronizing all pending changes in the background without ever interrupting the musician mid-session.
Features
The platform spans notation rendering, editing, annotation, library management, ensemble permissions, and event scheduling, with every core capability designed to behave identically whether the device is currently online or not.
Offline-First Synchronization Engine
All user data caches locally in Realm DB on login, destructive actions are blocked offline, and a queued set of API calls syncs pending changes automatically on reconnection.
Isolated Annotation Layer
Annotations live in a module independent of the renderer, so score relayouts never move them, with highlights, text, voice recordings, images, videos, and stickers supported.
Notation Editor With Versioning
Users add, update, and remove notations with undo and redo, individual and grouped highlighting, and a visible cursor, with saving creating a new file version.
Custom Notation Keyboard
A purpose-built D-pad keyboard carries whole through sixteenth notes, rests, accidentals, dynamics, articulations, and ornaments, giving clear visual feedback showing the selected symbol on screen.
Role-Based Ensemble Permissions
Database schemas covering group items, role membership, and part assignment enforce ensemble structure, with the interface adapting automatically to hide editing tools from section leaders and members.
Offline-First Music Library
Users upload files with title, arranger, and composer metadata into nested folders, with grid, detailed, and compact views, global metadata search, and sharing filters offline.
Comprehensive Event Scheduling
Individual or group events with custom recurring patterns handled across time zones, with scores attached from the personal library and secure dynamic links restricted to participants.
Intelligent Practice Tracking
The application calculates time spent practising specific scores automatically and renders it as interactive bar graphs on the user profile, turning practice history into visible feedback.
Tech Implementation
- Node.js
- Postmark
- React Native
- MongoDB
- TypeScript
- S3
- Serverless Framework
- AWS Lambda
- Seed.io
- VexFlow
- Stripe
- Firebase
- OSMD
- Embedded JSON via RESTful APIs
Impact Created
Freed From Static Scores
Native MusicXML rendering freed musicians from static PDFs and paper, so a score adapts to the device and the practice need instead of forcing adaptation.
Annotations Survive Relayout
Decoupling annotations from the rendering engine made adaptability safe, since practice markings now survive every relayout rather than drifting off the bars they belong to.
Full Library Without Network
Realm DB integration means a musician walks into any rehearsal space or performance venue with no connection and still reaches their entire library and annotations.
Orchestral Structure Digitized
The role model digitized real orchestral structure, giving group managers granular control over score edits and event scheduling while section leaders and members keep view-only access.
Practice Engagement Loop
Automatic practice tracking surfaced as profile graphs created a quiet feedback loop keeping musicians engaged with their own progress without asking them to record anything manually.
Conflict Class Removed
Blocking destructive actions offline removed an entire category of sync conflict, so shared group data cannot be destroyed by a device that has not reached the server.
More Portfolios
Business Workflow Automation for Correctional Facilities
Secure business workflow automation software integrating offender case management, financial account handling, and digital process automation services.
View Project