flowfile-editor is the browser-native core of Flowfile, a visual ETL tool that compiles to Polars. This package takes the same canvas and runs it on Pyodide: Polars executes in WebAssembly, so every filter, join and group-by runs client-side. Drop it into a Vue app as <FlowfileEditor />, feed it data, and read results back as Arrow.

• Want to see it first? demo.flowfile.org is this package wrapped in a small browser-only workspace.
• Embedding it? npm install flowfile-editor, then the Quick Start below.
• Need databases, cloud storage, a catalog, a scheduler, or an AI assistant? That is the full platform: pip install Flowfile. Flows built here open there.

What you get

Real Polars, not a toy. A lazy DAG with 23 node types: file readers for CSV, Excel and Parquet, filters, selects, formulas, sorts, joins, cross joins, unions, group-bys, pivots, unpivots, dynamic renames, record ids, sampling, and a raw Polars code node for anything the palette does not cover. The formula editor is the same one Flowfile ships, with field and function autocompletion.

One component to embed. <FlowfileEditor /> with a template-ref API (executeFlow, setInputData, getNodeResult, and friends) and events for ready, output, execution-complete and error. Hide toolbar buttons and node categories to fit your product.

Zero backend. Nothing to host and nothing to secure. The Pyodide runtime loads from a CDN, and the user's data stays on their machine.

Arrow-native I/O. Push frames in as Arrow IPC or Parquet bytes and pull results back the same way. Pairs cleanly with duckdb-wasm and arrow-js.

Explore and chart. The Explore Data node embeds Graphic Walker, so a result can be dragged into a chart without leaving the canvas. Read File accepts CSV, Excel and Parquet from disk or from a URL, and Output downloads any of the three.

Code, not just clicks. The Code panel shows the flow as a standalone Polars script. With teachingMode on, users can also opt into a plain-Python walkthrough and a per-node "How would I write this myself?" explainer.

Part of Flowfile. Flows download as YAML or JSON flow files that open in the desktop app and the Docker deployment. Share links work in both directions: the editor encodes a flow into a URL fragment (nothing is uploaded), and the full platform can mint links that open here. Nodes that only exist in the full platform show up in the palette as greyed-out teasers linking to the docs.

The app at demo.flowfile.org

The npm package is the canvas. The app deployed at demo.flowfile.org wraps it in a small workspace, all of it stored in the browser (IndexedDB and localStorage) with no account:

• A flow library and tabs. Save flows, reopen them from the home screen, and keep several open in tabs.
• Templates. Five starter flows with sample data, for a first look without bringing your own files.
• A catalog. Uploaded tables, flow outputs and external datasets in one place, with favorites and a run history for every execution.
• Visuals and dashboards. Save Graphic Walker charts against catalog tables and arrange them into dashboard grids.
• Light, dark and system themes, and the same learning mode as the library.

Everything below this line is about embedding the package.

Install

npm install flowfile-editor

Peer dependencies: Vue 3.3+ is required. Pinia 2.0+ is optional; the editor creates its own instance when none is provided.

Quick Start

<script setup>
import { ref } from 'vue'
import { FlowfileEditor } from 'flowfile-editor'
import 'flowfile-editor/style.css'

const editorRef = ref()
</script>

<template>
  <FlowfileEditor
    ref="editorRef"
    height="600px"
    @ready="console.log('Pyodide loaded')"
    @output="data => console.log('Output:', data)"
  />
</template>

Pyodide needs SharedArrayBuffer, so the page hosting the editor must be cross-origin isolated. See CORS headers below before deploying.

Plugin registration

If you prefer global registration:

import { createApp } from 'vue'
import { FlowfileEditorPlugin } from 'flowfile-editor'
import 'flowfile-editor/style.css'

const app = createApp(App)
app.use(FlowfileEditorPlugin)
// <FlowfileEditor /> is now available in every template

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | height | string | '100%' | CSS height of the editor | | width | string | '100%' | CSS width of the editor | | readonly | boolean | false | Disable editing | | initialFlow | FlowfileData | — | Pre-load a saved flow | | inputData | InputDataMap | — | Provide named datasets for External Data nodes | | theme | ThemeConfig | — | { mode: 'light' \| 'dark' \| 'system' } | | toolbar | ToolbarConfig | — | Show/hide toolbar buttons: showRun, showSaveLoad, showClear, showCodeGen, showDemo | | nodeCategories | NodeCategoryConfig[] | — | Control which node types are available | | teachingMode | boolean | true | Offer the learning surfaces: the Python walkthrough tab in the Code panel and the "How would I write this myself?" panel in node settings. They stay hidden until the user opts in via the graduation-cap button in the Code panel header, so true only makes the opt-in available. Set false to remove the capability entirely | | pyodide | PyodideConfig | — | { autoInit?: boolean, pyodideUrl?: string }; pyodideUrl points at a self-hosted Pyodide instead of the jsDelivr default |

Events

