Microflow

A visual tool for building interactive prototypes connected to real hardware.

Microflow lets designers and creators build interactive experiences by connecting digital interfaces to physical microcontrollers — no code required. Drag components onto a canvas, wire them together, and your prototype comes to life.

What's included

Microflow Studio — Desktop App

A visual, flow-based interface built as a cross-platform desktop app. Connect nodes, map signals, and control hardware in real time.

Microflow Server — Backend

A Hono + tRPC server handling auth, persistence, and real-time collaboration.

Microflow Hardware Bridge — Figma Plugin

An optional Figma plugin that bridges Figma prototypes to Microflow Studio via MQTT, so hardware can respond to Figma interactions.

Microflow Docs — Documentation

The documentation site, built with Next.js and Fumadocs.

Tech stack

This is a T-stack monorepo:

Tool	Role
Turborepo	Monorepo build system
Tauri	Cross-platform desktop shell
tRPC	End-to-end typesafe API
TanStack	Router, Query, Form
Tailwind CSS v4	Styling
Hono	HTTP server
Better Auth	Authentication
Drizzle ORM	Database ORM (PostgreSQL)
MQTT	Hardware communication protocol
Yjs	Real-time collaboration
Bun	Package manager & runtime

Getting started

Prerequisites

• Bun >= 1.3.5
• Docker (for the database)
• Rust (for the desktop app)

Setup

bun install

Start the database:

bun db:start
bun db:push

Run everything in dev mode:

bun dev

Or run specific apps:

bun dev:web      # Desktop app
bun dev:server   # Backend server

For the Figma plugin, navigate to apps/figma-plugin:

cd apps/figma-plugin && bun dev

Then import the plugin in Figma via Plugins → Development → Import plugin from manifest and select apps/figma-plugin/manifest.json.

Project structure

microflow/
├── apps/
│   ├── web/           # Desktop app (React + Tauri + TanStack Router)
│   ├── server/        # Backend API (Hono + tRPC)
│   ├── figma-plugin/  # Figma plugin (MQTT bridge)
│   └── fumadocs/      # Documentation site (Next.js + Fumadocs)
└── packages/
    ├── api/           # tRPC router definitions
    ├── auth/          # Better Auth configuration
    ├── collab/        # Yjs collaboration layer
    ├── db/            # Drizzle schema & migrations
    ├── env/           # Type-safe environment variables
    ├── mqtt/          # MQTT client shared between apps
    └── config/        # Shared TypeScript & lint config

Available scripts

Script	Description
bun dev	Start all apps in dev mode
bun dev:web	Start only the desktop app
bun dev:server	Start only the backend
bun build	Build all apps
bun check-types	TypeScript type check across all apps
bun check	Lint & format with Oxlint + Oxfmt
bun db:start	Start PostgreSQL via Docker
bun db:push	Push schema changes
bun db:migrate	Run migrations
bun db:studio	Open Drizzle Studio
bun db:stop	Stop the database

Links

• Figma Community Plugin
• Documentation