# ontologyviewer [日本語](README.ja.md) · [API](docs/API.md) · [Publishing](docs/PUBLISHING.md) A standalone, read-only Turtle ontology viewer for web pages. It renders class-focused **Schema** diagrams and raw **Triples** graphs with Cytoscape, without a server, account, telemetry, or ontology network requests. ## Quick start ```html ``` The inert `text/turtle` script is retained in the DOM and hidden while its viewer is active. It accepts ordinary Turtle `<...>` IRIs without HTML entity escaping. Avoid a literal `` sequence in that Turtle because HTML treats it as the closing tag. A `

` remains supported, but literal HTML source must write `<` as `<`; `destroy()` restores either source element.

Do not double-click the files under `examples/`: browser ES Modules are commonly blocked on `file:` URLs. Run `npm run examples` and open `http://127.0.0.1:4173/examples/index.html`. The example page now keeps an actionable message visible when it is opened incorrectly or when `dist/` has not been built.

For reproducible pages, pin a complete version (`@0.2.0`). A major selector such as `@10` follows compatible releases but can change the delivered bytes.

## Install from npm

```bash
npm install --save-exact ontologyviewer@0.2.0
```

```ts
import ontologyviewer, { render, getInstance } from "ontologyviewer";

const manager = ontologyviewer.initialize({
  startOnLoad: true,
  theme: "auto",
  locale: "auto",
});
await manager.ready;
```

## Features

- Schema cards with datatype properties, icons, color hints, cardinality, inferred-relation styling, statistics, legend, and read-only Inspector.
- Raw Triples view, search, neighborhood focus, pan, zoom, fit, fCoSE/Dagre layouts, node dragging, and PNG export.
- Compact Triples view (on by default): labels, comments, and standard vocabulary terms are folded into the nodes that reference them, which removed two thirds of the boxes and 70% of the edges on a 1182-triple schema ontology. A toolbar toggle expands them again; set `compactTriples: false` or `data-compact-triples="false"` to start expanded.
- Multiple isolated viewers in one document.
- English and Japanese UI; automatic light/dark theme tracking.
- Optional, validated `localStorage` layout persistence.
- Safe parse failures with line/column information and recovery through `update()`.
- One-import CSS injection, plus an external-CSS mode for restrictive CSPs.
- No editor controls, remote imports, fetch/XHR, telemetry, cookies, or accounts.

## HTML configuration

```html

```

API options take precedence over `data-*` values. Accepted heights are numeric `px`, `rem`, `em`, `vh`, `vw`, or `%` lengths. Invalid values fall back safely to `600px`.

## Programmatic API

```ts
const source = document.querySelector("#ontology")!;
const instance = ontologyviewer.render(source, {
  baseIri: "https://example.org/base/",
  defaultView: "schema",
  compactTriples: true,
  layout: "fcose",
  storageKey: "example-layout", // omit to disable persistence
  onError(error) {
    console.error(error.line, error.column, error.message);
  },
});

await instance.update(nextTurtle);
instance.fit();
instance.runLayout("dagre");
const png: Blob = await instance.exportPng();
instance.destroy();

ontologyviewer.getInstance(source); // undefined after destroy()
```

`initialize()` does not install a `MutationObserver`. For dynamically inserted source elements, call `manager.scan(container)` or `render(element)` explicitly. With `startOnLoad: true`, the initial scan waits for `window.load` unless the document is already complete, avoiding races with Gatsby/React hydration that can replace server-rendered DOM.

See [API.md](docs/API.md) for the complete contracts and lifecycle states.

## Strict CSP / external CSS

Automatic style injection is convenient but requires an inline `