Audio Programming Basics

Blog

Build this Awesome Sampler Plugin | Part 4: JUCE UI Basics

Learn how to build a custom JUCE plugin interface using images, fonts, colours, and reusable UI assets.

Joshua Hodge

·

May 7, 2026

News

Build this Awesome Sampler Plugin | Part 4: JUCE UI Basics

Learn how to build a custom JUCE plugin interface using images, fonts, colours, and reusable UI assets.

Joshua Hodge

·

May 7, 2026

Tutorials

Build this Awesome Sampler Plugin | Part 4: JUCE UI Basics

SHARE THIS

Speakers

No items found.

SHARE THIS

Speakers

No items found.

Tutorials

Build this Awesome Sampler Plugin | Part 4: JUCE UI Basics

SHARE THIS

Speakers

No items found.

SHARE THIS

Speakers

No items found.

Learn how to build your first custom user interface for a JUCE audio plugin.

In this tutorial, we replace the default JUCE editor with a fully custom interface and introduce a clean workflow for managing colors, fonts, images, and other UI assets. This is Part 4 of the JUCE Sampler Plugin series and the beginning of our deep dive into modern plugin UI design.

If you've ever wondered how plugin developers go from a generic grey window to a polished product interface, this tutorial lays the foundation.

‍

Follow along on GitHub:

https://github.com/TheAudioProgrammer/JuceSamplerAudioPlugin

(Switch to the "4-user-interface-1" branch and check the commit history to follow each step)

‍

Timestamps:

00:00 - Introduction & What We're Building

01:56 - The Graphic Design Handoff

02:59 - Setting Up Assets (Images, Fonts, CMake)

06:46 - Creating the SamplerLookAnd Feel Header

08:25 - Colors & Binary Data

09:31 - Font Typefaces & Accessor Functions

13:49 - Drawing the Background Image16:55 - Abstracting Window Dimensions & Plugin Processor

18:34 - Recap & What's Next

‍

Resources mentioned:

Inter font family: https://fonts.google.com/specimen/Inter

Audio Programming Basics

Graphics

JUCE

Music Tech

Joshua Hodge

The Audio Programmer

More Tutorials

Build this Awesome Sampler Plugin | Part 5: JUCE PNG Strips for Next-Level Plugin UIs

In Part 5 of our sampler series, we build real custom knobs from an image filmstrip and a JUCE LookAndFeel, then wire them to the Decay and Reverb controls.

This is some text inside of a div block.

The Audio Programmer Virtual Meetup | June 11th, 2026 @ 18:30 UK

Test-maxing your audio DSP with HART

This is some text inside of a div block.

We Built a Multi-Player Audio App With AI: Intro to Audiotool Nexus

Nexus is Audiotool's new extension layer that lets a browser-based app read and write a live project in real time, something a traditional VST can't do. Silas Gyger, lead engineer at Audiotool, shows how far an AI agent can take you by building three working apps from scratch.

This is some text inside of a div block.

Vibe Coding an Audio Plugin with Cursor vs Claude Code

A practical first look at Cursor for AI-assisted audio plugin development, covering project setup, code review, debugging, and workflow comparisons with Claude.

This is some text inside of a div block.

More Meetups

The Audio Programmer Virtual Meetup | June 11th, 2026 @ 18:30 UK

Test-maxing your audio DSP with HART

This is some text inside of a div block.

The Audio Programmer Virtual Meetup | April 9th, 2026 @ 17:00 UK

Jani Huoponen, Scott Kramer, and Claus Trelby explore Eclipsa Audio – Google and Samsung's open-source spatial audio format – and what it means for creators working across music, film, TV, and the open web.

This is some text inside of a div block.

The Audio Programmer Virtual Meetup | March 5th, 2025 @ 18:00 UK

Sam Fischmann introduces practical approaches to getting started with Digital Signal Processing, covering key DSP concepts and how they translate into useful tools for music production.

This is some text inside of a div block.

The Audio Programmer Virtual Meetup | February 10th, 2025 @ 17:30 UK

Eric Tarr introduces the Point-to-Point Library, a tool designed to help audio developers easily incorporate analog circuit modeling into their plugins.

This is some text inside of a div block.

More News

The Audio Programmer joins Audiotool's Let's Build! hackathon series

We're joining BBC R&D, the Fraunhofer Institute and Music Hackspace as collaborators in Audiotool's Let's Build! NEXUS Hackathon Series, a free global hackathon running through 6 July 2026.

This is some text inside of a div block.

API London

An evening focused around building the future of music and audio apps, plugins, and creative tools.

This is some text inside of a div block.

Steinberg VST3 & ASIO SDKs Go Open Source

Steinberg announce licensing changes that will have a huge impact for audio software developers.

This is some text inside of a div block.

More Articles

Is AI Killing Music Tech? How to Stay In Demand

AI is reshaping audio development faster than most teams can react. Here are three things that will keep you valuable as the tools get better, drawn from months of pushing them into real codebases.

This is some text inside of a div block.

From creation to curation: how to spot AI-generated CVs

Polished language is becoming cheap. Context is becoming expensive. Five patterns we keep seeing in AI-generated CVs, and what they mean for specialist hiring.

This is some text inside of a div block.

The audio industry is bigger than you think – and harder to hire into

Audio engineering has quietly fragmented across safety systems, embedded sensing, hearing tech and machine learning. The companies hiring in these fields are no longer just competing with other audio companies – and most of them don't realise it.

This is some text inside of a div block.

Why Use a Specialist Recruiter for Music Tech Hiring?

The Audio Programmer gives you access to pre-screened, specialist talent from within the audio development community, without the noise of a standard job board.

This is some text inside of a div block.