Offline Safe-Zone Layout Planner

Offline Safe-Zone Layout Planner is a single HTML file you open in a browser. It runs with no account, no install and no network calls. Choose a 16:9 (1920x1080 or 1280x720), 4:3 (1440x1080) or 9:16 (1080x1920) frame and an action margin. Add rectangles for webcam, chat, alerts or other elements, then drag them, type percentages, or select an element and nudge it with arrow keys (0.5% per press, 2% with Shift). Values snap to 0.1% and stay inside the frame. Elements that overlap the margin turn red and are listed under the preview. Export the layout as JSON to reload later, or export CSS classes prefixed sz- with approximate pixel comments. Benefit: you can plan positions and check margin overlaps in one view before you change your real scene. Limits: it does not connect to OBS, Streamlabs or any other software, does not capture real output, and does not set any platform rule; the margin is your own planning guide and is a percentage of width and height separately, so it is a different pixel count on non-square frames. Layout is kept only while the page is open unless you export it. Browser compatibility has not been formally tested; the tool uses standard HTML, CSS and JavaScript. Not included: art packs, overlay widgets, templates or a finished stream overlay. Created with AI assistance.

Format: html tool · Instant download (.zip) · Includes: index.html, README.md

Created with AI assistance and checked automatically before release.

Secure payment by Stripe. See terms & refund policy.