How I built a Social Safe Zone Previewer for TikTok & Reels in Vanilla JS

As developers and content creators, there is nothing more frustrating than rendering a perfect video, only to realize the TikTok, Reels, or YouTube Shorts UI completely blocks your text and call-to-action. I wanted a lightweight tool to check this before publishing, so I built a Social Safe Zone Previewer.

The Approach

I built this using 100% Vanilla JS and CSS. No server uploads are needed—your video files stay local and private in your browser.

Here is a quick look at the core logic handling the platform overlay switching:

function switchPlatformOverlay(platform) {
    const previewContainer = document.getElementById('preview-container');

    // Reset all previous platform classes
    previewContainer.className = 'video-wrapper';

    // Apply specific platform safe zone overlay UI
    const platforms = {
        'tiktok': 'overlay-tiktok',
        'reels': 'overlay-reels',
        'shorts': 'overlay-shorts'
    };

    if (platforms[platform]) {
        previewContainer.classList.add(platforms[platform]);
    }
}

Try it out

You can use the live tool for free here: Social Safe Zone Previewer

Let me know what you think or if you'd add any other platform safe zones in the comments!