# cristianolivera1/openvid architecture

> Architecture diagram of the GitHub repository cristianolivera1/openvid, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cristianolivera1/openvid
- Repository: https://github.com/cristianolivera1/openvid

## Overview

Openvid is a browser-based video-demo and mockup editor. Users record their screen or upload video, edit a timeline with zooms, audio, visual elements and mockups, then export a finished demo. The README documents image export and broad visual-customization capabilities as well. The editor page’s imports and calls are indexed, but most editor internals are unsampled; edges are limited to indexed references and explicit README descriptions.

Main entry points: [`app/[locale]/(editor)/editor/page.tsx`](https://github.com/cristianolivera1/openvid/blob/main/app/%5Blocale%5D/(editor)/editor/page.tsx) (Editor route), [`hooks/useZoomFragments.ts`](https://github.com/cristianolivera1/openvid/blob/main/hooks/useZoomFragments.ts) (Zoom fragments), [`hooks/useVideoExport.ts`](https://github.com/cristianolivera1/openvid/blob/main/hooks/useVideoExport.ts) (Video export), [`app/components/ui/editor/ZoomMovementTrackItem.tsx`](https://github.com/cristianolivera1/openvid/blob/main/app/components/ui/editor/ZoomMovementTrackItem.tsx) (Zoom movement)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Capture and editing"]
  node_editor["Editor route<br/>[page.tsx]"]
  node_recording["Screen recording"]
  node_capture["Screen capture"]
  node_upload["Video upload<br/>[useVideoUpload.ts]"]
  node_timeline["Video canvas<br/>[VideoCanvas.tsx]"]
  node_zoom["Zoom movement"]
  node_zoomstate["Zoom fragments"]
end

subgraph group_visuals["Visual composition"]
  node_mockupmotion["Mockup motion<br/>[mockup-motion.ts]"]
  node_mockup3d["3D mockup controls"]
  node_canvas["Canvas utilities<br/>[canvas.utils.ts]"]
  node_imageedit["Image projects"]
end

subgraph group_rendering["Rendering and export"]
  node_imageexport["Image export<br/>[useImageExport.ts]"]
  node_videoexport["Video export<br/>[useVideoExport.ts]"]
  node_ffmpeg["FFmpeg processing<br/>[ffmpeg.utils.ts]"]
end

subgraph group_state["Local project state"]
  node_uploadcache[("Video upload cache")]
  node_projectcache[("Video project cache")]
  node_thumbnail[("Thumbnail cache<br/>[thumbnail-cache.ts]")]
end

subgraph group_accounts["Accounts and services"]
  node_auth["Session auth<br/>[useAuth.tsx]"]
  node_supabase["Supabase client<br/>[client.ts]"]
end

node_user(("Creator"))

node_user -->|"opens editor"| node_editor
node_editor -->|"calls"| node_recording
node_editor -->|"calls"| node_capture
node_editor -->|"calls"| node_upload
node_editor -->|"calls"| node_imageedit
node_editor -->|"calls"| node_videoexport
node_editor -->|"reads and writes"| node_uploadcache
node_editor -->|"reads and writes"| node_projectcache
node_editor -->|"uses"| node_thumbnail
node_editor -.->|"composes"| node_timeline
node_editor -.->|"manages"| node_zoomstate
node_zoomstate -->|"updates"| node_zoom
node_zoom -.->|"edits fragments"| node_zoomstate
node_user -->|"records screen"| node_recording
node_user -->|"uploads video"| node_upload
node_user -.->|"adds motion"| node_mockupmotion
node_user -->|"applies 3D effects"| node_mockup3d
node_user -->|"customizes canvas"| node_canvas
node_user -->|"creates image mockups"| node_imageedit
node_user -->|"exports image"| node_imageexport
node_user -->|"exports video"| node_videoexport
node_videoexport -->|"uses processing"| node_ffmpeg
node_auth -->|"creates client"| node_supabase

click node_editor "https://github.com/cristianolivera1/openvid/blob/main/app/%5Blocale%5D/(editor)/editor/page.tsx"
click node_recording "https://github.com/cristianolivera1/openvid/blob/main/hooks/useScreenRecording.ts"
click node_capture "https://github.com/cristianolivera1/openvid/blob/main/hooks/useScreenCapture.ts"
click node_upload "https://github.com/cristianolivera1/openvid/blob/main/hooks/useVideoUpload.ts"
click node_timeline "https://github.com/cristianolivera1/openvid/blob/main/app/components/ui/editor/VideoCanvas.tsx"
click node_zoom "https://github.com/cristianolivera1/openvid/blob/main/app/components/ui/editor/ZoomMovementTrackItem.tsx"
click node_zoomstate "https://github.com/cristianolivera1/openvid/blob/main/hooks/useZoomFragments.ts"
click node_mockupmotion "https://github.com/cristianolivera1/openvid/blob/main/lib/mockup-motion.ts"
click node_mockup3d "https://github.com/cristianolivera1/openvid/blob/main/lib/viewer-controls3d.ts"
click node_canvas "https://github.com/cristianolivera1/openvid/blob/main/lib/canvas.utils.ts"
click node_imageedit "https://github.com/cristianolivera1/openvid/blob/main/hooks/useImageProjects.ts"
click node_imageexport "https://github.com/cristianolivera1/openvid/blob/main/hooks/useImageExport.ts"
click node_videoexport "https://github.com/cristianolivera1/openvid/blob/main/hooks/useVideoExport.ts"
click node_uploadcache "https://github.com/cristianolivera1/openvid/blob/main/lib/video-upload-cache.ts"
click node_projectcache "https://github.com/cristianolivera1/openvid/blob/main/lib/video-project-cache.ts"
click node_thumbnail "https://github.com/cristianolivera1/openvid/blob/main/lib/thumbnail-cache.ts"
click node_auth "https://github.com/cristianolivera1/openvid/blob/main/app/contexts/useAuth.tsx"
click node_supabase "https://github.com/cristianolivera1/openvid/blob/main/utils/supabase/client.ts"
click node_ffmpeg "https://github.com/cristianolivera1/openvid/blob/main/lib/ffmpeg.utils.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_editor,node_recording,node_capture,node_upload,node_timeline,node_zoom,node_zoomstate toneBlue
class node_mockupmotion,node_mockup3d,node_canvas,node_imageedit toneAmber
class node_imageexport,node_videoexport,node_ffmpeg toneMint
class node_uploadcache,node_projectcache,node_thumbnail toneRose
class node_auth,node_supabase,node_user toneIndigo
```

## Components

### Capture and editing

- [Editor route](https://github.com/cristianolivera1/openvid/blob/main/app/%5Blocale%5D/(editor)/editor/page.tsx): `app/[locale]/(editor)/editor/page.tsx`
- [Screen recording](https://github.com/cristianolivera1/openvid/blob/main/hooks/useScreenRecording.ts): `hooks/useScreenRecording.ts`
- [Screen capture](https://github.com/cristianolivera1/openvid/blob/main/hooks/useScreenCapture.ts): `hooks/useScreenCapture.ts`
- [Video upload](https://github.com/cristianolivera1/openvid/blob/main/hooks/useVideoUpload.ts): `hooks/useVideoUpload.ts`
- [Video canvas](https://github.com/cristianolivera1/openvid/blob/main/app/components/ui/editor/VideoCanvas.tsx): `app/components/ui/editor/VideoCanvas.tsx`
- [Zoom movement](https://github.com/cristianolivera1/openvid/blob/main/app/components/ui/editor/ZoomMovementTrackItem.tsx): `app/components/ui/editor/ZoomMovementTrackItem.tsx`
- [Zoom fragments](https://github.com/cristianolivera1/openvid/blob/main/hooks/useZoomFragments.ts): `hooks/useZoomFragments.ts`

### Visual composition

- [Mockup motion](https://github.com/cristianolivera1/openvid/blob/main/lib/mockup-motion.ts): `lib/mockup-motion.ts`
- [3D mockup controls](https://github.com/cristianolivera1/openvid/blob/main/lib/viewer-controls3d.ts): `lib/viewer-controls3d.ts`
- [Canvas utilities](https://github.com/cristianolivera1/openvid/blob/main/lib/canvas.utils.ts): `lib/canvas.utils.ts`
- [Image projects](https://github.com/cristianolivera1/openvid/blob/main/hooks/useImageProjects.ts): `hooks/useImageProjects.ts`

### Rendering and export

- [Image export](https://github.com/cristianolivera1/openvid/blob/main/hooks/useImageExport.ts): `hooks/useImageExport.ts`
- [Video export](https://github.com/cristianolivera1/openvid/blob/main/hooks/useVideoExport.ts): `hooks/useVideoExport.ts`
- [FFmpeg processing](https://github.com/cristianolivera1/openvid/blob/main/lib/ffmpeg.utils.ts): `lib/ffmpeg.utils.ts`

### Local project state

- [Video upload cache](https://github.com/cristianolivera1/openvid/blob/main/lib/video-upload-cache.ts): `lib/video-upload-cache.ts`
- [Video project cache](https://github.com/cristianolivera1/openvid/blob/main/lib/video-project-cache.ts): `lib/video-project-cache.ts`
- [Thumbnail cache](https://github.com/cristianolivera1/openvid/blob/main/lib/thumbnail-cache.ts): `lib/thumbnail-cache.ts`

### Accounts and services

- [Session auth](https://github.com/cristianolivera1/openvid/blob/main/app/contexts/useAuth.tsx): `app/contexts/useAuth.tsx`
- [Supabase client](https://github.com/cristianolivera1/openvid/blob/main/utils/supabase/client.ts): `utils/supabase/client.ts`

### Other components

- **Creator**

## Connections

- Creator → Editor route: opens editor
- Editor route → Screen recording: calls (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Screen capture: calls (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Video upload: calls (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Image projects: calls (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Video export: calls (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Video upload cache: reads and writes (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Video project cache: reads and writes (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Thumbnail cache: uses (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Video canvas: composes (evidence: `app/[locale]/(editor)/editor/page.tsx`)
- Editor route → Zoom fragments: manages
- Zoom fragments → Zoom movement: updates (evidence: `hooks/useZoomFragments.ts`)
- Zoom movement → Zoom fragments: edits fragments (evidence: `hooks/useZoomFragments.ts`)
- Creator → Screen recording: records screen
- Creator → Video upload: uploads video
- Creator → Mockup motion: adds motion
- Creator → 3D mockup controls: applies 3D effects
- Creator → Canvas utilities: customizes canvas
- Creator → Image projects: creates image mockups
- Creator → Image export: exports image
- Creator → Video export: exports video
- Video export → FFmpeg processing: uses processing (evidence: `hooks/useVideoExport.ts`)
- Session auth → Supabase client: creates client (evidence: `app/contexts/useAuth.tsx`)