Turborepo monorepo containing:

• packages/molstar-react — React wrapper around Mol* 4.11.0. The client entry owns the WebGL/plugin lifecycle and can be used by React client components or Next client components. The server entry contains DOM-free PDB parsing and server-renderable information components.
• apps/dev-app — Next.js App Router demo for uploading and visualising PDB files.

pnpm install
pnpm dev --filter dev-app

Open http://localhost:3000, choose a .pdb file, and the structure will be loaded into Mol* with basic molecule/protein statistics displayed beside it.

// Client component / React app
import { MolstarViewer } from "molstar-react/client";
import "molstar-react/styles.css";

export function Viewer({ file }: { file: File }) {
  return <MolstarViewer file={file} />;
}

For a server component, parse text without importing any browser or WebGL code:

import { PdbInfoFromText } from "molstar-react/server";

export function StructureInfo({ pdb }: { pdb: string }) {
  return <PdbInfoFromText pdb={pdb} />;
}

Validation commands:

pnpm format
pnpm format:check
pnpm lint
pnpm check
pnpm typecheck
pnpm build