@volter-ai-dev/flow-editor
Advanced tools
AI Flow Editor - A visual node-based editor for AI workflows with ReactFlow, Subscribe.dev and Replicate API integration
A visual node-based editor for creating AI workflows with ReactFlow and Subscribe.dev integration.
# Install dependencies
bun install
# Start development server
bun run dev
Then open http://localhost:8000/index.html in your browser to see the main AI Flow Editor application.
npm install @volter-ai-dev/flow-editor
Before using the Flow Editor, make sure you have the following dependencies loaded:
<!-- Process polyfill -->
<script>
window.process = { env: { NODE_ENV: 'development' } };
</script>
<!-- React -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel for JSX transformation -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- ReactFlow -->
<script src="https://unpkg.com/reactflow@11.11.4/dist/umd/index.js"></script>
<script>
// Load ReactFlow CSS dynamically
fetch('https://unpkg.com/reactflow@11.11.4/dist/style.css')
.then(response => response.text())
.then(css => {
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
});
</script>
<!-- Subscribe.dev -->
<script src="https://unpkg.com/@subscribe.dev/react@0.0.161/index.umd.js"></script>
<!-- Tailwind CSS (for styling) -->
<script src="https://cdn.tailwindcss.com"></script>
Note: The Flow Editor includes all necessary icons internally - no external icon libraries are required.
// Note: This package is primarily designed for UMD usage
// ES module support may be limited in the current version
import FlowEditor from '@volter-ai-dev/flow-editor';
function App() {
return (
<FlowEditor
projectToken="your-subscribe-dev-project-token"
/>
);
}
export default App;
<!DOCTYPE html>
<html>
<head>
<!-- Prerequisites (see above) -->
<!-- Flow Editor -->
<script src="https://unpkg.com/@volter-ai-dev/flow-editor@latest/dist/flow-editor.umd.js"></script>
</head>
<body>
<div id="flow-editor-container"></div>
<script type="text/babel">
// FlowEditor is available as window.FlowEditor
const { ReactFlowProvider } = window.ReactFlow;
const { SubscribeDevProvider } = window.SubscribeDevReact;
// Get FlowEditor from compiled UMD
const FlowEditor = window.FlowEditor.default;
// Auth wrapper with providers
const AuthWrapper = () => {
return (
<ReactFlowProvider>
<FlowEditor />
</ReactFlowProvider>
);
};
// Main App with SubscribeDevProvider
const App = () => {
return (
<SubscribeDevProvider baseUrl="https://api.subscribe-dev.com">
<AuthWrapper />
</SubscribeDevProvider>
);
};
const root = ReactDOM.createRoot(document.getElementById('flow-editor-container'));
root.render(<App />);
</script>
</body>
</html>
You can initialize the Flow Editor with predefined nodes and edges by setting window.FLOW before the component mounts:
<script>
window.FLOW = {
nodes: [
{
id: '1',
type: 'textInput',
position: { x: 100, y: 250 },
data: {
prompt: 'A beautiful sunset over mountains',
label: 'Text Input'
}
},
{
id: '2',
type: 'model',
position: { x: 500, y: 100 },
data: {
model: 'black-forest-labs/flux-schnell',
width: 1024,
height: 1024,
outputCount: 2,
label: 'Model'
}
}
],
edges: [
{
id: 'e1-2',
source: '1',
target: '2',
sourceHandle: 'prompt',
targetHandle: 'prompt'
}
]
};
</script>
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
projectToken | string | No | - | Your Subscribe.dev project token (can be set via SubscribeDevProvider) |
Note: The FlowEditor is typically wrapped with SubscribeDevProvider which handles authentication and API configuration.
The Flow Editor supports various AI models through Subscribe.dev:
black-forest-labs/flux-schnell) - Fast image generationblack-forest-labs/flux-kontext-max) - Image generation with image inputblack-forest-labs/flux-dev) - Higher quality image generationgoogle/nano-banana) - Supports 0-2 image inputswan-video/wan-2.2-5b-fast) - Video generation from text/imagebytedance/seedance-1-lite) - High quality video generationbytedance/seedance-1-pro) - Premium video generationTo work on this package locally:
# Clone the repository
git clone https://github.com/volter-ai/flow-editor.git
# Install dependencies
bun install
# Start development server (builds and serves with file watching)
bun run dev
This will:
http://localhost:8000Once the development server is running, open your browser to:
http://localhost:8000/index.html
This is the main AI Flow Editor application with a pre-configured workflow demonstrating:
# Build once (without serving)
bun run build
# Serve existing build (without rebuilding)
bun run serve
# Build once and serve (no file watching)
bun run dev:serve
# Build for production
NODE_ENV=production bun run build
The local server also hosts other example implementations:
http://localhost:8000/editor_simple.html - Simple Subscribe.dev integration demohttp://localhost:8000/test-umd.html - UMD package functionality testhttp://localhost:8000/code_editor.html - Advanced multi-model editorhttp://localhost:8000/flowgraph.html - Flow graph visualizationhttp://localhost:8000/sheet.html - Sheet-based interfacehttp://localhost:8000/perms_experiment.html - Authentication experimentsNote: All examples require the UMD bundle to be built first. The bun run dev command handles this automatically.
This repository contains several example HTML files demonstrating different aspects of the flow editor:
index.html - Main example showcasing the full flow editor with predefined workfloweditor_simple.html - Simple Subscribe.dev integration demotest-umd.html - Basic UMD package functionality testcode_editor.html - Advanced multi-model editor with flow managementflowgraph.html - Flow graph visualization and editingsheet.html - Alternative sheet-based interfaceperms_experiment.html - Permissions and authentication experimentsEach file demonstrates different features and can be used as starting points for your own implementations.
This package requires a Subscribe.dev account and project token. Get started at subscribe.dev:
projectToken propMIT
For issues and feature requests, please use the GitHub Issues page.
FAQs
AI Flow Editor - A visual node-based editor for AI workflows with ReactFlow, Subscribe.dev and Replicate API integration
We found that @volter-ai-dev/flow-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A malicious Chrome extension steals newly created MEXC API keys, exfiltrates them to Telegram, and enables full account takeover with trading and withdrawal rights.
Security News
CVE disclosures hit a record 48,185 in 2025, driven largely by vulnerabilities in third-party WordPress plugins.
Security News
Socket CEO Feross Aboukhadijeh joins Insecure Agents to discuss CVE remediation and why supply chain attacks require a different security approach.