A powerful, flexible, and fully customizable overlay editor designed for TikTok LIVE creators.
Manage multiple TikFinity widgets, create stunning layouts, save presets, and export clean overlay URLs for OBS or TikTok LIVE Studio.
Link: Overlayed
- 🎨 Photoshop‑style controls (drag, resize, rotation, borders)
- 📐 Resolution guides (720p, 1080p, 1440p, 4K)
- 🔍 Canvas zoom (25%–200%)
- 🔒 Lock/unlock system
- 💾 Presets + Auto-save + JSON import/export
- 🔗 Clean external overlay URLs
- 🖱️ Interactive iframe mode
- ⌨️ Keyboard shortcuts
- 🧩 Built-in TikFinity templates
---
## 🧰 Features in Detail
### 🎨 Widget Customization
- Opacity / Transparency
- Zoom (10%–300%)
- Rotation (0–360°)
- Position (X/Y)
- Custom width/height
- Layer system (z-index)
- Border radius, thickness, color, styles
### 🖼️ Canvas Tools
- Resolution overlays (720p/1080p/1440p/4K)
- Snap-free resizing
- Canvas zoom 25–200%
- Gray contrast background
### 🧱 Widget Management
- Multi-iframe support
- Add/Remove widgets
- Lock individual/all widgets
- Drag-and-drop movement
- Photoshop-style resize handles
---
## 🔗 External Overlay Links
Three ways to generate stream-ready overlay URLs:
### ✔ 1. Preset Mode *(Recommended)*
view.html?preset=MyOverlay
Updates automatically when the preset changes.
### ✔ 2. Encoded Configuration
Exports full layout inside the URL (static layout).
### ✔ 3. Auto-save Mode
Automatically loads your latest layout.
Use in:
- OBS → Browser Source
- TikTok LIVE Studio → Link Source
---
## 📁 Project Structure
/
├── index.html # Main editor UI
├── view.html # Clean view for streaming
├── server.py # Python web server
├── replit.md # Documentation
└── README.md # Main project README
---
## 🖥️ Setup & Run
### ▶ Run Locally
python server.py
Server runs on:
### ✔ Requirements
- Python 3.11+
- No external dependencies
---
## 🔧 Technical Notes
- Uses **LocalStorage** to store presets
- Clean “view mode” removes all UI elements
- Compatible with OBS, TikTok LIVE Studio, Streamlabs Desktop
---
## 🎯 TikFinity Integration
- Widgets: https://tikfinity.zerody.one/
- Gift Overlays: https://tikfinity.zerody.one/tiktok/giftoverlays
- OBS Overlays: https://tikfinity.zerody.one/tiktok/obsoverlays
---
## 📝 Changelog
### v1.2
- Resolution guides
- Canvas zoom
- Gray background
### v1.1
- External overlay links
### v1.0
- Multi-widget editor with presets
---
## 💬 Support
If you need help with TikFinity widgets, visit the official docs.
---
## 👤 Author
Created by **Felipe Fernandes (BadWise)**
Designed for professional **TikTok LIVE streamers**.