{"id":15532354,"url":"https://github.com/traut/stixview","last_synced_at":"2025-10-26T04:03:23.972Z","repository":{"id":34508159,"uuid":"177214845","full_name":"traut/stixview","owner":"traut","description":"STIX2 graph visualisation library in JS","archived":false,"fork":false,"pushed_at":"2025-01-31T11:19:30.000Z","size":8274,"stargazers_count":90,"open_issues_count":0,"forks_count":18,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-23T04:12:30.897Z","etag":null,"topics":["cti","cyber-security","cyber-threat-intelligence","graph","library","security","stix","stix2"],"latest_commit_sha":null,"homepage":"https://traut.github.io/stixview/","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/traut.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}},"created_at":"2019-03-22T22:04:45.000Z","updated_at":"2025-01-31T11:19:27.000Z","dependencies_parsed_at":"2024-06-19T03:50:54.495Z","dependency_job_id":"bf69453e-2cc7-4cde-b8ec-164160a9f5a3","html_url":"https://github.com/traut/stixview","commit_stats":{"total_commits":103,"total_committers":4,"mean_commits":25.75,"dds":"0.029126213592232997","last_synced_commit":"ce45a8e274ac5d7f1e635419b8eb28f86c247a83"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traut%2Fstixview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traut%2Fstixview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traut%2Fstixview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traut%2Fstixview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/traut","download_url":"https://codeload.github.com/traut/stixview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247261600,"owners_count":20910108,"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","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","cyber-security","cyber-threat-intelligence","graph","library","security","stix","stix2"],"created_at":"2024-10-02T11:29:55.427Z","updated_at":"2025-10-26T04:03:18.935Z","avatar_url":"https://github.com/traut.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stixview\n\n[![npm version](https://badge.fury.io/js/stixview.svg)](https://badge.fury.io/js/stixview)\n\n[Stixview](https://github.com/traut/stixview) is a JS library for embeddable interactive STIX2 graphs.\n\n\u003e [!NOTE]  \n\u003e Hosted version of Stixview is available at [CTIChef.com](https://ctichef.com)\n\n![Stixview graph](https://raw.githubusercontent.com/traut/stixview/master/.github/stixview-graph.png)\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 [Stixview](https://github.com/traut/stixview) 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 Stixview in action, take a look at these demo pages:\n\n* [STIX2.1 demo](https://traut.github.io/stixview/dist/demos/stix21-demo.html) — sample graph with all STIX 2.1 objects.\n* [Storyline](https://traut.github.io/stixview/dist/demos/story.html) — multiple graphs per page, rendering selected entities from the same STIX bundle.\n* [Viewer](https://traut.github.io/stixview/dist/demos/viewer.html) — graph viewer with custom controls.\n* [Drag-n-drop](https://traut.github.io/stixview/dist/demos/drag-n-drop.html) — graph views with drag-n-drop enabled.\n* [Dark theme graph from inline data](https://traut.github.io/stixview/dist/demos/load-data.html) — rendering graph from inline STIX2 bundle and custom styling.\n* [TLP tags and custom sidebar content renderer](https://traut.github.io/stixview/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://traut.github.io/stixview/dist/demos/misc.html)\n\n## Usage\n\nTo use Stixview in a browser, download the latest build from `dist` directory (`stixview.bundle.js`) and reference it from your HTML file:\n\n```html\n\u003cscript src=\"stixview.bundle.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\nor use [unpkg](https://unpkg.com) CDN service:\n\n```html\n\u003cscript src=\"https://unpkg.com/stixview/dist/stixview.bundle.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\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, Stixview 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\nStixview 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://traut.github.io/stixview/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://traut.github.io/stixview/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://traut.github.io/stixview/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.\n\n## Build\n\n```shell\nyarn build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftraut%2Fstixview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftraut%2Fstixview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftraut%2Fstixview/lists"}