{"id":26215849,"url":"https://github.com/playcanvas/pcui-graph","last_synced_at":"2026-03-07T02:09:15.439Z","repository":{"id":38308742,"uuid":"306373992","full_name":"playcanvas/pcui-graph","owner":"playcanvas","description":"A PCUI extension for creating node-based graphs","archived":false,"fork":false,"pushed_at":"2026-02-22T10:24:42.000Z","size":8406,"stargazers_count":143,"open_issues_count":8,"forks_count":20,"subscribers_count":8,"default_branch":"main","last_synced_at":"2026-02-22T15:07:30.247Z","etag":null,"topics":["javascript","pcui","playcanvas","reactjs","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://developer.playcanvas.com/user-manual/pcui/pcui-graph/","language":"JavaScript","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/playcanvas.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":"2020-10-22T15:03:59.000Z","updated_at":"2026-02-22T10:24:45.000Z","dependencies_parsed_at":"2024-02-04T16:14:02.138Z","dependency_job_id":"dd53397e-8f04-45e0-950f-e201ffbd0ed3","html_url":"https://github.com/playcanvas/pcui-graph","commit_stats":{"total_commits":94,"total_committers":7,"mean_commits":"13.428571428571429","dds":0.4042553191489362,"last_synced_commit":"ef84d9556f52237ec2c55417739504ecc2134655"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/playcanvas/pcui-graph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fpcui-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fpcui-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fpcui-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fpcui-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/playcanvas","download_url":"https://codeload.github.com/playcanvas/pcui-graph/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fpcui-graph/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30204114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"ssl_error","status_checked_at":"2026-03-06T18:57:34.882Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["javascript","pcui","playcanvas","reactjs","ui","ui-components"],"created_at":"2025-03-12T11:18:01.882Z","updated_at":"2026-03-07T02:09:10.425Z","avatar_url":"https://github.com/playcanvas.png","language":"JavaScript","readme":"# PCUI Graph - Node-based Graphs for PCUI\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/playcanvas/pcui-graph/blob/main/LICENSE)\n[![NPM Version](https://img.shields.io/npm/v/@playcanvas/pcui-graph.svg?style=flat?style=flat)](https://www.npmjs.com/package/@playcanvas/pcui-graph)\n[![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/pcui-graph)](https://npmtrends.com/@playcanvas/pcui=gra[j)\n\n| [User Guide](https://developer.playcanvas.com/user-manual/pcui/pcui-graph/) | [API Reference](https://api.playcanvas.com/pcui-graph/) | [React Examples](https://playcanvas.github.io/pcui-graph/storybook/) | [Blog](https://blog.playcanvas.com/) | [Forum](https://forum.playcanvas.com/) | [Discord](https://discord.gg/RSaMRzg) |\n\n![pcui-graph-banner](https://github.com/user-attachments/assets/e0aa8953-221b-4122-b8ce-247c389ae6d6)\n\nCreate node based visual graphs in the browser. Supports undirected / directed graphs as well as visual scripting graphs containing nodes with input / output ports. Your graphs can be saved to a JSON file and loaded back into a new graph view at any time.\n\n## Getting Started\n\nFirst install PCUI Graph into your npm project:\n\n    npm install @playcanvas/pcui-graph --save-dev\n\nYou can then use the library in your own project by importing the PCUI Graph build and its styling file into your project. The graph can then be instantiated as follows:\n\n```javascript\nimport Graph from '@playcanvas/pcui-graph';\nimport '@playcanvas/pcui/styles';\nimport '@playcanvas/pcui-graph/styles';\n\nconst schema = {\n    nodes: {\n        0: {\n            name: 'Hello',\n            fill: 'red'\n        },\n        1: {\n            name: 'World',\n            fill: 'green'\n        }\n    },\n    edges: {\n        0: {\n            from: [0], // this edge can connect nodes of type 0\n            to: [1], // to nodes of type 1,\n            stroke: 'blue'\n        }\n    }\n}\n\nconst graph = new Graph(schema);\ndocument.body.appendChild(graph.dom);\n```\n\nThe library is also available on [npm](https://www.npmjs.com/package/@playcanvas/pcui-graph) and can be installed in your project with:\n\n    npm install --save @playcanvas/pcui-graph @playcanvas/pcui @playcanvas/observer\n\nThe npm package includes two builds of the library:\n\n    @playcanvas/pcui-graph/dist/pcui-graph.js  // UMD build (requires that the pcui and observer libraries are present in the global namespace)\n    @playcanvas/pcui-graph/dist/pcui-graph.mjs // module build (requires a build tool like rollup / webpack)\n\n## Storybook\n\nExamples of graphs created using PCUI Graph are available in this library's [storybook](https://playcanvas.github.io/pcui-graph/storybook/). Alternatively you can run the storybook locally and use it as a development environment for your own graphs. To do so, run the following commands in this projects root directory:\n\n    npm install\n    npm run storybook\n\nThis will automatically open the storybook in a new browser tab.\n\n# Documentation\n\nInformation on building the documentation can be found in the [docs](./docs/README.md) directory.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaycanvas%2Fpcui-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplaycanvas%2Fpcui-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaycanvas%2Fpcui-graph/lists"}