Jieyou Toolbox
首页 / Tools / OBS Stream Widgets
STREAM OVERLAY GENERATOR

Free OBS Stream Widgets & Overlays

选择挂件类型并设置样式，生成OBS直播浏览器源挂件。纯本地运行，数据不上传，保护隐私。

🔒 100% Client-side · Transparent background · Browser source ready · Zero dependencies
🔔
Sub Alert
New subscriber popup
🎁
Donation
Gift & tip popup
⏱️
Countdown
Timer overlay
💬
Chat
Comment overlay
🎵
Now Playing
Music info widget
Live Preview (1920 x 1080) 

            

              
              
            

          

        

      

    

  







  

    
🔗 Related Tools

    

      
        
Live Soundboard

        
Play sound effects for streaming

      
      
        
Teleprompter

        
Scrolling script for streamers

      
      
        
Silence Remover

        
Remove silent audio sections

      
      
        
Video Trimmer

        
Trim video clips online

      
    

  







  

    
📖 How to Use OBS Stream Widgets

    

      

        
🔧 Step 1: Choose a Template

        
    
          
  1. Select one of the 5 widget templates above
    2. 
          
  2. Each template is designed for a specific streaming use case
    3. 
          
  3. Click on any template card to switch between them
    4. 
        

      

      

        
🎨 Step 2: Customize Appearance

        
    
          
  1. Edit text content, colors, fonts in the left panel
    2. 
          
  2. Pick animation styles for entrance and exit
    3. 
          
  3. Adjust timing, sizes, and toggle features on/off
    4. 
        

      

      

        
👁️ Step 3: Preview in Real-time

        
    
          
  1. See your changes instantly in the preview area
    2. 
          
  2. Dark grid background simulates transparent overlay
    3. 
          
  3. Animations play automatically for popup widgets
    4. 
        

      

      

        
📥 Step 4: Add to OBS

        
    
          
  1. Copy the generated code or download the HTML file
    2. 
          
  2. In OBS, add a Browser Source
    3. 
          
  3. Check "Local file" and select your HTML file
    4. 
          
  4. Set width to 1920 and height to 1080
    5. 
          
  5. The background is already transparent - no chroma key needed
    6. 
        

        

          Pro tip: For best results, set the Browser Source width/height to match your stream canvas resolution. The widget positions itself absolutely within that area.
        

      

    

  







  

    
Frequently Asked Questions

    

      

        
Is this OBS widget generator really free?

        
Yes, completely free and 100% client-side. Your widget configurations and generated code never leave your browser. No account, no subscription, no hidden fees.

      

      

        
Do I need to download anything?

        
No software download is required to design widgets. Once customized, you can copy the HTML code directly or download a single .html file to use as an OBS Browser Source.

      

      

        
Will these widgets work with Streamlabs or other streaming software?

        
Yes! These are standard HTML/CSS widgets with transparent backgrounds. They work with any software that supports browser sources, including Streamlabs Desktop, XSplit, vMix, and more.

      

      

        
How do I make the background transparent?

        
The generated widgets already use background: transparent or rgba(0,0,0,0). In OBS Browser Source settings, simply leave the Custom CSS field empty or ensure no background color is set.

      

      

        
Can I edit the widget after downloading?

        
Absolutely. The downloaded file is plain HTML/CSS/JavaScript. You can open it in any text editor to make further customizations, or come back to this generator and re-export.

      

      

        
Do the widgets work on Mac and Linux?

        
Yes. Since these are pure HTML files, they are platform-independent. OBS Browser Source works the same way on Windows, macOS, and Linux.

      

    

  








  

    
🔗 相关工具推荐

    

      
        
✂️
视频去静音工具

        
自动检测并移除视频中的静音片段，导出Premiere/FCP/EDL/CSV剪辑表，纯前端本地处理

      
      
        
✂️
视频无损切片工具

        
基于mp4box.js/ffmpeg.wasm无损切割视频，精确到帧，不重编码保留原画质

      
      
        
🎬
直播音效台

        
12种内置音效+自定义上传，键盘热键触发，Web Audio API零延迟播放，直播/播客必备

      
      
        
🎤
语音提词器

        
Chrome语音识别API实时转写，大字体滚动提词，支持调速和镜像翻转，直播合规必备

      
      
        
💬
弹幕姬

        
直播弹幕悬浮窗生成器，自定义样式颜色速度轨道，实时预览滚动效果，支持OBS浏览器源嵌入

      
      
        
💬
实时同传字幕

        
BYOK模式接入OpenAI/百度/讯飞语音API，浏览器实时转写字幕，支持OBS浏览器源嵌入直播