{"id":19710842,"url":"https://github.com/vemonet/nanopub-js","last_synced_at":"2026-05-19T07:32:40.649Z","repository":{"id":191252546,"uuid":"610219655","full_name":"vemonet/nanopub-js","owner":"vemonet","description":"🧬 A Web Component to display Nanopublications","archived":false,"fork":false,"pushed_at":"2023-03-20T08:05:00.000Z","size":999,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-02T08:23:18.563Z","etag":null,"topics":["nanopublications","web-components"],"latest_commit_sha":null,"homepage":"https://vemonet.github.io/nanopub-js","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vemonet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-06T10:37:50.000Z","updated_at":"2025-09-01T14:17:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"654d5bf5-e4ce-4b71-9fdb-8609f534de3e","html_url":"https://github.com/vemonet/nanopub-js","commit_stats":null,"previous_names":["vemonet/nanopub-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vemonet/nanopub-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vemonet%2Fnanopub-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vemonet%2Fnanopub-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vemonet%2Fnanopub-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vemonet%2Fnanopub-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vemonet","download_url":"https://codeload.github.com/vemonet/nanopub-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vemonet%2Fnanopub-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33206320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-19T07:16:55.748Z","status":"ssl_error","status_checked_at":"2026-05-19T07:16:54.366Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nanopublications","web-components"],"created_at":"2024-11-11T22:08:36.536Z","updated_at":"2026-05-19T07:32:40.631Z","avatar_url":"https://github.com/vemonet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧬 Web Components to display Nanopublications\n\n`@nanopub/display` is a library of standard web components to easily display [Nanopublications](https://nanopub.net) in applications built using any web framework (pure HTML, React, Angular, Vue, Svelte).\n\nIf you want to improve this library, please refer to the [contribute page](/pages/CONTRIBUTING.html) which details how to use the library in development.\n\n## 🏷️ As easy as HTML\n\n`\u003cnanopub-display\u003e` and `\u003cnanopub-status\u003e` are just HTML elements, you can use them anywhere you can use HTML:\n\n```html\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cscript type=\"module\" src=\"https://unpkg.com/@nanopub/display?module\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cdiv style=\"min-height: 100vh; width: 100%;\"\u003e\n      \u003cdiv\u003e\n        \u003cnanopub-status url=\"https://purl.org/np/RAHtkscyyyJDLvWRuINckQrn5rbHzQKvwakNVC3fmRzGU\" /\u003e\n      \u003c/div\u003e\n      \u003cnanopub-display url=\"https://purl.org/np/RAHtkscyyyJDLvWRuINckQrn5rbHzQKvwakNVC3fmRzGU\" /\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e `\u003cnanopub-display\u003e` enables developers and users to control which graphs from the nanopublication are displayed.\n\n\u003cdiv\u003e\n  \u003cnanopub-status url=\"https://purl.org/np/RAHtkscyyyJDLvWRuINckQrn5rbHzQKvwakNVC3fmRzGU\" /\u003e\n\u003c/div\u003e\n\u003cnanopub-display url=\"https://purl.org/np/RAHtkscyyyJDLvWRuINckQrn5rbHzQKvwakNVC3fmRzGU\"\u003e\u003c/nanopub-display\u003e\n\n## 💫 Declarative rendering\n\n`@nanopub/display` can be used with popular declarative rendering libraries like **React**, **Angular**, **Vue**, Svelte, and lit-html\n\n```js\nimport {html, render} from 'lit-html'\nimport '@nanopub/display'\n\nconst np = 'https://purl.org/np/RAHtkscyyyJDLvWRuINckQrn5rbHzQKvwakNVC3fmRzGU'\n\nrender(\n  html`\n    \u003ch4\u003eThis is a \u0026lt;nanopub-display\u0026gt;\u003c/h4\u003e\n    \u003cnanopub-display url=${np} /\u003e\n  `,\n  document.body\n)\n```\n\n## 🧶 Cytoscape configuration\n\n`@nanopub/display` can also be used to generate a cytoscape configuration to nicely display your nanopublication with [CytoscapeJS](https://js.cytoscape.org).\n\n⚠️ Cytoscape is not imported by `@nanopub/display`, you will need to make sure to install the following packages first:\n\n```bash\nnpm i --save cytoscape cytoscape-cose-bilkent cytoscape-popper\n# or\nyarn add cytoscape cytoscape-cose-bilkent cytoscape-popper\n```\n\nThe code below shows how to easily generate the cytoscape configuration, please refer to the [cytoscape documentation](https://js.cytoscape.org/#getting-started) to see how to setup your cytoscape container.\n\n```ts\nimport {cyGetConfig, cyShowNodeOnClick, cyHighlightConnectedEdges} from '@nanopub/display';\nimport cytoscape, { Core } from 'cytoscape';\nimport popper from 'cytoscape-popper';\nimport COSEBilkent from 'cytoscape-cose-bilkent';\n\n// Get the cytoscape div container, and nanopub RDF\nconst cyContainer?: HTMLDivElement;\nconst nanopubTrigRdfString?: string;\n\n// Generate the cytoscape config for a given nanopub RDF\nconst cytoscapeConfig = cyGetConfig(nanopubTrigRdfString),\n\n// Provide the generated config and cytoscape container to the cytoscape builder\nconst cy = cytoscape({\n    ...cytoscapeConfig,\n    container: cyContainer\n})\n\n// Hightlight connected and show a card with the content of the node on click\ncy.on('tap', \"node\", (e: any) =\u003e cytoscapeHighlightConnectedEdges(e, cy))\ncy.on('tap', 'node', cytoscapeShowNodeOnClick);\n```\n\n# 📥️ Install\n\n`\u003cnanopub-display\u003e` is distributed on npm, so you can install it in your project, or use it via npm CDNs like [unpkg.com](https://unpkg.com).\n\n## 📦️ Install with a package manager\n\nThe most convenient way to install a package in your project, using either `npm` or `yarn`:\n\n```bash\nnpm i --save @nanopub/display\n# or\nyarn add @nanopub/display\n```\n\n### ⚛️ Define types for React apps\n\nTo fix JSX types, for example when used in a React app, you will need to add this declaration to one of your project `.d.ts` file:\n\n```ts\ndeclare namespace JSX {\n  interface NanopubDisplay {\n    url?: string\n    rdf?: string\n  }\n  interface NanopubStatus {\n    url?: string\n  }\n  interface IntrinsicElements {\n    'nanopub-display': NanopubDisplay\n    'nanopub-status': NanopubStatus\n  }\n}\n```\n\n## 🌐 Import from a CDN\n\nnpm CDNs like [unpkg.com](https://unpkg.com) or [jsdelivr.com](https://www.jsdelivr.com) can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively, or minified bundles.\n\nFor this element to work from unpkg.com specifically, you need to include the `?module` query parameter, which tells unpkg.com to rewrite \"bare\" module specifiers to full URLs.\n\n### 🛩️ Import Module\n\nIn HTML:\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/@nanopub/display?module\"\u003e\u003c/script\u003e\n```\n\nIn JavaScript:\n\n```js\nimport {NanopubDisplay} from 'https://unpkg.com/@nanopub/display?module'\n```\n\n### 🚛 Import Bundle\n\nWe also distribute Nanopub Display as a minified bundle with all dependencies pre-included (~60kB).\n\nImport the latest version:\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nanopub/display/dist/nanopub-display.min.js\"\u003e\u003c/script\u003e\n```\n\nIn production we recommend to use a specific version:\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nanopub/display@0.0.1/dist/nanopub-display.min.js\"\u003e\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvemonet%2Fnanopub-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvemonet%2Fnanopub-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvemonet%2Fnanopub-js/lists"}