This project is evolving quickly. Stay tuned.

English · 简体中文 · 日本語 · 한국어

OpenFMV is an AI Native interactive content editor for building interactive videos, branching narratives, interactive short dramas, and local playable story experiences.

It combines a visual story blueprint, the node-level FlowTimeline editor, local asset management, interactive preview, export tooling, and an AI-assisted creation layer inside a local-first Next.js + Electron desktop app. Projects, imported media, timeline data, and generated packages stay on your machine. There is no account system, hosted database, or cloud storage dependency.

Visual story blueprint Design nonlinear story structure with nodes, branches, outputs, and clear scene relationships.

Interactive preview Test scene playback, timing, button choices, and branch behavior before export.

Local asset library Import video, image, audio, and text assets into local project folders.

Local export Package playable interactive content while keeping media references local.

• Interactive videos and branching narrative prototypes
• Interactive short drama scenes with choice-driven playback
• Local playable story packages for demos, reviews, and experiments
• AI-assisted narrative workflows that still keep project data local

1. Create or open a local project from the project workspace.
2. Import source media into the local asset library.
3. Build story structure in the /editor blueprint graph.
4. Edit each scene in /nodes with FlowTimeline media and interaction tracks.
5. Preview interactive playback and branch behavior.
6. Export a local playable package when the story is ready to share or test.

Start from local drafts, project templates, and recent work. OpenFMV is designed around local project files rather than hosted workspaces.

The editor is the high-level story map. It is responsible for story flow, node relationships, branch outputs, node prompts, and scene metadata.

Preview how a viewer moves through the story. This is where button choices, scene transitions, and interactive playback can be checked in context.

OpenFMV is built to work with local AI terminals and model services. The AI layer is intended to assist writing, ideation, and editing workflows while leaving project storage local.

Preset content can provide a quick starting point for interactive story experiments and visual direction.

• Blueprint graph editing: Build nonlinear story flow with nodes, handles, edges, and branch outputs.
• FlowTimeline scene editing: Edit each node as an independent timeline with media and interaction tracks.
• Interaction clips: Add buttons, hotspots, pause gates, timed branches, and variable actions through timeline clips.
• Local media workflow: Copy imported files into local project asset folders and preserve those references through export.
• AI-assisted creation: Configure local AI engines and use assistant workflows without introducing user accounts or cloud sync.
• Desktop-first experience: Run as a packaged Electron app backed by a local Next.js standalone service.

OpenFMV is intentionally local-first. The current product does not include login, multi-user collaboration, cloud sync, cloud databases, hosted media libraries, or one-click publishing to third-party platforms.

AI features are assistive. The project does not yet provide fully automated end-to-end generation of scripts, storyboards, visual assets, and interaction logic.

Export focuses on local playable packages and desktop app distribution workflows. Full Windows EXE story packaging is not part of the current product scope.

• Framework: Next.js 16 App Router, React, TypeScript
• Desktop shell: Electron
• Graph editing: React Flow
• State: Zustand and local browser storage
• Styling: Tailwind CSS with openfmv-* design tokens
• Persistence: Local OpenFMV project JSON files plus copied local assets
• Runtime: Shared graph runtime used by preview and export

• Node.js 20 or newer
• npm
• Windows is the primary desktop packaging target today

npm install

npm run dev

Then open http://localhost:3000.

npm run desktop:dev

npm run build

npm run package:desktop

The packaged desktop app starts a local Next.js standalone service in the background and opens the main interface after the service is ready. If the local service cannot be reached, OpenFMV shows a diagnostic error page with the runtime log path.

npm run dev
npm run desktop
npm run desktop:dev
npm run desktop:standalone
npm run build
npm run package:desktop
npm run lint
npm run test:run

Run a single test file:

npx vitest path/to/test.test.ts

Run a single named test:

npx vitest path/to/test.test.ts -t "test name"

app/
  _components/          React components
    editor/             Blueprint editor UI
    local/              Desktop/local project UI
    nodes/              React Flow node components
    player/             Player and preview UI
    ui/                 Shared UI primitives
  _features/
    node-timeline/      NodeTimeline v2 schema, UI, commands, snapping, playback
  _hooks/               React hooks
  _store/               Zustand stores
  _types/               Shared TypeScript types
  _utils/               Runtime and graph utilities
  api/                  Local Next.js API routes
  editor/               Blueprint editor route
  nodes/                Node-level timeline editor route
  play/[id]/            Player route
  projects/             Project workspace route
electron/
  main.js               Electron main process and local service bootstrap
  preload.js            Electron preload bridge
  exporter.js           Local playable package exporter
public/
  readme/               README screenshots
shared/
  runtimeCore.mjs       Shared runtime used by player and exporter
messages/
  *.json                next-intl locale files
__tests__/
  unit/                 Vitest unit tests

OpenFMV stores projects as local project files and local copied assets. Imported media should live in project asset folders and should be referenced from node.data.timeline rather than legacy node-level media fields.

The node timeline model is the primary media and interaction model:

• Media tracks contain video, image, and audio clips.
• Interaction tracks contain button, hotspot, pause gate, text, branch, and variable clips.
• Runtime preview and export compile from the timeline model.

OpenFMV export rewrites timeline clip media paths into a local playable package. Timeline clip src and poster values are copied and rewritten during export.

Desktop packaging uses Electron Builder. Generated executables, installers, and unpacked app folders are written to dist/ and ignored by git.

Desktop icons are generated from public/logo.png before packaging:

build/icons/icon.ico
build/icons/icon.png

• Keep timeline behavior in app/_features/node-timeline/.
• Keep shared runtime behavior in shared/runtimeCore.mjs.
• Keep player UI in app/_components/player/.
• Keep local desktop UI in app/_components/local/.
• Do not add hosted backend, user accounts, cloud storage, or sync features unless the product scope changes explicitly.

OpenFMV is still moving quickly. Keep changes focused, local-first, and aligned with the timeline-based architecture.

OpenFMV is built with Next.js, Electron, React Flow, Zustand, Tailwind CSS, and the broader open-source JavaScript ecosystem.

MIT