FloImg Studio React components for building visual workflow editors
npm install @teamflojo/floimg-studio-uiReact components for building visual workflow editors with FloImg.
``bash`
npm install @teamflojo/floimg-studio-ui
This package requires the following peer dependencies:
`bash`
npm install react react-dom @tanstack/react-query reactflow zustand
`tsx
import { App } from "@teamflojo/floimg-studio-ui";
import "@teamflojo/floimg-studio-ui/styles.css";
function MyStudio() {
return
}
`
For custom compositions, import individual components:
`tsx`
import {
WorkflowEditor,
NodePalette,
NodeInspector,
Toolbar,
ExecutionHistory,
} from "@teamflojo/floimg-studio-ui";
| Component | Description |
| ------------------ | ------------------------------------------ |
| App | Complete FloImg Studio application |WorkflowEditor
| | Main canvas with React Flow |NodePalette
| | Draggable node palette |NodeInspector
| | Parameter editing panel |Toolbar
| | Top toolbar with actions |ExecutionHistory
| | Workflow execution history with thumbnails |TemplateGallery
| | Workflow template browser |WorkflowLibrary
| | Saved workflows panel |AISettings
| | AI provider configuration |AIChat
| | Natural language workflow generation |UploadGallery
| | Uploaded images browser |
The Toolbar component accepts props for customization:
`tsx
import { Toolbar, type ToolbarProps } from "@teamflojo/floimg-studio-ui";
beforeActionsSlot={
afterActionsSlot={
hideAttribution={true}
hideWorkflowLibrary={true}
/>;
`
For custom storage backends (e.g., S3, cloud storage), provide a StorageAdapter:
`tsx
import { StorageAdapterProvider, ossStorageAdapter } from "@teamflojo/floimg-studio-ui";
import type { StorageAdapter } from "@teamflojo/floimg-studio-shared";
// Use the built-in OSS adapter (local filesystem)
// Or implement your own
const myAdapter: StorageAdapter = {
async upload(file: File) {
// Upload to your storage backend
return { reference: "id", filename: file.name, mime: file.type, size: file.size };
},
getPreviewUrl(reference: string) {
return /my-storage/${reference};
},
};
`
The adapter handles Input node file uploads. Without a provider, the default /api/uploads endpoint is used.
Access workflow state with Zustand:
`tsx
import { useWorkflowStore } from "@teamflojo/floimg-studio-ui";
function MyComponent() {
const { nodes, edges, addNode } = useWorkflowStore();
// ...
}
`
Track workflow execution runs with the store:
`tsx
import { useWorkflowStore, type ExecutionRun } from "@teamflojo/floimg-studio-ui";
function MyComponent() {
const executionHistory = useWorkflowStore((s) => s.executionHistory);
const clearHistory = useWorkflowStore((s) => s.clearHistory);
// ...
}
`
For a complete self-hosted solution, use the Docker image instead:
`bash``
docker run -d -p 5100:5100 ghcr.io/flojoinc/floimg-studio
- @teamflojo/floimg — Core engine
- @teamflojo/floimg-studio-shared — Shared types
MIT