Inside Effect Sim: Building a Convex + MobX Christmas Lights Simulator

Effect Sim (FXSim) is a Convex-powered, local-first-leaning web app that feels like a desktop tool for designing and sequencing addressable Christmas lights before anything gets installed outdoors. It lets developers lay out LED strings on top of a real 3D mesh of a garden (captured via Polycam and optimized in Blender), then build timeline-based sequences with reusable effects, virtual strings (to combine multiple physical strings into one logical run), and playlists for unattended playback.

On the implementation side, the video digs into a React + Vite frontend with a docking layout (FlexLayout), drag-and-drop organization (React DnD Kit), and a MobX model layer to get fine-grained reactivity and “instant” UI updates without debounce-heavy query/mutation plumbing. Sync is handled via a custom “table syncer” pattern that turns local model edits into patch/insert/delete operations pushed through a single Convex mutation, plus a persisted-query approach for fast reloads. For hardware output, FXSim connects over WebSocket to a local Node/Bun runtime that speaks DDP to the light strings, reusing the same React-defined effect components in a headless React runtime (React Nil) so the simulator and the playback daemon share core rendering logic.

Timestamps

[00:00.480] What FXSim is and what it solves
[00:12.640] Video plan: demo first, then architecture
[00:45.380] Creating a project and overview of the UI
[01:08.220] React + Vite web app syncing to Convex
[01:26.180] Dockable, persistent panels with FlexLayout
[02:05.540] 3D garden scan workflow: Polycam → Blender
[02:56.080] Nodes panel: strings, inspector, placement
[04:40.500] Rendering LEDs on top of the mesh
[04:55.740] Sequencer: tracks, frames, effect events
[06:30.960] Real-time sync and optimistic feel via Convex
[07:13.040] Applying effects to nodes; effects library
[07:51.500] Nighttime mode and effect tuning
[08:23.100] Adding another string for multi-string effects
[09:01.400] Virtual strings: combine and segment mapping
[10:14.200] Organizing nodes with folders; React DnD Kit
[10:44.680] Switch nodes: smart plug control + sequencing
[11:24.720] Playlists: chaining smaller sequences
[13:14.300] Loading the production garden project
[14:36.480] Bridging simulator to hardware via WebSocket
[15:27.500] Footage: simulator driving real lights
[15:54.020] Project settings: frame rate and naming
[16:26.540] Transition to code walkthrough
[16:44.880] Repo structure: Convex, src/public, shared
[17:32.740] Convex schema and minimal server functions
[18:24.140] Frontend entry: providers and Mantine
[19:14.800] MobX models and makeAutoObservable
[21:03.380] Before/after refactor: debounce-heavy vs models
[24:07.880] Exposed doc fields helper + computed values
[26:32.100] Shared models vs UI models separation
[28:33.340] App/table syncer: syncing models to Convex
[29:32.800] Limits: not true local-first; last-writer-wins
[30:36.480] Persisted queries: fast reload + stale-while-revalidate
[31:11.140] Vite MobX observer plugin and fine-grained updates
[33:13.060] applyOperations mutation: patches/inserts/deletes
[34:12.200] Tradeoffs: auth becomes harder with one mutation
[35:15.000] Effects as React components + per-frame hook
[37:15.160] UI models for complex panels + persisted local UI state
[39:04.360] Headless runtime: React Nil + Bun/Node playback daemon
[41:46.340] Auto-updater: pull, rebuild, restart
[42:29.200] Future improvements: CRDTs/OT, undo/redo, client IDs
[43:26.580] Wrap-up and where to find the source code links

Resources

+ Effect Sim Source: https://github.com/mikecann/effect-sim
+ Flex Layout: https://github.com/caplin/FlexLayout
+ DnD Kit: https://dndkit.com/
+ React-nil: https://github.com/pmndrs/react-nil
+ DDP Protocol: https://www.3waylabs.com/ddp/

Hashtags

#convex #react #vite #mobx #typescript #websockets #localfirst #headlessreact #bun #nodejs #3d #blender #polycam #leds #softwarearchitecture

Видео Inside Effect Sim: Building a Convex + MobX Christmas Lights Simulator канала Convex