MP4Box.js – GPAC’s first venture into JavaScript inspired by the MP4Box tool – makes it easy to parse, segment, and manipulate MP4 files in browsers or Node.js.
Over time it’s become an unavoidable tool for Javascript developers willing to analyze, manipulate or generate media content in the browser or any Javascript runtime.
Since version 0.5.2 (Mar 2022), the library has undergone significant evolution: the codebase was modernized, new capabilities were added, and support for additional MP4 box types and streaming formats was extended. Below Deniz Uğur and I highlight the most important changes (released officially in v0.5.3/v0.5.4 and v0.6.x up through v1.0.0), focusing on new features, interface enhancements, and architectural improvements.
Refactored Codebase and TypeScript Support
A key milestone came in version 0.6.0, which is a complete refactor to modern JavaScript. The library was converted into an ECMAScript Module and rewritten in TypeScript.
In practice this means MP4Box.js now ships as an ES module (with CJS compatibility) and includes TypeScript type definitions out-of-the-box. Developers can import MP4Box.js with modern import syntax and enjoy full typing support. This modernization also brought an updated build toolchain (e.g. bundler and linting) and makes integration into contemporary web apps and Node environments much smoother.
The migration is largely transparent to existing code.
Expanded Compatibility for Box Types and MPEG Conformance Streams
Alongside the architectural rewrite, several updates improved compatibility with new MP4 box types and streaming scenarios:
- MPEG ISOBMFF Box Support – So much to write here, that led us to be up-to-date with MPEG’s ISOBMFF specification. For example, a fix was added to recognize version 1 of the cslg (composition to decode timeline) box, which is used by certain tools like GStreamer. Previously MP4Box.js ignored this newer box version, but now it can parse it correctly. MP4Box.js 1.0.0 enhances compatibility with files produced by modern encoders.
- Stream Type Extensions (v0.6.4) – The parsing interface was extended to accept additional stream types. In other words, MP4Box.js now recognizes more container streams when you call its parse methods. This lets developers feed in different kinds of input (e.g. alternative fetch or file streams) without having to patch the library.
- ArrayBuffer fileStart Parameter (v0.6.4) – MP4Box.js’ extended ArrayBuffer type (MP4BoxBuffer.fromArrayBuffer) was updated to require fileStart property explicitlyThis allows you to append ArrayBuffer segments at a specific offset in the virtual file. In practice, this makes progressive loading more flexible (for example, appending fragments of a large MP4 file in order), and it aligns MP4Box.js’s streaming API more closely with the original MP4Box (CLI) behavior.
Enhanced File Saving and mdat Handling
Versions leading up to 1.0.0 introduced more powerful file output capabilities, particularly around the media data (mdat):
- Rewriting Entire MP4 (v1.0.0) – A big portion of the effort went into fixing issues around MP4Box.js that was preventing valid rewriting of the file including the mdat box. In earlier versions, saving an MP4 often omitted the large media payload (mdat), resulting in an output with only headers. Now MP4Box.js can generate a complete MP4 file (with both metadata and media data) in one step. This is useful for workflows that manipulate or concatenate full MP4 files on the client side.
- Breaking Change: discardMdatData Default (v1.0.0) – To manage memory use, version 1.0.0 changed the default behavior so that discardMdatData is now true by default. This means by default MP4Box.js will discard (not store) the raw media data it parses unless you explicitly disable this flag. If your application needs the media bytes for rewriting, you can create the file with createFile(true)before parsing. Be aware of this change if upgrading, as it was not the previous default behavior.
More Comprehensive Testing
MPEG Group has built a File Format Conformance Framework around 2 years ago that made it easier to access conformance files. Our contributor Deniz Uğur took advantage of this and tested MP4Box.js against the conformance files from there.
- Structural Tests – Our testsuite ensures the parsed box layout is identical to what GPAC can output and what was reviewed and accepted by the MPEG File Format group.
- Roundtrip Tests – We also make sure we can read a file, write it, and read it again without any discrepancies.
Other Interface Improvements and Fixes
Beyond the headline changes above, MP4Box.js received numerous smaller but impactful tweaks:
- Bug Fixes and Registry Improvements (v0.6.4) – Various internal fixes were made to the box-type registry and parsing logic. For example, box definitions were cleaned up to separate different internal cases, and validation was tightened. While these are mostly behind-the-scenes, they improve stability when dealing with edge-case MP4 files.
- Streamlining and Cleanup – In multiple releases (v0.6.2, v0.6.3, etc.) general fixes were applied across the codebase (e.g. dependency fixes, housekeeping, and compliance updates). These don’t add new user-facing features, but they ensure the library is more maintainable and compliant with future standards (for instance, fixing build scripts and updating dependencies).
Overall, since v0.5.2 the MP4Box.js library has matured significantly. It now leverages modern JavaScript practices (ESM + TypeScript), has better support for varied MP4 formats and streaming scenarios, and can fully rewrite MP4 files with their media data. These enhancements make MP4Box.js a more powerful and flexible tool for web developers working with GPAC.Last but not least: many thanks to the community and our contributors. Long live MP4Box.js!

