No framework

Nothing about the viewer needs a framework: it takes an element, opens a file into it, and reports what happens on a typed event bus. If your application is not a React one — or is a Web Component, a Svelte island, or a page with a script tag — this is the whole API.

import { createViewer } from '@genomdev/core/viewer';
import { docx, xlsx, pdf } from '@genomdev/genom/lazy';

const viewer = createViewer(document.querySelector('#pane')!, {
  formats: [docx, xlsx, pdf],
  fit: 'width',
  options: { xlsx: { sheetTabs: true } },
});

const off = viewer.on('page:change', ({ index, total }) => {
  label.textContent = `${index + 1} / ${total ?? '?'}`;
});

await viewer.open(file);

// later
off();
viewer.destroy();

Every format in one line

When an application does not know what it will be handed, @genomdev/genom/viewer is the same class with all four formats already registered lazily.

import { createViewer } from '@genomdev/genom/viewer';

const viewer = createViewer(element);
await viewer.open(file); // whatever it turns out to be

State and events

subscribe gives you the whole state as a store — status, progress, error, document — which is what a UI framework wants. on gives you individual named events, which is what a toolbar wants.