{"id":51523478,"url":"https://github.com/xonoxc/spectux","last_synced_at":"2026-07-08T18:02:12.182Z","repository":{"id":366101463,"uuid":"1275052527","full_name":"xonoxc/spectux","owner":"xonoxc","description":"A snappy browser-native non-linear video editor","archived":false,"fork":false,"pushed_at":"2026-06-20T09:18:28.000Z","size":126,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-20T09:23:52.354Z","etag":null,"topics":["react","tailwind","tanstack-start","wasm"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xonoxc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-20T07:29:49.000Z","updated_at":"2026-06-20T09:18:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/xonoxc/spectux","commit_stats":null,"previous_names":["xonoxc/spectux"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/xonoxc/spectux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xonoxc%2Fspectux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xonoxc%2Fspectux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xonoxc%2Fspectux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xonoxc%2Fspectux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xonoxc","download_url":"https://codeload.github.com/xonoxc/spectux/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xonoxc%2Fspectux/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35273524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-08T02:00:06.796Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","tailwind","tanstack-start","wasm"],"created_at":"2026-07-08T18:02:10.875Z","updated_at":"2026-07-08T18:02:12.177Z","avatar_url":"https://github.com/xonoxc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spectux\n\n**Spectux** is a browser-native non-linear video editor built around a modern client-side architecture.\n\nThe goal of Spectux is to bring desktop-style video editing workflows into the browser using WebAssembly, Web Workers, and a dedicated timeline engine.\n\nIt is not a video converter.\n\nSpectux treats editing as a project document:\n\n- edits are non-destructive\n- timeline operations are deterministic\n- rendering happens only during export\n\n---\n\n## Vision\n\nTraditional video editors separate the editor engine from the interface.\n\nSpectux follows the same idea:\n\n```\nReact UI\n    |\n    v\nState Machines\n    |\n    v\nCommand Engine\n    |\n    v\nTimeline Core\n    |\n    v\nRenderer Adapter\n    |\n    v\nFFmpeg WASM\n```\n\nReact displays the editor.\n\nThe core owns the editing logic.\n\n---\n\n# Version 0.1 Goal\n\nThe first milestone focuses on a complete editing pipeline:\n\n```\nImport Video\n      ↓\nTimeline Editing\n      ↓\nRealtime Preview\n      ↓\nExport Video\n```\n\nNo feature bloat.\n\nOne polished workflow.\n\n---\n\n# Features Roadmap\n\n## Project System\n\n- [x] Create new project\n- [x] Store project metadata\n- [x] Save project locally\n- [x] Reload existing projects\n- [x] Serialize timeline document\n\nStorage:\n\n- IndexedDB\n- Project JSON\n- Asset blobs\n\n---\n\n## Media System\n\n- [x] Import MP4 files\n- [ ] Drag/drop upload support\n- [x] Store media assets locally\n- [x] Generate asset metadata\n\nAsset model:\n\n```ts\nAsset {\n  id: string\n\n  name: string\n\n  type: \"video\"\n\n  duration: number\n\n  blobId: string\n}\n```\n\nNot included in v0.1:\n\n- cloud storage\n- media folders\n- asset search\n\n---\n\n## Preview Engine\n\nRealtime preview without rendering.\n\nPowered by:\n\n- HTMLVideoElement\n- Browser APIs\n\nFeatures:\n\n- [ ] Play video\n- [ ] Pause video\n- [x] Seek timeline\n- [x] Display current timestamp\n- [x] Sync playhead\n\nNot included:\n\n- realtime effects\n- transitions\n- WebGL rendering\n\n---\n\n# Timeline Engine\n\nThe heart of Spectux.\n\nTimeline data is time-based, never pixel-based.\n\nBad:\n\n```ts\nclip.x = 500\nclip.width = 200\n```\n\nGood:\n\n```ts\nClip {\n  timelineStart:number\n\n  start:number\n\n  end:number\n}\n```\n\nPixels are calculated:\n\n```ts\nposition = time * zoom\n```\n\n## Timeline v0.1\n\n- [x] Single video track\n- [x] Timeline ruler\n- [x] Playhead\n- [x] Clip selection\n\nEditing:\n\n- [x] Move clips\n- [x] Trim clip start/end\n- [x] Split clip at playhead\n- [x] Delete clips\n\nFuture:\n\n- Multiple tracks\n- Effects\n- Transitions\n- Keyframes\n\n---\n\n# Command System\n\nAll destructive operations pass through commands.\n\nExample:\n\n```\nUser Action\n\n    ↓\n\nMoveClipCommand\n\n    ↓\n\nTimeline Update\n```\n\nEnables:\n\n- undo\n- redo\n- history tracking\n\nCommands:\n\n- [x] MoveClipCommand\n\n- [x] TrimClipCommand\n\n- [x] SplitClipCommand\n\n- [x] DeleteClipCommand\n\nHistory:\n\n- [x] Undo support\n- [x] Redo support\n\n---\n\n# Rendering Engine\n\nFFmpeg WASM is used only for final export.\n\nFlow:\n\n```\nProject JSON\n\n     ↓\n\nCommand Builder\n\n     ↓\n\nFFmpeg Worker\n\n     ↓\n\nMP4 Output\n```\n\nFeatures:\n\n- [x] Load FFmpeg WASM\n- [x] Generate render commands\n- [x] Export edited timeline\n- [ ] Progress reporting\n\nSupported v0.1 operations:\n\n- trimming\n- split clip rendering\n- concatenation\n\n---\n\n# State Architecture\n\nSpectux separates state by responsibility.\n\n## XState\n\nWorkflow state:\n\n```\nidle\n\nloading\n\nediting\n\nerror\n```\n\nPlayback:\n\n```\npaused\n\nplaying\n\nseeking\n```\n\nExport:\n\n```\nidle\n\npreparing\n\nencoding\n\ncompleted\n\nfailed\n```\n\n---\n\n## Editor Store\n\nStores:\n\n- project document\n- selected clips\n- playhead position\n- zoom level\n- active tool\n\nPowered by:\n\n- Zustand\n- Immer\n\n---\n\n## Async State\n\nManaged by TanStack Query.\n\nUsed for:\n\n- asset loading\n- project loading\n- metadata fetching\n\nNot used for timeline state.\n\n---\n\n# Error Handling\n\nSpectux uses typed Result based errors.\n\nNo exception-driven domain logic.\n\nExample:\n\n```ts\nResult\u003cProject, EditorError\u003e\n```\n\nErrors:\n\n```ts\n{\n   type: \"TIMELINE.CLIP_NOT_FOUND\"\n}\n\n{\n   type: \"FFMPEG.EXPORT_FAILED\"\n}\n```\n\n---\n\n# Interface\n\nProfessional editor-inspired layout:\n\n```\n+---------------------------+-------------+\n|                           |             |\n|        Preview            | Media Bin   |\n|                           |             |\n+---------------------------+-------------+\n|                                         |\n|              Toolbar                    |\n+-----------------------------------------+\n|                                         |\n|              Timeline                   |\n|                                         |\n+-----------------------------------------+\n```\n\nv0.1 UI:\n\n- [x] Dark editor interface\n- [ ] Resizable panels\n- [x] Media browser\n- [x] Preview monitor\n- [x] Timeline\n- [x] Transport controls\n\n---\n\n# Tech Stack\n\nFrontend:\n\n- TanStack Start\n- React\n- TypeScript\n- Tailwind\n\nState:\n\n- XState\n- Zustand\n- TanStack Query\n\nEditor:\n\n- FFmpeg WASM\n- Web Workers\n- Comlink\n\nStorage:\n\n- IndexedDB\n- Dexie\n\nQuality:\n\n- Vitest\n- Zod\n- neverthrow\n\n---\n\n# v0.1 Checklist\n\nCore:\n\n- [x] Create project\n\n- [x] Import MP4\n\n- [x] Store video locally\n\n- [x] Add clip to timeline\n\n- [ ] Preview playback\n\n- [x] Seek timeline\n\n- [x] Move clip\n\n- [x] Trim clip\n\n- [x] Split clip\n\n- [x] Delete clip\n\n- [x] Undo / Redo\n\n- [x] Save project\n\n- [x] Reload project\n\n- [x] Export MP4\n\n---\n\n# Philosophy\n\nSpectux is built like an editor engine first,\nand a web application second.\n\nThe browser is the runtime.\n\nThe timeline is the source of truth.\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxonoxc%2Fspectux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxonoxc%2Fspectux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxonoxc%2Fspectux/lists"}