Add browser-based drag-and-drop overlay editor for workspace owners #34

New issue

Closed

opened 2026-06-03 20:11:27 -05:00 by Gitchegumi · 0 comments

Gitchegumi commented

2026-06-03 20:11:27 -05:00

(Migrated from github.com)

Problem

Overlays are currently managed too much from the backend/server side. That is not useful for invited workspace owners who do not have access to the server backend.

If GitchAlerts is meant to become a self-hosted replacement for StreamElements or Streamlabs-style alert tools, workspace owners need to be able to edit overlays from the browser.

Desired behavior

Add a browser-based overlay editor inside the Next.js app so workspace owners can build and edit alert overlays without touching the server backend.

The editor should support drag-and-drop style layout editing similar in concept to common streaming alert platforms.

Scope

The first useful version should allow a workspace owner to:

Create and edit overlay layouts in the browser.
Place visual elements on a canvas/stage.
Use uploaded image/video/audio assets from the workspace asset library.
Edit text elements and alert message templates.
Configure basic style properties such as position, size, alignment, font, colors, opacity, and z-index/layer order.
Preview the overlay in-browser.
Test an alert against the exact layout currently being edited.
Save the layout to the workspace.
Keep layouts scoped to the current workspace/channel.

Permissions

owner should be able to create, edit, preview, and delete layouts for their own workspace.
editor should be able to edit layouts if current role rules allow layout editing.
viewer should not be able to edit layouts.
Non-admin users must not be able to access another workspace's layouts.

Implementation notes

This is a Next.js webapp, so the editor should be implemented as part of the browser dashboard experience.
Avoid making this a server-only or config-file-only workflow.
Persist editor output as structured layout data rather than only static CSS if possible.
It should be possible for overlay browser-source pages to render saved layouts consistently.
Consider whether an existing drag/drop/canvas library is appropriate, but keep dependencies reasonable.

Acceptance criteria

Workspace owners can edit an overlay layout entirely from the browser.
The editor supports drag-and-drop placement of at least visual asset and text elements.
Saved layouts render in the actual overlay route/browser source.
Test alerts use the layout being edited or selected.
Workspace authorization is enforced on all editor APIs and pages.
No server shell/backend access is required for normal overlay customization.

Notes

This is a major feature. It can be broken into follow-up issues, but this issue captures the required product direction: owners need StreamElements/Streamlabs-like browser editing for GitchAlerts to be a real self-hosted replacement.

## Problem Overlays are currently managed too much from the backend/server side. That is not useful for invited workspace owners who do not have access to the server backend. If GitchAlerts is meant to become a self-hosted replacement for StreamElements or Streamlabs-style alert tools, workspace owners need to be able to edit overlays from the browser. ## Desired behavior Add a browser-based overlay editor inside the Next.js app so workspace owners can build and edit alert overlays without touching the server backend. The editor should support drag-and-drop style layout editing similar in concept to common streaming alert platforms. ## Scope The first useful version should allow a workspace owner to: - Create and edit overlay layouts in the browser. - Place visual elements on a canvas/stage. - Use uploaded image/video/audio assets from the workspace asset library. - Edit text elements and alert message templates. - Configure basic style properties such as position, size, alignment, font, colors, opacity, and z-index/layer order. - Preview the overlay in-browser. - Test an alert against the exact layout currently being edited. - Save the layout to the workspace. - Keep layouts scoped to the current workspace/channel. ## Permissions - `owner` should be able to create, edit, preview, and delete layouts for their own workspace. - `editor` should be able to edit layouts if current role rules allow layout editing. - `viewer` should not be able to edit layouts. - Non-admin users must not be able to access another workspace's layouts. ## Implementation notes - This is a Next.js webapp, so the editor should be implemented as part of the browser dashboard experience. - Avoid making this a server-only or config-file-only workflow. - Persist editor output as structured layout data rather than only static CSS if possible. - It should be possible for overlay browser-source pages to render saved layouts consistently. - Consider whether an existing drag/drop/canvas library is appropriate, but keep dependencies reasonable. ## Acceptance criteria - Workspace owners can edit an overlay layout entirely from the browser. - The editor supports drag-and-drop placement of at least visual asset and text elements. - Saved layouts render in the actual overlay route/browser source. - Test alerts use the layout being edited or selected. - Workspace authorization is enforced on all editor APIs and pages. - No server shell/backend access is required for normal overlay customization. ## Notes This is a major feature. It can be broken into follow-up issues, but this issue captures the required product direction: owners need StreamElements/Streamlabs-like browser editing for GitchAlerts to be a real self-hosted replacement.

No milestone

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

gitchegumi/GitchAlerts#34

No description provided.

Rows
Columns