Architecture

September 12, 2026 · View on GitHub

Flowtake uses a hybrid desktop architecture: a Rust backend (Tauri v2) for system access and a React frontend for the UI, communicating over Tauri's IPC bridge.

High-Level Diagram

+------------------------------------------------------------------+
|                        Flowtake Application                       |
+------------------------------------------------------------------+
|                                                                    |
|   +---------------------------+   +----------------------------+   |
|   |      Tauri v2 (Rust)      |   |     React 18 Frontend      |   |
|   |---------------------------|   |----------------------------|   |
|   | - Recording control       |   | - Editor workspace         |   |
|   | - System FFmpeg discovery |   | - Timeline (zoom, pan,     |   |
|   | - Window/area picking     |   |   clicks, clips, masks,    |   |
|   | - File I/O & projects     |   |   subtitles, overlays,     |   |
|   | - Mouse tracking          |   |   audio tracks)            |   |
|   | - System integration      |   | - Properties panel         |   |
|   | - Video streaming         |   | - Preview player (Pixi.js) |   |
|   |   (video:// protocol)     |   | - Settings & presets       |   |
|   | - Export pipeline         |   | - Asset library            |   |
|   +---------------------------+   +----------------------------+   |
|                |                               |                   |
|                +---------- IPC Bridge ---------+                   |
|                       (Tauri Commands)                             |
|                                                                    |
+------------------------------------------------------------------+
| Redux Toolkit (State) | Pixi.js (Compose) | Mediabunny (MP4/WebM video) |
+------------------------------------------------------------------+

Tech Stack

LayerTechnology
Desktop FrameworkTauri v2 (Rust)
BackendRust (tokio, serde)
FrontendReact 18 + Redux Toolkit
StylingTailwindCSS 4 + DaisyUI 5
GraphicsPixi.js 8 (2D animation rendering)
Edited ExportMediabunny encodes H.264/MP4 or VP9/WebM video; FFmpeg mixes and muxes enabled recorded/timeline audio when present
Build ToolVite 7
AI/MLMediaPipe + HuggingFace Transformers

Directory Structure

Flowtake/
├── app/                     # React frontend
│   ├── shared/              # Code shared across all windows
│   │   ├── redux/           # Redux Toolkit store and slices
│   │   ├── scene/           # Pixi.js animation/rendering engine
│   │   ├── workers/         # Web Workers for preview and render
│   │   ├── tauriBridge.js   # IPC compatibility layer
│   │   ├── helpers.js       # Shared utility functions
│   │   └── constants.js     # App-wide constants
│   ├── components/          # Shared React UI components
│   └── windows/             # Per-window entry points
│       ├── main/            # Main editor window
│       ├── exporter/        # Export/render queue
│       ├── recorder/        # Recording overlay
│       ├── windowPicker/    # Window selection
│       ├── areaPicker/      # Area selection
│       └── note/            # Annotation window
│
├── src-tauri/               # Rust backend (Tauri v2)
│   ├── src/
│   │   ├── commands/        # IPC command handlers
│   │   ├── lib.rs           # App setup & video:// protocol
│   │   ├── state.rs         # Global application state
│   │   └── mouse_tracker.rs # System-wide mouse tracking
│   ├── Cargo.toml
│   └── tauri.conf.json
│
├── resources/               # Legacy Windows helper assets and installer artwork
├── docs/                    # This documentation
├── vite.config.mjs
└── package.json

Key Integration Points

  • app/shared/tauriBridge.js — Maps window.electron.ipcRenderer calls to Tauri invoke() and listen(), letting the React code use a stable IPC API
  • src-tauri/src/lib.rs — Initializes the app, registers plugins, and sets up the video:// protocol for streaming frames to the frontend
  • src-tauri/src/commands/ — Rust functions exposed as Tauri commands callable from JavaScript
  • app/shared/redux/store.js — Central Redux store for the main editor window
  • app/shared/scene/Animator.js — Orchestrates Pixi.js animations for preview and render

Further Reading