{"id":49530044,"url":"https://github.com/tldraw/image-pipeline-template","last_synced_at":"2026-05-02T06:44:50.494Z","repository":{"id":345326823,"uuid":"1152932193","full_name":"tldraw/image-pipeline-template","owner":"tldraw","description":"Image pipeline starter kit for tldraw","archived":false,"fork":false,"pushed_at":"2026-04-21T16:38:22.000Z","size":139,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-02T06:44:01.900Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/tldraw.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,"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":"2026-02-08T16:51:18.000Z","updated_at":"2026-04-21T16:38:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tldraw/image-pipeline-template","commit_stats":null,"previous_names":["tldraw/image-pipeline-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tldraw/image-pipeline-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fimage-pipeline-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fimage-pipeline-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fimage-pipeline-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fimage-pipeline-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tldraw","download_url":"https://codeload.github.com/tldraw/image-pipeline-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fimage-pipeline-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32525896,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"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":[],"created_at":"2026-05-02T06:44:49.800Z","updated_at":"2026-05-02T06:44:50.488Z","avatar_url":"https://github.com/tldraw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv alt style=\"text-align: center; transform: scale(.5);\"\u003e\n\t\u003cpicture\u003e\n\t\t\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-dark.png\" /\u003e\n\t\t\u003cimg alt=\"tldraw\" src=\"https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-light.png\" /\u003e\n\t\u003c/picture\u003e\n\u003c/div\u003e\n\nThis starter kit builds a visual node-graph editor for AI image generation pipelines on top of [tldraw](https://github.com/tldraw/tldraw). Users place nodes on an infinite canvas, wire up typed ports, and run the graph to generate images — similar to ComfyUI, but built with React and tldraw.\n\n## Environment setup\n\nCreate a `.dev.vars` file in the root directory and add your Replicate API key:\n\n```\nREPLICATE_API_TOKEN=your_replicate_api_token_here\n```\n\nWithout a token, generation requests will fail with an error.\n\n## Local development\n\nInstall dependencies with `yarn` or `npm install`.\n\nRun the development server with `yarn dev` or `npm run dev`.\n\nOpen `http://localhost:5173/` in your browser to see the app.\n\n## How it works\n\nThis starter kit has 3 main concepts:\n\n1. **Nodes**: Nodes are shapes that accept inputs and produce outputs. There are 16 node types ranging from inputs (Model, Prompt, Load Image) to processing (Generate, ControlNet, Upscale) to display (Preview).\n2. **Connections**: A connection joins the output of one node to the input of another. Connections are drawn as bezier curves and are color-coded by data type.\n3. **Ports**: Ports are typed endpoints on nodes. Each port has a data type (`image`, `text`, `model`, `number`, `latent`, or `any`) and only compatible ports can be connected.\n\nThere are lots of useful interactions the user can take involving these concepts:\n\n- Dragging from a port lets the user create a new connection\n- Dragging from a port to empty space opens an on-canvas node picker\n- Clicking in the middle of a connection lets the user insert a new node\n- Connections enforce type compatibility — you can't connect an image port to a model port\n- Cycle detection prevents circular dependencies\n\nThe app automatically detects groups of connected nodes and draws region overlays around them with play/stop controls. Each node also has a \"play from here\" button. The execution engine traverses the graph as a DAG, resolving dependencies and running nodes in order.\n\n## File structure\n\n- **`src/App.tsx`:** The main entry-point. Renders the `\u003cTldraw /\u003e` component with custom shape utils, a sidebar, and a default starter pipeline (Model → Prompt → Generate → Preview).\n- **`src/nodes`:** Everything related to nodes.\n  - **`src/nodes/NodeShapeUtil.tsx`:** The node shape util, which defines a custom tldraw shape for our nodes.\n  - **`src/nodes/nodeTypes.tsx`:** The registry of all node type definitions.\n  - **`src/nodes/nodePorts.tsx`:** Helpers for working with the ports on a node and the values flowing through them.\n  - **`src/nodes/types/`:** Each node type definition. Nodes define their ports, default props, body height, execution logic, and React component.\n- **`src/connection`:** Everything related to connections.\n  - **`src/connection/ConnectionShapeUtil.tsx`:** The connection shape util, which renders bezier curves between ports.\n  - **`src/connection/ConnectionBindingUtil.tsx`:** The connection binding util. Each connection has two bindings — one to the start node, and one to the end node.\n  - **`src/connection/insertNodeWithinConnection.tsx`:** A helper for inserting a new node in the middle of a connection.\n  - **`src/connection/keepConnectionsAtBottom.tsx`:** Side effect listeners that keep connections below nodes in the z-order.\n- **`src/ports`:** Everything related to ports.\n  - **`src/ports/Port.tsx`:** Defines port types and a React component for rendering them.\n  - **`src/ports/PointingPort.tsx`:** An entry in tldraw's interaction state tree which extends the select tool with custom port interaction behavior.\n  - **`src/ports/portCompatibility.ts`:** Type compatibility rules for connecting ports.\n- **`src/execution`:** Everything related to running workflows.\n  - **`src/execution/ExecutionGraph.tsx`:** The DAG execution engine that runs connected node graphs.\n  - **`src/execution/executionState.ts`:** Execution state management — tracking which nodes are running, results, and errors.\n- **`src/components`:** UI and on-canvas React components.\n  - **`src/components/PipelineToolbar.tsx`:** A replacement for tldraw's default toolbar, rendered vertically on the left with draggable node types.\n  - **`src/components/ImagePipelineSidebar.tsx`:** A sidebar for saved templates and settings.\n  - **`src/components/OnCanvasNodePicker.tsx`:** A panel that appears on the canvas when dragging a connection to empty space, letting the user choose a compatible node to insert.\n  - **`src/components/PipelineRegions.tsx`:** Finds groups of connected nodes, draws bounding boxes around them, and provides play/stop controls.\n- **`src/templates`:** Save and restore reusable subgraphs.\n- **`worker/`:** Cloudflare Worker backend.\n  - **`worker/worker.ts`:** The main worker entry-point with API routes.\n  - **`worker/routes/`:** Route handlers for generate, upscale, style transfer, IP adapter, text generation, and image storage.\n  - **`worker/providers/`:** Provider abstractions for Replicate API calls.\n\n## Deployment\n\nThis template uses a [Cloudflare Worker](https://developers.cloudflare.com/workers/) backend with [R2](https://developers.cloudflare.com/r2/) for image storage.\n\nTo deploy, create an R2 bucket and deploy the worker:\n\n```bash\nnpx wrangler r2 bucket create image-pipeline\nnpx wrangler secret put REPLICATE_API_TOKEN\nnpm run build\nnpx wrangler deploy\n```\n\n## License\n\nThis project is part of the tldraw SDK. It is provided under the [tldraw SDK license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).\n\nYou can use the tldraw SDK in commercial or non-commercial projects so long as you preserve the \"Made with tldraw\" watermark on the canvas. To remove the watermark, you can purchase a [business license](https://tldraw.dev/pricing). Visit [tldraw.dev](https://tldraw.dev) to learn more.\n\n## Trademarks\n\nCopyright (c) 2025-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our [trademark guidelines](https://github.com/tldraw/tldraw/blob/main/TRADEMARKS.md) for info on acceptable usage.\n\n## Distributions\n\nYou can find tldraw on npm [here](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions).\n\n## Contribution\n\nFound a bug? Please [submit an issue](https://github.com/tldraw/tldraw/issues/new).\n\n## Community\n\nHave questions, comments or feedback? [Join our discord](https://discord.gg/rhsyWMUJxd). For the latest news and release notes, visit [tldraw.dev](https://tldraw.dev).\n\n## Contact\n\nFind us on Twitter/X at [@tldraw](https://twitter.com/tldraw) or email us at [mailto:hello@tldraw.com](hello@tldraw.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftldraw%2Fimage-pipeline-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftldraw%2Fimage-pipeline-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftldraw%2Fimage-pipeline-template/lists"}