@teamflojo/floimg-studio-ui

React components for building visual workflow editors with FloImg.

Installation

npm install @teamflojo/floimg-studio-ui

Peer Dependencies

This package requires the following peer dependencies:

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

Quick Start

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

function MyStudio() {
  return <App />;
}

Individual Components

For custom compositions, import individual components:

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

Available Components

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

Toolbar Props

The Toolbar component accepts props for customization:

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

<Toolbar
  brandingSlot={<MyLogo />}
  beforeActionsSlot={<CustomButton />}
  afterActionsSlot={<UserMenu />}
  hideAttribution={true}
  hideWorkflowLibrary={true}
/>;

Storage Adapter

For custom storage backends (e.g., S3, cloud storage), provide a StorageAdapter:

import { StorageAdapterProvider, ossStorageAdapter } from "@teamflojo/floimg-studio-ui";
import type { StorageAdapter } from "@teamflojo/floimg-studio-shared";

// Use the built-in OSS adapter (local filesystem)
<StorageAdapterProvider adapter={ossStorageAdapter}>
  <App />
</StorageAdapterProvider>;

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

<StorageAdapterProvider adapter={myAdapter}>
  <App />
</StorageAdapterProvider>;

The adapter handles Input node file uploads. Without a provider, the default /api/uploads endpoint is used.

State Management

Access workflow state with Zustand:

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

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

Execution History

Track workflow execution runs with the store:

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:

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