1<!doctype html> 2<html lang="en" dir="ltr" class="plugin-pages plugin-id-default"> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5<meta name="generator" content="Docusaurus v2.4.1"> 6<title data-rh="true">Flyde | Visual Programming. For Developers.</title> 7 <link rel="canonical" href="https://www.flyde.dev" /> 8<meta data-rh="true" property="og:title" content="Flyde | Visual Programming. For Developers."><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://www.flyde.dev/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" name="description" content="Flyde, open-source visual programming language. Runs in the IDE, integrates with existing TypeScript code, browser and Node.js."><meta data-rh="true" property="og:description" content="Flyde, open-source visual programming language. Runs in the IDE, integrates with existing TypeScript code, browser and Node.js."><link data-rh="true" rel="icon" href="img/favicon.ico">
8<script data-rh="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("__docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script>
8 9<link rel="preconnect" href="https://www.google-analytics.com/"> 10<link rel="preconnect" href="https://www.googletagmanager.com/">
11<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-RCVXXHJXZ6",{anonymize_ip:!0})</script>
vendor: 1 bytes, line 11
11
12<script>!function(t,h,e,j,s,n){t.hj=t.hj||function(){(t.hj.q=t.hj.q||[]).push(arguments)},t._hjSettings={hjid:3245180,hjsv:6},s=h.getElementsByTagName("head")[0],(n=h.createElement("script")).async=1,n.src="https://static.hotjar.com/c/hotjar-"+t._hjSettings.hjid+".js?sv="+t._hjSettings.hjsv,s.appendChild(n)}(window,document)</script>
12<link rel="stylesheet" href="assets/css/styles.76a2f954.css"> 13<link rel="preload" href="assets/js/runtime-main.596e6e40.js" as="script"> 14<link rel="preload" href="assets/js/main.8cd4be7a.js" as="script"> 15</head> 16<body class="navigation-with-keyboard">
17<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script>
17<div id="__docusaurus"> 18<div id="__docusaurus-base-url-issue-banner-container"></div><div role="region" aria-label="Skip to main content"><a class="skipToContent_zaHc" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewbox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="img/flyde_icon.png" alt="Flyde Logo" class="themedImage_jQx1 themedImage--light_wmDU"><img src="img/flyde_icon.png" alt="Flyde Logo" class="themedImage_jQx1 themedImage--dark_Qruz"></div><b class="navbar__title text--truncate">Flyde</b></a><a class="navbar__item navbar__link" href="docs/">Documentation</a><a href="https://marketplace.visualstudio.com/items?itemName=flyde.flyde-vscode" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">VSCode Extension<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="play-sub/index/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Playground<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://www.trigg.dev/?ref=flyde-header" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Trigg<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/flydelabs/flyde" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="searchBox_qRf7"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_aymX"><div class="hero hero--primary"><div class="container"><div class="content-wrapper"><a class="github-star" href="https://www.github.com/flydelabs/flyde" target="_blank"><svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.9937 9.23411C21.9305 9.05119 21.8157 8.89053 21.663 8.77161C21.5104 8.65268 21.3265 8.5806 21.1337 8.56411L15.4437 7.73411L12.8937 2.56411C12.8118 2.39504 12.6839 2.25245 12.5248 2.15268C12.3656 2.05291 12.1815 2 11.9937 2C11.8058 2 11.6218 2.05291 11.4626 2.15268C11.3034 2.25245 11.1756 2.39504 11.0937 2.56411L8.54363 7.72411L2.85363 8.56411C2.66855 8.59041 2.49455 8.66807 2.35138 8.78826C2.2082 8.90846 2.10159 9.06638 2.04363 9.24411C1.99057 9.41778 1.98581 9.60265 2.02986 9.77875C2.0739 9.95495 2.16509 10.1159 2.29363 10.2442L6.42363 14.2442L5.42363 19.9241C5.38325 20.1125 5.39818 20.3086 5.46661 20.4887C5.53504 20.6688 5.65406 20.8254 5.80936 20.9395C5.96465 21.0535 6.1496 21.1203 6.34196 21.1318C6.53431 21.1433 6.72589 21.0989 6.89363 21.0041L11.9937 18.3341L17.0937 21.0041C17.234 21.0832 17.3925 21.1246 17.5537 21.1241C17.7655 21.1248 17.9721 21.0583 18.1437 20.9341C18.2988 20.8229 18.4189 20.6697 18.4898 20.4925C18.5607 20.3153 18.5794 20.1215 18.5437 19.9341L17.5437 14.2542L21.6737 10.2542C21.8181 10.1318 21.9248 9.97105 21.9814 9.79045C22.0381 9.60995 22.0423 9.41698 21.9937 9.23411ZM15.8437 13.2341C15.7279 13.3465 15.6411 13.4853 15.5906 13.6385C15.5401 13.7918 15.5274 13.955 15.5537 14.1142L16.2737 18.3141L12.5137 16.3142C12.3675 16.2419 12.2067 16.2042 12.0437 16.2042C11.8806 16.2042 11.7198 16.2419 11.5737 16.3142L7.81363 18.3141L8.53363 14.1142C8.55987 13.955 8.54719 13.7918 8.4967 13.6385C8.4462 13.4853 8.35937 13.3465 8.24363 13.2341L5.24363 10.2341L9.45363 9.62415C9.61563 9.60155 9.76963 9.53965 9.90213 9.44376C10.0347 9.34787 10.1416 9.22094 10.2137 9.07411L11.9937 5.26411L13.8737 9.08411C13.9457 9.23094 14.0527 9.35787 14.1852 9.45376C14.3177 9.54965 14.4717 9.611
1855 14.6337 9.63415L18.8437 10.2442L15.8437 13.2341Z" fill="currentColor"></path></svg> <span>Star us on GitHub</span></a><h1 class="hero__title"><div class="font-thin">Visual Programming.</div><div>For Developers</div></h1><p class="hero__subtitle">Open source, runs in<!-- --> <a href="https://marketplace.visualstudio.com/items?itemName=flyde.flyde-vscode" target="_blank">VS Code</a>, integrates with existing <strong>TypeScript</strong> code, browser and Node.js.</p><div class="buttons-container"><a class="button button--primary button--lg" href="docs/">Documentation</a><a href="play-sub/apps/bec05712-1fbb-4f40-b688-dc5790c8b5ea/" target="_blank" rel="noopener noreferrer" class="button button--secondary button--lg example-btn">Playground</a></div></div><div class="example-container"><div class="hero-example relative"><div class="hero-example__tabs"><div class="file-tag selected">hello.flyde</div><div class="file-tag">beep.flyde</div><div class="file-tag">debounce.flyde</div><div class="file-tag">http.flyde</div></div><div class="flow-wrapper"><div class="loader-wrapper"><div class="loader"><svg width="38" height="38" viewbox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#007ec6"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animatetransform attributename="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatcount="indefinite"></animatetransform></path></g></g></svg></div></div><button type="button" class="bp5-button run-flow-btn"><span aria-hidden="true" class="bp5-icon bp5-icon-play"><svg data-icon="play" height="16" role="img" viewbox="0 0 16 16" width="16"><path d="M240 160C240 167 236.2 172.8 230.8 176.4L231 176.8L111 256.8L110.8 256.4C107.8 258.4 104.2 260 100 260C89 260 80 251 80 240V80C80 69 89 60 100 60C104.2 60 107.8 61.6 110.8 63.6L111 63.2L231 143.2L230.8 143.6C236.2 147.2 240 153 240 160z" fill-rule="evenodd" transform-origin="center" transform="scale(0.05, -0.05) translate(-160, -160)"></path></svg></span><span class="bp5-button-text">Run</span></button></div><div class="terminal-wrapper"><div class="terminal-emulator"><em>Values sent to `output` will appear here once received.</em></div></div></div><div class="example-tip hidden"><strong>Challenge:</strong> <!-- -->try double clicking on the "World" node to change the string.<!-- --> <!-- --> <a href="play-sub/apps/bec05712-1fbb-4f40-b688-dc5790c8b5ea/" class="open- button button--sm button--secondary" target="_blank">Open in Playground</a></div></div></div></div><section class="features-strip"><div class="feature-highlight"><a href="#flexible-powerful">Flexible & Powerful</a></div><div class="feature-highlight"><a href="#visual-editor">Visual Editor</a></div><div class="feature-highlight"><a href="#open-source">Open Source</a></div><div class="feature-highlight"><a href="#git-friendly">Seamless Integration</a></div></section><section class="feature-strip" id="flexible-powerful"><div class="feature-strip-inner"><div class="image-container"><img src="assets/images/fibo-cdbc5936ed3856df4928019564ef82dd.gif"><div class="image-caption">Fibonacci sequence in Flyde - a recursive flow example.</div></div><div class="content-container"><h3>Flexible and Powerful</h3><div class="feature-description"><p>Built on a functional-reactive foundation, Flyde enables more than simple input/output flows. It supports everything you'd expect from a textual-based language; recursions, loops and conditionals.</p></div></div></div></section><section class="feature-strip" id="visual-editor"><div class="feature-strip-inner"><div class="image-container"><img src="assets/images/visual-b1b598cd76a44cfb7ae65dec6aeaaa41.gif"><div class="image-caption">Visualize data flow and view data passing through nodes.</div></div><div class="content-container"><h3>Reason About Programs in New Ways</h3><div class="feature-description"><p>Unlock new ways to think about, and debug your programs. Have an always-correct diagram of your program.</p><p>Flydeâs flow-based, visual approach makes asynchronous and concurrent tasks simpler and intuitive.</p></div></div></div></section><section class="feature-strip" id="open-source"><div class="feature-strip-inner"><div class="image-container"><img src="assets/images/transparent-25618eaa2d7966dceddf11fb5f2c1108.gif"><div class="image-caption">Double click on nodes to jump to their implementation.</div></div><div class="content-container"><h3>Open Source and Transparent</h3><div class="feature-description"><p>In Flyde, nothing is hidden. From node implementation, to runtime code. Easily access the code behind each node in Flydeâs standard library.</p><p>Everything needed to run Flyde flows is<!-- --> <strong>open-source and MIT licensed.</strong></p></div></div></div></section><section class="feature-strip" id="git-friendly"><div class="feature-strip-inner"><div class="image-container"><img src="assets/images/integrates-cd9b83d7c4fb96804f2ff6edb5e19fcd.gif"><div class="image-caption">Flyde flows and TypeScript code live side by side.</div></div><div class="content-container"><h3>Integrates With Existing Workflows. Doesnât Replace them.</h3><div class="feature-description"><p>Create Flyde flows right from your IDE. Wrap existing TypeScript code in a Flyde node and use it in your flows. Run flows from existing TypeScript code, from arbitrary CLI scripts, to HTTP request handlers, and even front-end code.</p><p>Flows can be <strong>version-controlled</strong>, and be part<!-- --> <strong>CI/CD</strong> pipelines, just like regular text-based code.</p></div></div></div></section><section class="use-cases"><h2>Use Cases</h2><div class="use-case"><div class="use-case-inner"><h3>Simplify Programming For Novice Developers and Non-Developer Technical Roles</h3><div class="use-case-description"><div><p>Whether you're a junior developer struggling with async operations, a sales engineer needing to prototype with APIs quickly, or a QA engineer setting up backend tests, Flyde is your solution. By convert
18ing complex coding tasks into visual, intuitive flows, Flyde saves time and demystifies coding challenges.<!-- --> </p><strong>Start now by exploring the<!-- --> <a href="play-sub/index/" target="_blank" rel="noopener noreferrer">Playground</a>.</strong></div></div></div></div><div class="use-case"><div class="use-case-inner"><h3>Democratize Innovation by transforming your Codebase into a Low-Code Platform</h3><div class="use-case-description"><div><p>Open the door to broader team collaboration by integrating Flyde into your codebase. Product managers, data engineers, and other roles can now easily understand, contribute to, and innovate on your project, turning complex business logic into collaborative opportunities.</p><strong>Learn how to integrate Flyde into existing code<!-- --> <a href="docs/integrate-flows/" target="_blank" rel="noopener noreferrer">here</a>.</strong></div></div></div></div><div class="use-case"><div class="use-case-inner"><h3>A New Way for Educators to Teach Real-World Programming</h3><div class="use-case-description"><div><p>Flyde presents a unique blend of the functional and reactive programming paradigms, coupled with a visual interface. This positions Flyde as a uniquely valuable tool in the educator's arsenal, complementing more traditional, yet impactful, projects like Scratch and Blockly.<!-- --> </p><strong>If youâre an educator looking to learn more, please reach out in on<!-- --> <a href="discord/">Discord</a>.</strong></div></div></div></div></section></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Getting Started</div><ul class="footer__items clean-list"><li class="footer__item"><a href="play-sub/index/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Online Playground</a></li><li class="footer__item"><a class="footer__link-item" href="docs/">Documentation</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="discord/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/FlydeLabs" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/flyde" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="blog/">Blog</a></li><li class="footer__item"><a href="https://marketplace.visualstudio.com/items?itemName=flyde.flyde-vscode" target="_blank" rel="noopener noreferrer" class="footer__link-item">VSCode Extension<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/flydelabs/flyde" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h">
18<path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.trigg.dev/?ref=flyde-footer" target="_blank" rel="noopener noreferrer" class="footer__link-item">Trigg - Cloud-Managed Flyde for APIs<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Contact</div><ul class="footer__items clean-list"><li class="footer__item"><a href="/cdn-cgi/l/email-protection#761e131a1a1936101a0f121358121300" target="_blank" rel="noopener noreferrer" class="footer__link-item">Email<svg width="13.5" height="13.5" aria-hidden="true" viewbox="0 0 24 24" class="iconExternalLink_BV0h"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Flyde. Built with Docusaurus.</div></div></div></footer></div>
vendor: 109 bytes, lines 18-19
18 19<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
19<script src="assets/js/runtime-main.596e6e40.js"></script>
vendor: 1 bytes, line 19
19
20<script src="assets/js/main.8cd4be7a.js"></script>
vendor: 1 bytes, line 20
20
21<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"cd9967ce79414409848c0b301445f8cf","r":1,"spa":2}' crossorigin="anonymous"></script>
21 22</body> 23</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.