[BUG] Critical URL sync and sharing failures with Text Overlays (Data Corruption & btoa Crash)

[divyansha12]

Hey @magic-peach
Bug description
The application crashes upon page reload if a text overlay was added because the textOverlays array is incorrectly serialized into the URL as [object Object]. The useEffect that continuously syncs the recipe state to the browser URL iterates through the keys and calls String(currentVal). For the textOverlays array of objects, this pushes ?textOverlays=[object+Object] to the browser URL.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to the Reframe editor page
2. Upload video (any format)
3. Click on the 'Text Overlay' tool and add a new text overlay
4. Notice the browser URL automatically updates to include &textOverlays=%5Bobject+Object%5D
5. Refresh the page
6. See error (the application crashes and becomes unresponsive)

Expected behavior
The application should correctly restore the textOverlays state upon refresh, or it should completely exclude complex objects like textOverlays from the shallow URL auto-sync loop so they aren't corrupted into a string.

Actual behavior
The application reads the string "[object Object]" back into the state, overwriting the array. The app then crashes when attempting to render or export, as it tries to call .map() or .forEach() on a string.

Browser and OS info

• OS: macOS 14 / Windows 11
• Browser: Chrome / Firefox / Safari
• Version: Latest

---

I am an open-source contributor participating in GSSoC '26 and would love to work on this issue!

[github-actions]

👋 Thanks for opening an issue, @divyansha12!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[divyansha12]

/assign

[github-actions]

Hey @divyansha12, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[github-actions]

Hey @divyansha12, just a friendly reminder that this issue has had no activity for 2 days. Please leave an update or let us know if you need help! ⏰

[divyansha12]

Update: PR #1480 is open and ready for review. Waiting for maintainer authorization on Vercel preview.

[github-actions]

Hey @divyansha12, final warning! ⚠️ This issue has had no activity for 4 days and will be automatically unassigned in 24 hours if there is no update.

[github-actions]

This issue has been unassigned from @divyansha12 due to 5 days of inactivity and is open for anyone to pick up — comment /assign to claim it!

[divyansha12]

hey @magic-peach plz review my pr #1480