Skip to main content


Helpers for loading JSON data asynchronously.

// access like this (preferred)
import {loadAllJSON} from "@liqvid/utils/json";

// or like this (legacy)
import {Utils} from "liqvid";
const {loadAllJSON} = Utils.json;

These can be inserted with the @json macro.


import {loadJSON, loadAllJSON, getJSON} from "@liqvid/utils/json";

/* let Typescript know what we're loading */
declare module "@liqvid/utils/json" {
interface GetJSONMap {
"recordings": {
/* add types here */

/* Option 1: load all at once, then access synchronously */
loadAllJSON().then(() => {
ReactDOM.createRoot(document.querySelector("main")).render(<MyVideo />);

function MyVideo() {
const recordings = getJSON("recordings");
// do stuff with recordings

/* Option 2: load asynchronously */
loadJSON("recordings").then(recordings => {
// do stuff with recordings


TypeScript interface for typing the JSON data you load. This is empty, you extend it in your code as in the example above.


Access a preloaded JSON record synchronously.

getJSON<K extends keyof GetJSONMap>(key: K): GetJSONMap[K]


Preload all JSON resources.

loadAllJSON(): Promise<void>


Load a JSON record asynchronously.

loadJSON<K extends keyof GetJSONMap>(key: K): Promise<GetJSONMap[K]>