import {loadFlow} from '@flyde/runtime';

const execute = loadFlow('Flow.flyde');

const result = await execute(FlydePlayground.inputs, {onOutputs: (key, value) => {
    FlydePlayground.addOutput(key, value);
}}).result;


Flow1

Flow

HTTP Requests

import {loadFlow} from '@flyde/runtime';

const execute = loadFlow('Fibonacci.flyde');

const n = 5;

await execute({n}, {onOutputs: (key, value) => {
    FlydePlayground.addOutput('output', value);
}}); // using the "onOutputs" callback allows listing to multiple outputs emitted from the same pin (as opposed to a single completion output via a promise)



Fibonacci

import {loadFlow} from '@flyde/runtime';

const execute = loadFlow('Prograph.flyde');

await execute(FlydePlayground.inputs, {onOutputs: (key, value) => {
    FlydePlayground.addOutput('output', value);
}}); // using the "onOutputs" callback allows listing to multiple outputs emitted from the same pin (as opposed to a single completion output via a promise)



Prograph

Prograph Mention

import {loadFlow} from '@flyde/runtime';

const execute = loadFlow('Main.flyde');

FlydePlayground.setMode('jsx'); // this is a playground specific hack that hooks the "jsx" output to the "output" pane directly. See code - https://github.com/flydelabs/playground/blob/main/components/AppView.tsx#L523

execute({}, {onOutputs: (key, data) => {
    FlydePlayground.addOutput(key, data);    
}}); // the "result" property of the execute's result is a promise that will resolve itself to an object containing all outputs of a flow



Main

import type { CodeNode } from "@flyde/core";

/*
 Feel free to change the content of this file to experiment with the code nodes
 You can then import any exported node here from your other visual nodes.
 
 Full API reference: https://www.flyde.dev/docs/custom-nodes/
 */

export const Button: CodeNode = {
  id: "Button",
  inputs: {
    label: {description: `Button's label` },
  },
  outputs: { jsx: {description: "Resulting JSX"}, click: {description: "Click event"}},
  run: ({ label }, { click, jsx }) => {
    const elem = React.createElement('button', {children: label, onClick: e => click.next(e), className: 'px-2 mx-2 py-1 bg-blue-200 rounded'});
    jsx.next(elem);
  }
};


Button

import type { CodeNode } from "@flyde/core";

/*
 Feel free to change the content of this file to experiment with the code nodes
 You can then import any exported node here from your other visual nodes.
 
 Full API reference: https://www.flyde.dev/docs/custom-nodes/
 */

export const Span: CodeNode = {
  id: "Span",
  inputs: {
    children: {},
  },
  outputs: { jsx: {description: "Resulting JSX"}},
  run: ({ children }, { jsx }) => {
    const elem = React.createElement('span', {children, className: 'text-lg px-2 '});
    jsx.next(elem);
  }
};


Span

React Counter

import {loadFlow} from '@flyde/runtime';

const execute = loadFlow('BeepBoopBop.flyde');

const {output} = await execute({}).result

FlydePlayground.addOutput('output', output.join(', '));


BeepBoopBop

Beep Boop Bop

Debounce / Throttle

import {loadFlow} from '@flyde/runtime';

const execute = loadFlow('Main.flyde');

const name = prompt('Name?' ?? 'N/A');
const {output} = await execute({name}).result; // the "result" property of the execute's result is a promise that will resolve itself to an object containing all outputs of a flow
console.log(output);
FlydePlayground.addOutput('output', output);


External Inputs

import {loadFlow} from '@flyde/runtime';

const execute = loadFlow('Main.flyde');

const {sum} = await execute(FlydePlayground.inputs).result;

FlydePlayground.addOutput('sum', sum);


import type { CodeNode } from "@flyde/core";


const dummyOrdersService = {
  getOrdersByEmail: async (email: string) => {
    return [{
      productIds: ['product-3'],
      totalPrice: 127.0,
    }, {
      productIds: ['product-1', 'product-2'],
      totalPrice: 52.0,
    }]
  }
};


export const GetOrdersByEmail: CodeNode = {
  id: "Get Orders By Email",
  defaultStyle: {
    icon: "fa-cart-shopping",
  },
  description: "Returns orders by email (dummmy response to demonstrate a custom code node)",
  inputs: {
    email: { description: "Email of the user" },
  },
  outputs: { orders: { description: "An array of order objects" } },
  run: async ({ email}, {orders}) => {
    const _orders = await dummyOrdersService.getOrdersByEmail(email);
    orders.next(_orders);
  }
};


Flyde Playground

Latest apps