logo

Live Production Software Forums


Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Options
Go to last post Go to first unread
darkodj  
#1 Posted : Wednesday, May 6, 2026 6:01:00 AM(UTC)
darkodj

Rank: Newbie

Groups: Registered
Joined: 5/6/2026(UTC)
Posts: 3
Serbia
Location: Belgrade

Hi all,

I'm Darko, an independent developer, and I want to share something I've been building over the past few years: DJ HTML Creator — a Windows desktop motion graphics application designed specifically for HTML-based broadcast graphics. It exports clean, self-contained HTML that drops into a vMix Web Browser input, with a dedicated vMix export option that integrates with vMix's BrowserNavigate shortcut system for runtime field updates.

Real-world use: it was used live on TV earlier this year for the ABA League Junior Finals 2026 (3-day basketball tournament in Belgrade) and a Eurocup quarter-final between Hapoel Jerusalem and Türk Telekom Ankara. Production teams provided the graphic designs; each one was then built as an animated HTML template in DJ HTML Creator with data-bound fields for every dynamic element, and played out through CasparCG via a custom control app. Score bugs, lineups, scoreboards, statistics, brackets, timeout indicators — pressure-tested in real production.

A few things specifically relevant to vMix sports/event workflows:

- **Dedicated vMix export** that wires up to the BrowserNavigate API so you can update fields by layer name from vMix shortcuts
- **Tabular Nums** — fixed-width digits so score, clock, and stat numbers don't jitter horizontally as they update
- **Fit Width** — text auto-scales down when content overflows, so long player names never break your layout
- **Dynamic Size Binding** — background shape auto-resizes to match its text layer, so name straps always fit
- **Image Loader layers** for live photo/logo swaps via URL at runtime (player headshots, sponsor logos)
- **Atlas/sprite sheet import** for animated logos and frame-based elements
- Familiar timeline editor with keyframe animation, multiple masks per layer with Add/Subtract modes, mask feathering, gradients, 3D rotation (X/Y/Depth), 12+ layer transition types
- Built-in HTML Preview with F1=Play and F2=Stop hotkeys to test before exporting
- Multiple export formats from one project: HTML for vMix, MOV ProRes 4444 with alpha, WebM VP9 with alpha, PNG/TGA sequences, plus Lottie JSON if you also need the same animation on a companion web/mobile app

Free trial is the full app — no time limit, every feature unlocked. Only restriction is a small watermark on exports until you license it (€30/month or €300/year).

Site + free .htmc project templates + video tutorials: https://djhtmlcreator.com

Really curious what vMix folks find missing in current title/overlay workflows. Happy to answer technical questions, take feature requests, or just hear what you'd want from something like this.

— Darko
Luis70  
#2 Posted : Wednesday, May 6, 2026 8:00:15 AM(UTC)
Luis70

Rank: Advanced Member

Groups: Registered
Joined: 11/27/2023(UTC)
Posts: 126
Grenada

Thanks: 9 times
Was thanked: 8 time(s) in 8 post(s)
Is there an instruction manual or demo to show how to setup and use
Kotin  
#3 Posted : Thursday, May 7, 2026 1:26:38 AM(UTC)
Kotin

Rank: Advanced Member

Groups: Registered
Joined: 3/20/2026(UTC)
Posts: 34
United States
Location: Wilmington

Thanks: 13 times
Was thanked: 5 time(s) in 5 post(s)
A very useful app! Yes, I'm interested in the demo
darkodj  
#4 Posted : Saturday, May 9, 2026 1:49:41 AM(UTC)
darkodj

Rank: Newbie

Groups: Registered
Joined: 5/6/2026(UTC)
Posts: 3
Serbia
Location: Belgrade

There's a link on the website to the YouTube channel, where you'll find a video on the basics of creating a lower third along with a few others. More demo videos and ready-made projects will be coming soon.
michaelJJ  
#5 Posted : Wednesday, August 26, 2026 3:41:28 AM(UTC)
michaelJJ

Rank: Newbie

Groups: Registered
Joined: 8/7/2026(UTC)
Posts: 3
Poland

