{"id":21146369,"url":"https://github.com/bhallstein/nodz","last_synced_at":"2025-03-14T13:44:19.864Z","repository":{"id":44534115,"uuid":"450096720","full_name":"bhallstein/nodz","owner":"bhallstein","description":"Javascript node tree editor. Small and efficient with minimal dependencies.","archived":false,"fork":false,"pushed_at":"2022-02-10T14:06:16.000Z","size":72,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"int","last_synced_at":"2025-01-21T07:42:45.606Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bhallstein.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-20T12:53:48.000Z","updated_at":"2022-05-12T18:05:32.000Z","dependencies_parsed_at":"2022-09-13T13:03:39.391Z","dependency_job_id":null,"html_url":"https://github.com/bhallstein/nodz","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhallstein%2Fnodz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhallstein%2Fnodz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhallstein%2Fnodz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhallstein%2Fnodz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhallstein","download_url":"https://codeload.github.com/bhallstein/nodz/tar.gz/refs/heads/int","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243589287,"owners_count":20315467,"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":[],"created_at":"2024-11-20T08:53:12.665Z","updated_at":"2025-03-14T13:44:19.833Z","avatar_url":"https://github.com/bhallstein.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nodz\n\nA tiny javascript node editor with minimal dependencies.\n\n\n## Sample code\n\n```js\nimport {render} from 'react'\nimport Nodz from 'nodz'\n\nconst node_styles = selected =\u003e ({\n  backgroundColor: '#f3f3f3',\n  padding: '0.5rem',\n  borderRadius: '2px',\n  boxShadow: selected ? '0px 0px 3px 1px #29AFFF' : 'none',\n  border: selected ? '1px solid #29AFFF' : '1px solid #ccc',\n})\n\nfunction A() {\n  return \u003cdiv style={{width: '6rem'}}\u003eA\u003c/div\u003e\n}\nfunction B() {\n  return \u003cdiv style={{width: '7rem', height: '6rem'}}\u003eB\u003c/div\u003e\n}\nfunction C() {\n  return \u003cdiv style={{width: '7rem', height: '2rem'}}\u003eC\u003c/div\u003e\n}\n\nconst node_types = {A, B, C}\nconst node_graph = {\n  node_type: 'A',\n}\n\nfunction App() {\n  return (\n    \u003cdiv style={{padding: '2rem'}}\u003e\n      \u003cdiv style={{minHeight: '30rem', position: 'relative'}}\u003e\n        \u003cNodz node_types={node_types}\n              graph={node_graph}\n              node_styles={node_styles} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nrender(\u003cApp /\u003e, document.body)\n```\n\n\n## Children types\n\nNode exit types:\n\n- indexed - numeric children\n          - default\n          - render as line to AddChildBtn\n          - optional settings: max\n          - e.g.: {children_type: 'simple', max_children: 3}\n- named - a set of named children\n        - render as, originating from the parent node, a set of mini-nodes (one for each named child), each then leading to a AddChildBtn\n        - each child has optional setting: max\n        - e.g.:\n          {\n            children_type: 'named',\n            children: [\n              {name: 'True'},\n              {name: 'False', max: 2},\n            ]\n          }\n- none - children are not allowed\n       - e.g.: {children_type: 'none'}\n\nNB: all 'plus' interaction points should either use a preset node type, or\n//     call out to user code to get the node types \u0026 descriptions amically\n    (so allowing a node to customise its possible children based on context)\n    (or, use user-supplied react elements instead of built in)\n- Allow external elements to be passed into node addition popover","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhallstein%2Fnodz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhallstein%2Fnodz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhallstein%2Fnodz/lists"}