dev-tools 6 min read

Flyde – Visual TypeScript Flows in VS Code

Open-source VS Code extension + runtime library for building TypeScript backend logic as visual node graphs. Prototyping AI agents and prompt chains directly in your codebase.

By
Share: X in
Flyde visual programming interface showing a TypeScript flow graph

TL;DR

TL;DR: Flyde is an open-source VS Code extension that lets you build TypeScript backend logic — including AI agent flows and prompt chains — as visual node graphs, with the output compiling back into type-safe code.

Source and Accuracy Notes

⚠️ This section is MANDATORY. All links must be verified from actual source, not guessed.

What Is Flyde?

From the official README:

“Flyde is a holistic solution for prototyping, integrating, evaluating and iterating on AI-heavy backend logic. It is a visual extension of TypeScript that runs in-codebase, providing the missing link between developers and non-developers working on backend AI workflows.”

Flyde is not a standalone automation platform — it runs inside your existing TypeScript codebase. The visual flows compile to plain TypeScript, so there is no new runtime dependency for your end product. This makes it structurally different from tools like n8n or Zapier.

Core components:

  • VS Code Extension — visual flow editor with full IntelliSense and TypeScript support
  • Runtime Library (@flyde/runtime) — executes flows in any Node.js or browser environment
  • Standard Library — pre-built nodes for HTTP requests, JSON parsing, conditionals, and more
  • Visual Debugger — step through flow execution, inspect node inputs and outputs

Setup Workflow

Step 1: Create a new Flyde project

npx create-flyde-app

This scaffolds a new Flyde project with a pre-configured VS Code workspace and a sample flow.

Step 2: Open in VS Code

cd my-flyde-project
code .

The VS Code extension activates automatically. You will see a .flyde file in the project tree — double-click it to open the visual flow editor.

Step 3: Add the extension manually

If you already have a TypeScript project and want to add Flyde to it:

npm install @flyde/runtime

Then create a .flyde file in your project root and open it with the Flyde VS Code extension.

Deeper Analysis

n8n vs Flyde: Different problem spaces

Flyde is frequently compared to n8n because both involve visual node graphs. The critical difference is where the flows run:

  • n8n — standalone workflow automation server. You connect nodes and n8n executes them on its own runtime. Your logic runs inside n8n’s ecosystem.
  • Flyde — visual editor that compiles to TypeScript. The output is plain TypeScript files that you own, import, and ship as normal code. There is no Flyde runtime dependency in production.

This makes Flyde适合 teams that want visual prototyping but need to ship idiomatic TypeScript. The visual interface is a development tool, not a deployment target.

AI agent and prompt chain workflows

Flyde’s README explicitly calls out AI agent and prompt chain workflows as a target use case. The visual interface lets you wire up LLM call nodes, conditionals, and data transformations in a way that non-TypeScript-fluent teammates can follow and edit. The compiled output is still type-checked TypeScript, so you retain safety guarantees.

Collaboration between developers and non-developers

The README frames Flyde as a bridge between technical and non-technical team members. Product managers and designers can view and edit flows visually, while developers own the underlying TypeScript implementation. This is a meaningful distinction from tools where “visual” means opaque configuration locked inside a proprietary platform.

Practical Evaluation Checklist

  • VS Code extension installed and activating on .flyde files — YES
  • Flow compiles to readable TypeScript — YES (verified from README)
  • Access to runtime code and existing backend frameworks — YES (in-codebase integration)
  • TypeScript/JavaScript code can be imported as nodes — YES
  • Standard library includes HTTP, JSON, and conditional nodes — YES (README feature list)
  • Visual debugger for stepping through flow execution — YES
  • MIT-licensed runtime (UI is AGPLv3) — YES

Security Notes

License considerations: The core runtime library is MIT-licensed, meaning you can use it in commercial projects without restrictions. However, the UI components are AGPLv3. If you are building a proprietary product that modifies or embeds the Flyde UI, the AGPLv3 may impose share-alike requirements. Consult the LICENSE file in the repository for specifics.

Supply chain: The @flyde/runtime package is installed from npm. As with any runtime dependency, audit it in your package.json lockfile and consider pinning versions in production deployments.

FAQ

Q: What does “visual programming” mean for Flyde? A: You build logic by dragging nodes onto a canvas and connecting them with wires. Each node is either a built-in operation (HTTP request, JSON parse, branch) or a piece of your own TypeScript code. The graph is saved as a .flyde file and compiles to a TypeScript module.

Q: How is this different from n8n, Zapier, or Make? A: Those tools run your flows on their own infrastructure — you configure them, and the platform executes. Flyde compiles your visual graph to TypeScript that runs in your own environment. You own the code, you control the deployment, and there is no Flyde dependency in production.

Q: Do I need to know TypeScript to use Flyde? A: To create custom nodes from your own code, yes — TypeScript knowledge is required. To use built-in nodes and connect them into flows, no — the visual interface is designed for non-developer collaboration. Reading and editing the compiled output also requires TypeScript familiarity.

Q: Can Flyde run in the browser? A: Yes — the @flyde/runtime library supports browser environments. The VS Code extension is the primary development surface, but flows can be executed client-side.

Q: Is there a hosted or cloud version of Flyde? A: No — Flyde is a local development tool. There is no SaaS offering, no cloud execution platform, and no proprietary lock-in. Everything runs in your own environment.

Conclusion

Flyde occupies a specific niche: teams that want visual programming for backend TypeScript logic without sacrificing code ownership or introducing a new runtime dependency. The VS Code extension makes it approachable for non-TypeScript-fluent teammates during prototyping, while the compiled output is idiomatic TypeScript that ships normally.

If you are evaluating it against n8n, the right question is not “which is better” but “where do I want my logic to live?” — inside a platform, or in your own codebase?

Quick install:

npx create-flyde-app

Explore the playground to try it in the browser, or read the full documentation for the VS Code workflow.