@teamflojo/floimg-studio-ui

React components for building visual workflow editors with FloImg.

Installation

``bash
npm install @teamflojo/floimg-studio-ui
`

Peer Dependencies

This package requires the following peer dependencies:

`bash
npm install react react-dom @tanstack/react-query reactflow zustand
`

Quick Start

`tsx
import { App } from "@teamflojo/floimg-studio-ui";
import "@teamflojo/floimg-studio-ui/styles.css";

function MyStudio() {
return ;
}
`

Individual Components

For custom compositions, import individual components:

`tsx
import {
WorkflowEditor,
NodePalette,
NodeInspector,
Toolbar,
ExecutionHistory,
} from "@teamflojo/floimg-studio-ui";
`

$3

| 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 |

$3

The Toolbar component accepts props for customization:

`tsx
import { Toolbar, type ToolbarProps } from "@teamflojo/floimg-studio-ui";

brandingSlot={}
beforeActionsSlot={}
afterActionsSlot={}
hideAttribution={true}
hideWorkflowLibrary={true}
/>;
`

Storage Adapter

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.

State Management

Access workflow state with Zustand:

`tsx
import { useWorkflowStore } from "@teamflojo/floimg-studio-ui";

function MyComponent() {
const { nodes, edges, addNode } = useWorkflowStore();
// ...
}
`

Execution History

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);
// ...
}
`

Self-Hosting

For a complete self-hosted solution, use the Docker image instead:

`bash
docker run -d -p 5100:5100 ghcr.io/flojoinc/floimg-studio
``

Related Packages

- @teamflojo/floimg — Core engine
- @teamflojo/floimg-studio-shared — Shared types

License

MIT