Vibeleaderboard
Index / tool
Visit flowgram.ai
Category
Developer Tools
Rank
Pricing
Open Source
Type
TOOL
Builder
bytedance
Latest release
v1.0.14
Date

About

ByteDance's extensible workflow development framework with a built-in canvas — node-based primitives for designing AI workflows.

What it does

FlowGram supplies the editing and data-management pieces for building a custom workflow product. Developers can choose free positioning or constrained layouts, configure steps through forms, track variables across scopes, and add materials for language models, conditions, code, loops, and HTTP work.

Why it's ranked here

The case is strong when a team wants to own its workflow product instead of adopting a finished one. Both free and fixed layout modes address distinct editor designs, while forms, variable handling, runtime documentation, and reusable materials cover more than drawing boxes and lines.

What's good

The toolkit joins visual editing with the less visible systems workflow products need. Forms include validation, linked effects, and error capture. Variable handling adds scope constraints, structure inspection, and type inference. Fixed layouts support compound structures such as branches and loops, while free layouts allow arbitrary placement and connections.

Tradeoffs

FlowGram explicitly is not a ready-made workflow platform. Teams must build the surrounding product and decide how its pieces fit their requirements. Its broad exported surface spans rendering, documents, forms, variables, dependency injection, plugins, and layout engines, so adopters should expect meaningful integration work and framework concepts.

How to use it well

Use FlowGram when a TypeScript and React team needs a tailored visual workflow editor and wants control over layout, configuration forms, variables, materials, and runtime integration. Start from the project generator and recommended free-layout template, then narrow the exported surface to product needs. Choose another product if you need an operational workflow platform immediately.

Technical notes+

The public library surface is heavily aggregated through packages/client/editor/src/index.ts, which re-exports core, document, renderer, form, variable, shortcut, node, i18n, and dependency-injection APIs. packages/client/free-layout-editor/src/index.ts and packages/client/fixed-layout-editor/src/index.ts layer specialized editors over that base. The free engine exposes workflow documents, commands, entities, services, and line management from packages/canvas-engine/free-layout-core/src/index.ts; the fixed engine collects branch, loop, try-catch, start, end, slot, and split registries in packages/canvas-engine/fixed-layout-core/src/index.ts. apps/cli/src/index.ts defines project creation, material synchronization and discovery, and version-update commands. apps/create-app/bin/index.js and apps/cli/bin/index.js are Node executable launchers.

Observed

License
MIT, identified by SPDX headers in the provided source files.
Primary language
TypeScript, with React TSX interfaces and small JavaScript executable launchers.
Install surface
npm project generator invoked through npx, followed by npm install and npm start.
Interfaces
TypeScript and React libraries plus a command-line interface.
Layout support
Separate free-layout and fixed-layout editor packages are exposed.
CLI scope
Creates projects, synchronizes materials, finds used materials, and updates framework versions.

Read from README.md, packages/client/editor/src/index.ts, packages/canvas-engine/core/src/index.ts, packages/canvas-engine/document/src/index.ts, packages/canvas-engine/renderer/src/index.ts, packages/client/playground-react/src/index.ts, packages/client/free-layout-editor/src/index.ts, packages/client/fixed-layout-editor/src/index.ts, packages/canvas-engine/free-layout-core/src/index.ts, packages/canvas-engine/fixed-layout-core/src/index.ts, apps/cli/bin/index.js, apps/cli/src/index.ts, apps/docs/theme/index.tsx, apps/demo-vite/src/app.tsx, apps/create-app/bin/index.js.

What it can do

  • Create AI workflows using visual node-based design

    Workflow requirements and logicVisual workflow diagram with connected nodes

  • Connect workflow nodes to define data flow

    Individual workflow components and connection pointsLinked workflow with data paths between nodes

  • Execute AI workflows on canvas

    Configured workflow diagramProcessed data results based on workflow logic

  • Design custom workflow primitives

    Custom logic and parametersReusable workflow node components

  • Extend framework with custom modules

    Custom code and integration requirementsEnhanced framework with additional capabilities

  • Visualize workflow execution paths

    Active workflow processesReal-time visual representation of data flow

Tags

workflowcanvasbytedanceaiframework

Tech Stack

CSSHTMLJavaScriptLessMDXPythonSCSSShellTypeScript

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.