streamlit-node-editor 0.1.0__tar.gz

streamlit_node_editor-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Your Name
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

streamlit_node_editor-0.1.0/MANIFEST.in

@@ -0,0 +1 @@
+recursive-include streamlit_node_editor/frontend/build *

streamlit_node_editor-0.1.0/PKG-INFO

@@ -0,0 +1,217 @@
+Metadata-Version: 2.4
+Name: streamlit-node-editor
+Version: 0.1.0
+Summary: A ComfyUI/Blueprints-style node graph editor for Streamlit — typed ports, drag-to-connect, inline params
+Home-page: https://github.com/RhythrosaLabs/streamlit-node-editor
+Author: Your Name
+Author-email: you@example.com
+Classifier: Programming Language :: Python :: 3
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Operating System :: OS Independent
+Requires-Python: >=3.8
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: streamlit>=1.28.0
+Dynamic: author
+Dynamic: author-email
+Dynamic: classifier
+Dynamic: description
+Dynamic: description-content-type
+Dynamic: home-page
+Dynamic: license-file
+Dynamic: requires-dist
+Dynamic: requires-python
+Dynamic: summary
+
+# streamlit-node-editor
+
+A ComfyUI / Unreal Blueprints-style node graph editor for Streamlit. Define typed node types in Python, let users build graphs by dragging ports and connecting nodes, and get the full graph state back as structured JSON.
+
+![Node editor screenshot](https://raw.githubusercontent.com/RhythrosaLabs/streamlit-node-editor/main/docs/screenshot.png)
+
+## Features
+
+- **Typed ports** with color-coded data types — only compatible types can connect
+- **Drag-to-wire** — click an output port, drag, drop on a compatible input to create a connection
+- **Type validation** — incompatible connections are silently rejected
+- **Inline node parameters** — select dropdowns, number inputs, text inputs, and textareas inside each node
+- **Node palette** — searchable list of all available node types; right-click canvas or use toolbar button
+- **Click wire to delete** — no menu needed
+- **Delete / Backspace** removes the selected node and all its connections
+- **Collapse nodes** to save canvas space
+- **Pan + scroll-to-zoom** with proper SVG coordinate transform
+- **Animated dot-grid background**
+- Zero runtime dependencies beyond Streamlit (no React Flow, no external graph lib)
+
+## Installation
+
+```bash
+pip install streamlit-node-editor
+```
+
+## Quickstart — data pipeline builder
+
+```python
+import streamlit as st
+from streamlit_node_editor import st_node_editor
+
+NODE_DEFS = {
+    "CSV Source": {
+        "category": "Sources",
+        "headerColor": "#4ade80",
+        "inputs": [],
+        "outputs": [{"name": "dataframe", "type": "DATAFRAME"}],
+        "params": [
+            {"key": "path", "label": "File path", "type": "string", "default": "data.csv"},
+            {"key": "sep",  "label": "Separator", "type": "string", "default": ","},
+        ],
+    },
+    "Filter Rows": {
+        "category": "Transform",
+        "headerColor": "#38bdf8",
+        "inputs":  [{"name": "df_in",  "type": "DATAFRAME"}],
+        "outputs": [{"name": "df_out", "type": "DATAFRAME"}],
+        "params": [
+            {"key": "query", "label": "Query expr", "type": "string",
+             "default": "value > 0"},
+        ],
+    },
+    "Group By": {
+        "category": "Transform",
+        "headerColor": "#818cf8",
+        "inputs":  [{"name": "df_in",  "type": "DATAFRAME"}],
+        "outputs": [{"name": "df_out", "type": "DATAFRAME"}],
+        "params": [
+            {"key": "column", "label": "Column",   "type": "string"},
+            {"key": "agg",    "label": "Aggregate","type": "select",
+             "options": ["sum", "mean", "count", "min", "max"]},
+        ],
+    },
+    "Bar Chart": {
+        "category": "Outputs",
+        "headerColor": "#fb923c",
+        "inputs":  [{"name": "dataframe", "type": "DATAFRAME"}],
+        "outputs": [],
+        "params": [
+            {"key": "x", "label": "X column", "type": "string"},
+            {"key": "y", "label": "Y column", "type": "string"},
+        ],
+    },
+}
+
+graph = st_node_editor(NODE_DEFS, height=600, key="pipeline")
+
+if graph:
+    st.subheader("Graph state")
+    st.json(graph)
+
+    # Execute the pipeline
+    if st.button("Run pipeline"):
+        import pandas as pd
+        # Walk graph["connections"] in topological order and execute each node
+        # based on graph["nodes"][i]["type"] and graph["nodes"][i]["params"]
+        st.info("Pipeline execution logic goes here")
+```
+
+## API
+
+```python
+st_node_editor(node_defs, initial_nodes=None, initial_connections=None, height=700, key=None)
+```
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `node_defs` | `dict[str, dict]` | required | Node type registry |
+| `initial_nodes` | `list[dict]` | `[]` | Pre-placed nodes |
+| `initial_connections` | `list[dict]` | `[]` | Pre-existing wires |
+| `height` | `int` | `700` | Canvas height in pixels |
+| `key` | `str` | `None` | Streamlit widget key |
+
+### Node definition schema
+
+```python
+"Node Type Name": {
+    "category":    str,         # palette grouping
+    "headerColor": str,         # hex color for the node's title bar
+    "inputs": [
+        {"name": str, "type": str}   # type key must match a registered port type
+    ],
+    "outputs": [
+        {"name": str, "type": str}
+    ],
+    "params": [
+        {
+            "key":     str,
+            "label":   str,
+            "type":    str,          # "int" | "float" | "string" | "select" | "textarea"
+            "default": any,          # optional
+            "options": list[str],    # required when type == "select"
+        }
+    ],
+}
+```
+
+### Built-in port types
+
+| Type | Color | Typical use |
+|------|-------|-------------|
+| `IMAGE` | green | Pixel data |
+| `LATENT` | purple | Latent tensors |
+| `MODEL` | orange | Neural network weights |
+| `CLIP` | yellow | Text encoders |
+| `VAE` | red | Variational autoencoders |
+| `INT` | blue | Integer values |
+| `FLOAT` | indigo | Float values |
+| `STRING` | stone | Text |
+| `MASK` | teal | Binary masks |
+| `ANY` | gray | Accepts any type |
+
+Define your own types freely in `node_defs` — any unrecognized type string uses the `ANY` gray color.
+
+### Return value
+
+```python
+{
+    "nodes": [
+        {
+            "id":     str,
+            "type":   str,
+            "x":      float,
+            "y":      float,
+            "params": {key: value, ...}
+        },
+        ...
+    ],
+    "connections": [
+        {
+            "id":       str,
+            "fromNode": str,   # node id
+            "fromPort": int,   # output port index
+            "toNode":   str,   # node id
+            "toPort":   int,   # input port index
+        },
+        ...
+    ]
+}
+```
+
+## Development
+
+```bash
+git clone https://github.com/RhythrosaLabs/streamlit-node-editor
+cd streamlit-node-editor
+
+cd streamlit_node_editor/frontend
+npm install
+npm start   # dev server on :3004
+
+# separate terminal
+cd ../..
+pip install -e .
+# Set _RELEASE = False in streamlit_node_editor/__init__.py
+streamlit run example.py
+```
+
+## License
+
+MIT

streamlit_node_editor-0.1.0/README.md

@@ -0,0 +1,192 @@
+# streamlit-node-editor
+
+A ComfyUI / Unreal Blueprints-style node graph editor for Streamlit. Define typed node types in Python, let users build graphs by dragging ports and connecting nodes, and get the full graph state back as structured JSON.
+
+![Node editor screenshot](https://raw.githubusercontent.com/RhythrosaLabs/streamlit-node-editor/main/docs/screenshot.png)
+
+## Features
+
+- **Typed ports** with color-coded data types — only compatible types can connect
+- **Drag-to-wire** — click an output port, drag, drop on a compatible input to create a connection
+- **Type validation** — incompatible connections are silently rejected
+- **Inline node parameters** — select dropdowns, number inputs, text inputs, and textareas inside each node
+- **Node palette** — searchable list of all available node types; right-click canvas or use toolbar button
+- **Click wire to delete** — no menu needed
+- **Delete / Backspace** removes the selected node and all its connections
+- **Collapse nodes** to save canvas space
+- **Pan + scroll-to-zoom** with proper SVG coordinate transform
+- **Animated dot-grid background**
+- Zero runtime dependencies beyond Streamlit (no React Flow, no external graph lib)
+
+## Installation
+
+```bash
+pip install streamlit-node-editor
+```
+
+## Quickstart — data pipeline builder
+
+```python
+import streamlit as st
+from streamlit_node_editor import st_node_editor
+
+NODE_DEFS = {
+    "CSV Source": {
+        "category": "Sources",
+        "headerColor": "#4ade80",
+        "inputs": [],
+        "outputs": [{"name": "dataframe", "type": "DATAFRAME"}],
+        "params": [
+            {"key": "path", "label": "File path", "type": "string", "default": "data.csv"},
+            {"key": "sep",  "label": "Separator", "type": "string", "default": ","},
+        ],
+    },
+    "Filter Rows": {
+        "category": "Transform",
+        "headerColor": "#38bdf8",
+        "inputs":  [{"name": "df_in",  "type": "DATAFRAME"}],
+        "outputs": [{"name": "df_out", "type": "DATAFRAME"}],
+        "params": [
+            {"key": "query", "label": "Query expr", "type": "string",
+             "default": "value > 0"},
+        ],
+    },
+    "Group By": {
+        "category": "Transform",
+        "headerColor": "#818cf8",
+        "inputs":  [{"name": "df_in",  "type": "DATAFRAME"}],
+        "outputs": [{"name": "df_out", "type": "DATAFRAME"}],
+        "params": [
+            {"key": "column", "label": "Column",   "type": "string"},
+            {"key": "agg",    "label": "Aggregate","type": "select",
+             "options": ["sum", "mean", "count", "min", "max"]},
+        ],
+    },
+    "Bar Chart": {
+        "category": "Outputs",
+        "headerColor": "#fb923c",
+        "inputs":  [{"name": "dataframe", "type": "DATAFRAME"}],
+        "outputs": [],
+        "params": [
+            {"key": "x", "label": "X column", "type": "string"},
+            {"key": "y", "label": "Y column", "type": "string"},
+        ],
+    },
+}
+
+graph = st_node_editor(NODE_DEFS, height=600, key="pipeline")
+
+if graph:
+    st.subheader("Graph state")
+    st.json(graph)
+
+    # Execute the pipeline
+    if st.button("Run pipeline"):
+        import pandas as pd
+        # Walk graph["connections"] in topological order and execute each node
+        # based on graph["nodes"][i]["type"] and graph["nodes"][i]["params"]
+        st.info("Pipeline execution logic goes here")
+```
+
+## API
+
+```python
+st_node_editor(node_defs, initial_nodes=None, initial_connections=None, height=700, key=None)
+```
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `node_defs` | `dict[str, dict]` | required | Node type registry |
+| `initial_nodes` | `list[dict]` | `[]` | Pre-placed nodes |
+| `initial_connections` | `list[dict]` | `[]` | Pre-existing wires |
+| `height` | `int` | `700` | Canvas height in pixels |
+| `key` | `str` | `None` | Streamlit widget key |
+
+### Node definition schema
+
+```python
+"Node Type Name": {
+    "category":    str,         # palette grouping
+    "headerColor": str,         # hex color for the node's title bar
+    "inputs": [
+        {"name": str, "type": str}   # type key must match a registered port type
+    ],
+    "outputs": [
+        {"name": str, "type": str}
+    ],
+    "params": [
+        {
+            "key":     str,
+            "label":   str,
+            "type":    str,          # "int" | "float" | "string" | "select" | "textarea"
+            "default": any,          # optional
+            "options": list[str],    # required when type == "select"
+        }
+    ],
+}
+```
+
+### Built-in port types
+
+| Type | Color | Typical use |
+|------|-------|-------------|
+| `IMAGE` | green | Pixel data |
+| `LATENT` | purple | Latent tensors |
+| `MODEL` | orange | Neural network weights |
+| `CLIP` | yellow | Text encoders |
+| `VAE` | red | Variational autoencoders |
+| `INT` | blue | Integer values |
+| `FLOAT` | indigo | Float values |
+| `STRING` | stone | Text |
+| `MASK` | teal | Binary masks |
+| `ANY` | gray | Accepts any type |
+
+Define your own types freely in `node_defs` — any unrecognized type string uses the `ANY` gray color.
+
+### Return value
+
+```python
+{
+    "nodes": [
+        {
+            "id":     str,
+            "type":   str,
+            "x":      float,
+            "y":      float,
+            "params": {key: value, ...}
+        },
+        ...
+    ],
+    "connections": [
+        {
+            "id":       str,
+            "fromNode": str,   # node id
+            "fromPort": int,   # output port index
+            "toNode":   str,   # node id
+            "toPort":   int,   # input port index
+        },
+        ...
+    ]
+}
+```
+
+## Development
+
+```bash
+git clone https://github.com/RhythrosaLabs/streamlit-node-editor
+cd streamlit-node-editor
+
+cd streamlit_node_editor/frontend
+npm install
+npm start   # dev server on :3004
+
+# separate terminal
+cd ../..
+pip install -e .
+# Set _RELEASE = False in streamlit_node_editor/__init__.py
+streamlit run example.py
+```
+
+## License
+
+MIT

streamlit_node_editor-0.1.0/setup.cfg

@@ -0,0 +1,4 @@
+[egg_info]
+tag_build = 
+tag_date = 0
+

streamlit_node_editor-0.1.0/setup.py

@@ -0,0 +1,21 @@
+from setuptools import setup, find_packages
+
+setup(
+    name="streamlit-node-editor",
+    version="0.1.0",
+    author="Your Name",
+    author_email="you@example.com",
+    description="A ComfyUI/Blueprints-style node graph editor for Streamlit — typed ports, drag-to-connect, inline params",
+    long_description=open("README.md").read(),
+    long_description_content_type="text/markdown",
+    url="https://github.com/RhythrosaLabs/streamlit-node-editor",
+    packages=find_packages(),
+    include_package_data=True,
+    classifiers=[
+        "Programming Language :: Python :: 3",
+        "License :: OSI Approved :: MIT License",
+        "Operating System :: OS Independent",
+    ],
+    python_requires=">=3.8",
+    install_requires=["streamlit>=1.28.0"],
+)

streamlit_node_editor-0.1.0/streamlit_node_editor/__init__.py

@@ -0,0 +1,120 @@
+import os
+import streamlit.components.v1 as components
+
+_RELEASE = True
+
+if _RELEASE:
+    _component_func = components.declare_component(
+        "streamlit_node_editor",
+        path=os.path.join(os.path.dirname(__file__), "frontend/build"),
+    )
+else:
+    _component_func = components.declare_component(
+        "streamlit_node_editor",
+        url="http://localhost:3001",
+    )
+
+
+def st_node_editor(node_defs, initial_nodes=None, initial_connections=None,
+                   height=700, key=None):
+    """
+    Render a ComfyUI / Unreal Blueprints-style node graph editor.
+
+    Users can add nodes from a palette, connect typed ports by dragging,
+    edit inline parameters, and delete nodes or wires interactively.
+
+    Parameters
+    ----------
+    node_defs : dict[str, dict]
+        Registry of available node types. Each entry::
+
+            "Node Name": {
+                "category": str,          # groups nodes in the palette
+                "headerColor": str,       # hex color for the node header bar
+                "inputs": [               # list of input port definitions
+                    {"name": str, "type": str},   # type must be a key in port_types
+                ],
+                "outputs": [              # list of output port definitions
+                    {"name": str, "type": str},
+                ],
+                "params": [               # inline editable parameters
+                    {
+                        "key":      str,
+                        "label":    str,
+                        "type":     str,          # "int" | "float" | "string" | "select" | "textarea"
+                        "default":  any,          # optional default value
+                        "options":  list[str],    # required for type="select"
+                    }
+                ],
+            }
+
+    initial_nodes : list[dict], optional
+        Pre-placed nodes on load. Each dict::
+
+            {"id": str, "type": str, "x": float, "y": float,
+             "params": {key: value}}
+
+    initial_connections : list[dict], optional
+        Pre-existing wires. Each dict::
+
+            {"id": str, "fromNode": str, "fromPort": int,
+                        "toNode":   str, "toPort":   int}
+
+    height : int
+        Canvas height in pixels. Default 700.
+    key : str, optional
+        Streamlit widget key.
+
+    Returns
+    -------
+    dict | None
+        Current graph state::
+
+            {
+                "nodes": [
+                    {"id": str, "type": str, "x": float, "y": float,
+                     "params": {key: value}},
+                    ...
+                ],
+                "connections": [
+                    {"id": str, "fromNode": str, "fromPort": int,
+                               "toNode":   str, "toPort":   int},
+                    ...
+                ],
+            }
+
+        Returns None before any interaction.
+
+    Example
+    -------
+    >>> from streamlit_node_editor import st_node_editor
+    >>>
+    >>> NODE_DEFS = {
+    ...     "Load Data": {
+    ...         "category": "Sources",
+    ...         "headerColor": "#4ade80",
+    ...         "inputs": [],
+    ...         "outputs": [{"name": "dataframe", "type": "DATAFRAME"}],
+    ...         "params": [{"key": "path", "label": "CSV path", "type": "string"}],
+    ...     },
+    ...     "Filter Rows": {
+    ...         "category": "Transform",
+    ...         "headerColor": "#38bdf8",
+    ...         "inputs":  [{"name": "dataframe", "type": "DATAFRAME"}],
+    ...         "outputs": [{"name": "dataframe", "type": "DATAFRAME"}],
+    ...         "params": [{"key": "query", "label": "Query", "type": "string"}],
+    ...     },
+    ... }
+    >>>
+    >>> graph = st_node_editor(NODE_DEFS, height=600, key="pipeline")
+    >>> if graph:
+    ...     st.json(graph)
+    """
+    return _component_func(
+        node_defs=node_defs,
+        initial_nodes=initial_nodes or [],
+        initial_connections=initial_connections or [],
+        height=height,
+        key=key,
+        default=None,
+    )

streamlit_node_editor-0.1.0/streamlit_node_editor/frontend/build/asset-manifest.json

@@ -0,0 +1,10 @@
+{
+  "files": {
+    "main.js": "./static/js/main.9884c600.js",
+    "index.html": "./index.html",
+    "main.9884c600.js.map": "./static/js/main.9884c600.js.map"
+  },
+  "entrypoints": [
+    "static/js/main.9884c600.js"
+  ]
+}

streamlit_node_editor-0.1.0/streamlit_node_editor/frontend/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Streamlit Node Editor</title><script defer="defer" src="./static/js/main.9884c600.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>