ESRF logo PaNOSC logo

VSCode-H5Web: A VSCode extension to explore and visualize HDF5 files

Loïc Huder

European Synchrotron Radiation Facility, Grenoble, France

Picture of Grenoble with ESRF
European flag This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No. 823852
H5Web is a web-based viewer for HDF5 files written in React with WebGL visualisations

It supports the NeXus standard

Screenshot of H5Web
Click on the image to see the demo !

H5Web is versatile with regard to the data provenance

Can be served from a remote server Sketch showing arrows between H5Web in the browser and HSDS/h5grove solutions on remote server
From a local server (JupyterLab extension) Sketch showing arrows between H5Web in the browser and JupyterLab on the same computer
Can be read directly in the browser thanks to h5wasm! Sketch showing arrows between H5Web in the browser and H5Wasm also in the browser

Reading HDF5 in the web

Sketch showing arrows between H5Web in the browser and H5Wasm also in the browser
H5Wasm is a zero-dependency WebAssembly-powered library for reading (and writing) HDF5 files from JS (built on the HDF5 C API)

👉 H5wasm can read metadata and data of a HDF5 file by loading the binary blob in the browser

With H5web on the top, one can have a zero-dependency HDF5 viewer in the browser! (demo)

How does it help VSCode integration?

Visual Studio code is in fact a web application (written in JS)!
👉 The H5wasm/H5web setup is perfectly adapted!
✨ Demo of the extension VSCode-H5Web ✨

Demo highlights

  • Installation from Marketplace
  • Uses h5wasm to provide data and metadata
    → Not possible to open external links or compressed datasets
  • Default editor for several file extensions (.h5, .hdf, .nx, .nc4...)
    → Parametrizable by the user
  • Browsing and inspecting HDF5 entities
  • Displaying nD datasets with Line, Heatmap and Scatter (WebGL-based visualisations with react-three-fiber and visx)

Final words

Don't hesitate to try the extension!
A bug 🐛? A feature to suggest ✨?
Open an issue on GitHub!
Happy with the extension 👍? Leave a review!
Shout-out to
  • 📢 Axel Bocciarelli for the VSCode integration
  • 📢 Brian Maranville from NIST for h5wasm
European flag This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No. 823852 PaNOSC logo

Thank you !

Questions ?