Feature description
Add persistent project save/load functionality so users can store their editor settings locally in the browser and restore them in future sessions — without losing their configuration every time they close the tab.
Problem this solves
Currently every time a user closes or refreshes Reframe, all their editor settings (output size, framing, audio volumes, overlay settings etc.) are lost. Users have to reconfigure everything from scratch each session which is frustrating for anyone doing repeated or iterative edits.
Proposed solution
Implement a localStorage-based save/load system with the following:
saveProject(name) — saves current editor state under a user-defined name
listProjects() — returns all saved projects
loadProject(id) — restores a previously saved state
deleteProject(id) — removes a saved project
Storage key: reframe-projects-v1 storing entries as { id, name, created, state }
Saved state includes: recipe, overlayPosition, overlaySize, overlayOpacity, musicVolume, originalAudioVolume, loopMusic
UI: Modal-based Save and Load dialogs (no prompt()) with Save/Load/Delete controls and status messages.
Files to be edited:
src/hooks/useVideoEditor.ts
src/components/VideoEditor.tsx
Limitations:
Video file blobs are NOT persisted — after loading a project the user must re-select their video file. This is a known browser storage limitation.
Alternatives considered
sessionStorage — rejected, data is lost on tab close
IndexedDB — better for large data/blobs, suggested as a future improvement
JSON import/export — suggested as a next step enhancement
Additional context
This is a GSSoC '26 contribution. Implementation is already complete and ready to be submitted as a PR upon issue assignment.
Feature description
Add persistent project save/load functionality so users can store their editor settings locally in the browser and restore them in future sessions — without losing their configuration every time they close the tab.
Problem this solves
Currently every time a user closes or refreshes Reframe, all their editor settings (output size, framing, audio volumes, overlay settings etc.) are lost. Users have to reconfigure everything from scratch each session which is frustrating for anyone doing repeated or iterative edits.
Proposed solution
Implement a localStorage-based save/load system with the following:
saveProject(name) — saves current editor state under a user-defined name
listProjects() — returns all saved projects
loadProject(id) — restores a previously saved state
deleteProject(id) — removes a saved project
Storage key: reframe-projects-v1 storing entries as { id, name, created, state }
Saved state includes: recipe, overlayPosition, overlaySize, overlayOpacity, musicVolume, originalAudioVolume, loopMusic
UI: Modal-based Save and Load dialogs (no prompt()) with Save/Load/Delete controls and status messages.
Files to be edited:
src/hooks/useVideoEditor.ts
src/components/VideoEditor.tsx
Limitations:
Video file blobs are NOT persisted — after loading a project the user must re-select their video file. This is a known browser storage limitation.
Alternatives considered
sessionStorage — rejected, data is lost on tab close
IndexedDB — better for large data/blobs, suggested as a future improvement
JSON import/export — suggested as a next step enhancement
Additional context
This is a GSSoC '26 contribution. Implementation is already complete and ready to be submitted as a PR upon issue assignment.