| Event | Payload | Description | |-------|---------|-------------| | ready | — | Pyodide is initialized and ready | | execution-complete | Map<number, NodeResult> | Flow execution finished | | output | OutputData | An External Output node produced data | | error | EditorError | An error occurred | | loading-status | string | Loading status message changed |

Programmatic API

Access the API via a template ref:

<script setup>
import { ref } from 'vue'
import { FlowfileEditor } from 'flowfile-editor'
import 'flowfile-editor/style.css'

const editor = ref()

async function run() {
  if (editor.value?.isReady) {
    await editor.value.executeFlow()
  }
}
</script>

<template>
  <FlowfileEditor ref="editor" />
  <button @click="run">Run</button>
</template>

| Method | Returns | Description | |--------|---------|-------------| | isReady | boolean | Whether Pyodide is initialized | | isExecuting | boolean | Whether a flow is running | | executeFlow() | Promise<void> | Run the entire flow | | executeNode(nodeId) | Promise<NodeResult> | Run a single node | | exportFlow() | FlowfileData | Export the current flow as JSON | | importFlow(data) | boolean | Load a flow from JSON | | setInputData(name, content, format?) | void | Push a named dataset (CSV string, or Uint8Array of Arrow IPC / Parquet bytes) | | getNodeResult(nodeId) | NodeResult \| undefined | Get a node's result | | getNodeResultArrow(nodeId) | Promise<Uint8Array \| null> | A node's full result frame as Arrow IPC stream bytes, ready for arrow-js or duckdb-wasm | | clearFlow() | void | Clear all nodes and edges | | initializePyodide() | Promise<void> | Manually init Pyodide (when autoInit: false) |

Providing input data

Pass data to External Data nodes via the inputData prop or the API:

<template>
  <FlowfileEditor :input-data="datasets" />
</template>

<script setup>
const datasets = {
  // Simple string (CSV)
  customers: 'name,age,city\nAlice,30,Amsterdam\nBob,25,Berlin',

  // Or with metadata
  orders: {
    content: 'id,amount\n1,100\n2,250',
    format: 'csv',
    delimiter: ','
  },

  // Binary: Arrow IPC stream or Parquet bytes (e.g. from duckdb-wasm or a fetch)
  events: {
    content: parquetBytes,   // Uint8Array
    format: 'parquet'        // or 'arrow-ipc'; omit to sniff (PAR1 magic)
  }
}
</script>

Capturing output

Listen for External Output node results:

<template>
  <FlowfileEditor @output="handleOutput" />
</template>

<script setup>
function handleOutput(data) {
  console.log(data.nodeId)    // Which node produced it
  console.log(data.content)   // CSV string
  console.log(data.fileName)  // e.g. "result.csv"
  console.log(data.mimeType)  // e.g. "text/csv"
}
</script>

CORS headers

Pyodide requires SharedArrayBuffer, which needs these HTTP headers on your page:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Most dev servers can be configured to send these. For Vite:

// vite.config.ts
export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  }
})

Content-Security-Policy allowlist

If your page sets a CSP, the editor needs network access to:

• cdn.jsdelivr.net for the Pyodide runtime (always) and parquet-wasm (only when a flow reads or writes Parquet)
• pypi.org and files.pythonhosted.org only when a flow uses Excel files (openpyxl and xlsxwriter are installed with micropip on first use; CSV-only flows never touch PyPI)

Node types

| Category | Nodes | |---|---| | Input | Read File (CSV / Excel / Parquet), Manual Input, External Data, Read from Catalog | | Transform | Filter, Select, Formula, Sort, Polars Code, Unique, Rename (dynamic), Record ID, Take Sample | | Combine | Join, Cross Join, Union | | Aggregate / reshape | Group By, Pivot, Unpivot | | Output | Explore Data, Output (download), Write to Catalog, External Output (emits to host) |

Hosts can show or hide categories and individual node types via the nodeCategories prop. The full-platform nodes (databases, cloud storage, Kafka, fuzzy matching, machine learning, Python kernels and more) appear as unavailable entries that link to the Flowfile docs, so users know what is one pip install away.

TypeScript

All types are exported:

import type {
  FlowfileEditorProps,
  FlowfileEditorAPI,
  FlowfileData,
  InputDataMap,
  OutputData,
  NodeResult
} from 'flowfile-editor'

Development

This package lives in the flowfile_wasm/ directory of the Flowfile monorepo.

cd flowfile_wasm
npm install
npm run dev        # Dev server at http://localhost:5174
npm run build:lib  # Build the library to dist/
npm run test:run   # Run the test suite

The full platform

Flowfile is the same canvas with a Python backend behind it: 49 node types, connectors for five databases, S3 / ADLS / GCS, Kafka, Google Analytics and REST APIs, a Delta-backed data catalog with a SQL editor, a scheduler, sandboxed Python kernels, an AI assistant, and Python code export. It runs as a desktop app, a pip install, or a Docker stack for a team.

• Flowfile on GitHub
• Documentation
• Releases
• Discussions

License

MIT. See the Flowfile repository for the full text.