explaingit

tdsoc2002/pincanvas

18TypeScriptAudience · vibe coderComplexity · 3/5Setup · moderate

TLDR

A drag-and-drop canvas where you connect AI nodes to build image and video generation workflows without writing any code. Supports multiple AI providers including OpenAI-compatible services and Midjourney, with all data stored locally in your browser.

Mindmap

mindmap
  root((pincanvas))
    What it does
      Connect nodes visually
      Generate images
      Generate videos
      Chain AI steps
    AI Providers
      OpenAI compatible
      Midjourney
      Seedance
      Jimeng
    Tech Stack
      TypeScript
      React 18
      xyflow
      Zustand
    Storage
      Local browser
      Optional S3
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Chain image and video generation nodes to create an automated creative pipeline from a single text prompt

USE CASE 2

Try different AI image or video providers side by side by switching models in the settings panel without touching any code

USE CASE 3

Build a multi-step visual workflow that generates images from text then feeds them into a video generation node

USE CASE 4

Save and reuse visual AI workflows locally without any account or cloud dependency

Tech stack

TypeScriptReactxyflowZustandBun

Getting it running

Difficulty · moderate Time to first run · 30min

Requires your own API keys for each AI provider you want to use, no keys are provided.

In plain English

PinCanvas is a visual, node-based canvas for building AI-powered creative workflows. You connect nodes together on a canvas, where each node can generate an image, a video, or text using AI models of your choice. The connections between nodes pass material from one step to the next, so you can chain together complex sequences without writing any code. The tool supports a range of AI providers, including OpenAI-compatible services, Midjourney, and several Chinese platforms such as Seedance and Jimeng. You can configure which services to use through a settings panel in the browser, entering your own API keys and base URLs. No account registration is required for the app itself. All project data is stored locally in your browser using a built-in storage mechanism, so nothing leaves your machine unless you explicitly enable cloud storage for uploaded files. Node types cover common creative tasks: generating images from text, generating video from images or text, combining image and audio inputs, and using reference images by mentioning them directly in a prompt. A typical workflow might take a single text description, pass it to an image generation node, and then feed that image into a video generation node. Each node can be configured independently for model, resolution, and duration. The project is built with React 18 and TypeScript and uses a visual flow library called xyflow to handle the canvas and connections. State is managed with Zustand, and the build tooling runs on Bun. An optional backend handles object storage if you want generated files saved to an S3-compatible service, but this is not required for basic use. Adding new AI models is supported through the settings UI without touching any code, which makes it practical for people who want to try different providers without modifying the source. For those who do want to extend the code, the README describes exactly which files to change and in what order.

Copy-paste prompts

Prompt 1
I have pincanvas running locally. Help me set up a workflow that takes a text prompt, sends it to an OpenAI-compatible image generation API, then passes the output image into a video generation node.
Prompt 2
In pincanvas, how do I add a new AI provider? Walk me through entering a custom base URL and API key in the settings panel.
Prompt 3
Help me create a pincanvas workflow that chains three nodes: text input, image generation via Midjourney, then video generation with an audio mix.
Prompt 4
I want to enable S3-compatible cloud storage in pincanvas so generated files are saved externally. What do I configure in the optional backend?
Open on GitHub → Explain another repo

← tdsoc2002 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.