{"id":31820301,"url":"https://github.com/muchdogesec/stixviewer","last_synced_at":"2025-10-11T12:24:40.724Z","repository":{"id":313900319,"uuid":"1053346990","full_name":"muchdogesec/stixviewer","owner":"muchdogesec","description":"STIX2 graph visualisation library in JS","archived":false,"fork":false,"pushed_at":"2025-10-09T12:16:53.000Z","size":3069,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-11T04:44:10.937Z","etag":null,"topics":["cti","stix","stix2","threat-intelligence"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/stixviewer","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/muchdogesec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-09T10:20:05.000Z","updated_at":"2025-10-09T12:15:26.000Z","dependencies_parsed_at":"2025-10-02T13:25:08.658Z","dependency_job_id":"a7b8a91a-e490-499e-9162-7f86c7de0352","html_url":"https://github.com/muchdogesec/stixviewer","commit_stats":null,"previous_names":["muchdogesec/stixviewer"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/muchdogesec/stixviewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchdogesec%2Fstixviewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchdogesec%2Fstixviewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchdogesec%2Fstixviewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchdogesec%2Fstixviewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muchdogesec","download_url":"https://codeload.github.com/muchdogesec/stixviewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muchdogesec%2Fstixviewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007159,"owners_count":26084247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["cti","stix","stix2","threat-intelligence"],"created_at":"2025-10-11T12:24:35.655Z","updated_at":"2025-10-11T12:24:40.717Z","avatar_url":"https://github.com/muchdogesec.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/stixviewer.svg)](https://badge.fury.io/js/stixviewer)\n\n# STIX Viewer\n\n[STIX Viewer](https://github.com/muchdogesec/stixviewer) is a JS library for embeddable interactive STIX2 graphs.\n\n![STIX Viewer graph](.github/stixviewer-graph.png)\n\n## Credits\n\nThis is a hard fork of [stixview](https://github.com/traut/stixview) create by Sergey Polzunov.\n\n## Motivation\n\nCTI (Cyber Threat Intelligence) is very much about telling stories. Information becomes intelligence when it is complimented with a context and is placed in a story. These stories are usually crystallised in the reports by an intelligence provider and disseminated to the customers.\n\nIf intelligence provider cares about structured machine-readable CTI, the reports produced will be supplemented with [STIX2](https://oasis-open.github.io/cti-documentation/) bundles. There is a gap there between a story, narrated in a report, and a structured CTI snapshot, represented by a STIX2 bundle.\n\nThe objective of STIX Viewer library is to provide easily embeddable STIX2 graphs with necessary level of interactivity, so that CTI community can create informative and engaging stories.\n\n## Demos\n\nTo see STIX Viewer in action, take a look at these demo pages:\n\n* [STIX2.1 demo](https://stixviewer.dogesec.com/dist/demos/stix21-demo.html) — sample graph with all STIX 2.1 objects.\n* [Storyline](https://stixviewer.dogesec.com/dist/demos/story.html) — multiple graphs per page, rendering selected entities from the same STIX bundle.\n* [Viewer](https://stixviewer.dogesec.com/dist/demos/viewer.html) — graph viewer with custom controls.\n* [Drag-n-drop](https://stixviewer.dogesec.com/dist/demos/drag-n-drop.html) — graph views with drag-n-drop enabled.\n* [Dark theme graph from inline data](https://stixviewer.dogesec.com/dist/demos/load-data.html) — rendering graph from inline STIX2 bundle and custom styling.\n* [TLP tags and custom sidebar content renderer](https://stixviewer.dogesec.com/dist/demos/tags-and-custom-sidebar.html) — TLP marking definitions shown as tags and sidebar is rendered with provided function.\n* [Examples of various configuration settings](https://stixviewer.dogesec.com/dist/demos/misc.html)\n\n## Usage\n\nTo use STIX Viewer in a browser, download the latest build from `dist` directory (`stixviewer.bundle.js`) and reference it from your HTML file:\n\n```html\n\u003cscript src=\"stixviewer.bundle.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\nOr to use STIX Viewer in your web apps, [install via npm](https://www.npmjs.com/package/stixviewer):\n\n```shell\nnpm i stixviewer\n```\n\n### Developers\n\nTo rebuild to reflect any changes you have made to the code (inc. the demos):\n\n```shell\nyarn build\n```\n\n## API\n\nThe library relies heavily on [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).\nOn page load, STIX Viewer will find all HTML elements with `data-stix-gist-id`, `data-stix-url` or `data-stix-allow-dragdrop` set and use these elements as graph holders.\n\nExample of a graph holder div:\n\n```html\n\u003cdiv data-stix-gist-id=\"6a0fbb0f6e7faf063c748b23f9c7dc62\"\n     data-show-sidebar=true\n     data-enable-mouse-zoom=false\n     data-graph-width=500\n     data-graph-height=300\u003e\n\u003c/div\u003e\n```\n\n### Data attributes\n\nEvery holder element _must have_ one of `data-stix-gist-id`, `data-stix-url` or `data-stix-allow-dragdrop` set, otherwise it will not be detected by the library.\n\nSTIX Viewer supports these `data-` attributes:\n\n* `stix-gist-id` — id of a gist that contains STIX2 bundle. if `gist-file` is not specified, first file will be used.\n* `gist-file` — name of a file from gist to be used as STIX2 bundle. Only used if `stix-gist-id` is set.\n* `stix-url` — URL pointing to a remote STIX2 bundle JSON file.\n* `stix-allow-dragdrop` (`false` by default) — enable ability to drag-n-drop STIX2 bundle into the graph element. If this property is set to `true` and `stix-gist-id` and `stix-url` are not specified, empty graph will be rendered.\n* `caption` — a title of the graph. Header is not shown if `caption` is not set.\n* `show-footer` (`true` by default) — show a footer with the download links to STIX2 bundle and PNG file.\n* `show-sidebar` (`true` by default) — enable a sidebar with object details, opened when object is clicked on.\n* `show-tlp-as-tags` (`true` by default) — show connected TLP marking definition objects as tags on entities.\n* `show-marking-nodes` (`true` by default) — show the marking definition nodes.\n* `show-labels` (`true` by default) — show node labels.\n* `show-idrefs` (`false` by default) — show placeholder objects for ids mentioned in the relationships but not present in a bundle.\n* `graph-layout` (`cola` by default) — name of the graph layout algorythm. Supported algorythms are `cola` , `klay`, `cose-bilkent`, `cise`, `grid` and `dagre`.\n* `enable-mouse-zoom` (`true` by default) — enable mouse wheel zoom.\n* `enable-panning` (`true` by default) — enable panning in the graph. If `false`, a graph has a fixed view. Users will still be able to drag nodes around.\n* `highlighted-objects` — a string with comma-separated STIX2 ids. If set, graph will contain _only objects with ids listed_.\n* `hidden-objects` — a string with comma-separated STIX2 ids. If set, objects with ids listed will be skipped and not rendered in the graph.\n* `min-zoom` (`0.3` by default) — minimum allowed zoom.\n* `max-zoom` (`2.5` by default) — maximum allowed zoom.\n* `graph-width` (all available width by default) — width of a graph element. Both pixel and % values are supported (see misc demo page for an example).\n* `graph-height` (`600` pixels by default) — height of a graph element. Both pixel and % values are supported (see misc demo page for an example).\n\n### Browser object\n\nThe library, when used in a browser, will register `stixview` variable on `window` object with these properties:\n\n* `registry` — a registry of graphs initiated on a page.\n* `onInit(selector, callback)` – listener hook for graph's init event on a DOM element that matches provided `selector` value (see [demo](https://stixviewer.dogesec.com/dist/demos/viewer.html) for usage example). Callback receive instance of a graph interface.\n* `onLoad(selector, callback)` – listener hook for graph's load event on a DOM element that matches provided `selector` value (see [demo](https://stixviewer.dogesec.com/dist/demos/viewer.html) for usage example). Callback receive instance of a graph interface.\n* `init(element, properties, initCallback, loadCallback)` — method that initiates a graph view in specified `element` with provided `properties` that override defaults (see [demo](https://stixviewer.dogesec.com/dist/demos/load-data.html) for usage example).\n\n### Graph object\n\nGraph is an object with properties:\n\n* `cy` – [cytoscape.js](http://js.cytoscape.org) graph object.\n* `element` — DOM element that holds a graph.\n* `dataProps` – configured data filtering properties.\n* `viewProps` – configured viewing properties.\n* `runLayout(name)` — run specific layout on a graph.\n* `reloadData()` — reload graph data with new data filtering properties.\n* `fit()` — fit graph fully into a graph view.\n* `toggleLabels(\u003cbool-value\u003e)` — show / hide node labels.\n* `toggleLoading(\u003cbool-value\u003e)` — show / hide loading overlay.\n* `loadData(data)` — load STIX2 bundle from `data` JSON object and render on a graph.\n* `loadDataFromFile(file)` — load STIX2 bundle from `file` file object and render on a graph.\n* `loadDataFromUrl(url)` — load STIX2 bundle from remote URL and render on a graph.\n* `loadDataFromParamUrl(paramName)` — load STIX2 bundle from remote URL, configured in HTTP GET paramter with name in `paramName` and render on a graph.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuchdogesec%2Fstixviewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuchdogesec%2Fstixviewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuchdogesec%2Fstixviewer/lists"}