Hi. I’m exploring the integration options between DJ HTML and vMix, and I have a few questions for the app's creators.

What is the correct way to set up a project that includes both an "in" and "out" animation for a lower third? Should I use the "stop, next & outro" marker to define the stop point? I created a project, but something seems to have gone wrong: the watermark (indicating the webpage has loaded correctly) appears in vMix, but it disappears as soon as I click "Start."
Is it possible to create multiple "pages" within a single overlay and trigger them out of sequence?
I also have a small suggestion. I have a font family with multiple weights—not just bold and italic, but also semi-bold, light, medium, etc. I’d like to be able to use these within the program without having to dig into the code.

Best regards
darkodj  
#6 Posted : Thursday, August 27, 2026 1:47:20 AM(UTC)
darkodj

Rank: Newbie

Groups: Registered
Joined: 5/6/2026(UTC)
Posts: 3
Serbia
Location: Belgrade

Hello,

Thanks for writing, and for testing this properly. Answers below, in order.

1 · In and out animation for a lower third

Yes — the Stop/Next & Outro marker is exactly the right tool. The model is:

frame 0 ─── in-animation ─── [STOP marker] ─── out-animation ─── last frame

#play runs from frame 0 and holds at the first stop marker. #stop plays everything after that marker — your out-animation — and then hides the graphic. So you build both animations on one timeline and let the marker separate them.

About the watermark disappearing: that is the trial watermark, and if it vanishes it usually means the page reloaded or navigated, rather than the template misbehaving. One thing to check first: the template deliberately does not auto-play on load. It waits for a command. If vMix's "Start" only brings the input on air without issuing a BrowserNavigate to yourfile.html#play, nothing will animate — the graphic just sits in its pre-roll state.

There is a quicker way to test this without setting up any shortcut. In vMix, right-click the Browser input and enable keyboard input for it — then F1 plays and F2 stops the template directly. That tells you immediately whether the template itself is fine and the problem is only in how the trigger is wired. The same two keys work if you open the exported file in a plain browser.

So: try F1 first. If the animation runs correctly, all that is left is to create the shortcut:

BrowserNavigate → yourfile.html#play
BrowserNavigate → yourfile.html#stop

If it does not run even with F1, then something is genuinely wrong and I would like to see it — tell me what you observe and I will look into it.

2 · Multiple "pages" in one overlay, triggered out of sequence

Yes, this is supported, and it is how I use the tool most in my own work — one template holding many elements, each brought in and out independently, in any order.

It goes through the same #update: channel:

yourfile.html#update:{"showBar":3} bring element 3 in
yourfile.html#update:{"hideBar":3} take element 3 out
yourfile.html#update:{"show":[1,4,7]} bring several in at once
yourfile.html#update:{"level":"2:3"} send element 2 to its 3rd stop marker

showBar / hideBar play that element's own in- and out-animation without touching the others. level is the more capable one: if an element has several stop markers, you can send it straight to any of them, in any order, and it animates there from wherever it currently is. Re-sending a value it already holds does nothing, so a live data source can simply keep sending its current state.

The elements are worked out automatically at export time from how your layers are named and animated — layers named Name1, Title1, Photo1 become element 1, and so on.

3 · Font weights beyond bold and italic

You are right, and it is a fair point. The editor currently offers only Bold and Italic toggles, so Light, Medium and SemiBold cuts cannot be reached from the interface.

This is being addressed in the next version — text layers get a proper Weight selector listing the cuts the chosen family actually has, and the weight can even be animated over time. I will let you know when that build is out.

Two things that may help in the meantime:

Version 1.5.9 fixed a related and worse problem: previously only one file per family was embedded in an export, so a layer set to Bold shipped with the regular file and came out plain. Now every weight and italic combination a project uses is embedded as its own font file, matched to what the editor draws. If you tested on 1.5.8, that alone is worth updating for.

And practically: if a cut is installed as its own family — many families ship "Montserrat SemiBold" as a separate entry — it shows up in the font list and can be selected today.

If you tell me which family you are working with, I can check how Windows exposes its cuts and tell you exactly what will work right now.

Best regards,
Darko
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.