StreamElements Custom Widgets MasterClass – Part 1: HTML, CSS & JavaScript Basics

Hey everyone, Gerg (aka Greg from JimmyJoom) here! 👋

If you've ever wanted to create your own custom widgets for StreamElements overlays but felt overwhelmed because "there's really not a lot of info out there," you're in the right place.

This is the first video in a beginner-friendly 5-part series designed especially for people who've never touched code before. We'll start from absolute zero and build up so you can create (or tweak) awesome custom widgets for your Twitch or YouTube streams.

In this opening episode, we cover the fundamentals: what HTML, CSS, and JavaScript actually do, how they work together inside a StreamElements custom widget, and a super simple hands-on demo to get your first colored boxes on screen.

Watch the full video here: StreamElements Custom Widget MasterClass 01: HTML CSS JS

Let's jump in!

Quick Overview of the Entire Series

This 5-part series will take you from total beginner to confidently building interactive widgets:

1. HTML, CSS, and JavaScript – The absolute basics and how they connect (that's this one!)
2. Custom Fields – Add sliders, color pickers, image uploads, text inputs, etc., so viewers (or you) can customize the widget
3. Animations – Different ways to animate elements, which methods are best, and my personal go-to technique
4. Handling Events – React to follows, subs, donations, bits/cheers, and more
5. Chat Messages – Set up commands so chat can trigger or update things in your widget

It's detailed and can get a bit challenging, but I explain everything as simply as possible. Even if you just want to tweak existing widgets, this series will help you understand what's going on under the hood.

The Classic Room Analogy: HTML, CSS, and JavaScript Explained

Imagine your bedroom:

• HTML = The structure The four walls, door, window, table(s). It defines what exists and where things roughly go. No style yet—just the skeleton.
• CSS = The design & styling What color are the walls? How big/high is the window? What wood finish is on the table legs? Where's that cool poster hanging? CSS makes everything look good.
• JavaScript = The interactivity & changes Turning on the light. Closing the blinds. Switching the TV channel. Anything that changes over time or in response to something = JavaScript.

HTML builds the blocks → CSS paints and positions them → JavaScript makes them move, react, or update.

Hands-On: Creating Your First Custom Widget in StreamElements

1. Start a new overlay → Choose 1080p (or your preferred resolution).
2. Add Widget → Select Static / Custom → Custom Widget.
3. Position & Size Recommendation (very important!): Set width to 1920px and height to 1080px, and center it perfectly. This acts as a "full-screen canvas." Tell your users: "Don't resize or move it in the editor—add it as a Browser Source in OBS and position it there instead." This prevents a ton of weird scaling issues.

Now open the Editor tab. You'll see sections for HTML, CSS, JavaScript, Fields, and Data.

For our super basic demo, we clear everything out (Ctrl+A → Delete in each tab except the default HTML, which we leave mostly alone—it loads a Google Font and has a <div class="main-container">).

Step 1: Basic CSS – Make a Full-Screen Red Background

.main-container {
  width: 100vw;
  height: 100vw;
  background-color: red;
}

Boom! Full-screen red overlay. Try changing to 50vw for width/height, or switch to pixels (200px) to see how it behaves.

Step 2: Add a Child Div (HTML) & Style It (CSS)

Update your HTML (inside the main-container div):

<div id="blue-box"></div>

Then style it in CSS:

#blue-box {
  width: 50%;
  height: 50%;
  background-color: blue;
}

Notice how percentages are relative to the parent (main-container). This is key to understanding layout in widgets.

Step 3: JavaScript – Make It Change Dynamically!

Now the fun part—add this to the JavaScript tab:

let box = document.getElementById('blue-box');

box.style.backgroundColor = 'yellow';
box.style.width = '90vw';

JavaScript runs last and super fast, so:

• Starts with a blue box
• Instantly turns it yellow
• Changes width to 90% of the viewport (not the parent anymore!)

This shows how JS grabs elements (getElementById) and modifies their styles directly.

Key Takeaways from Part 1

• HTML → Build the structure (divs, classes, IDs)
• CSS → Style it (colors, sizes, positioning – use .class or #id)
• JavaScript → Handle anything that changes, moves, or reacts

CSS can be frustrating with parent/child relationships and units (%, px, vw/vh), but practice makes it click.

Ready for More?

This is just the foundation! In the next parts we'll add customization options, smooth animations, event triggers (subs, follows, donations), and even chat command integration.

If you're new to coding and want to make your stream overlays truly unique, stick around for the full series.

Questions? Drop them in the YouTube comments on the video—I read and reply to as many as I can.

Happy widget-building, and I'll see you in Part 2! 🚀