Starting with Juce as a GUI designer

hi, good morning everyone, this is my first post here.
i am very new to juce, even if a lot of my close friends are using it from some time ago.
i am used to code some audio utilities over other plateforms, so i would ask here only some precisions about JUCE and especially, the GUI design using the projucer !

Well, first of all, i would like to know from the advanced users, regarding GUI design:

  • i am working with vector files, can i create a library of controllers (slides,buttons,etc…) ?

well, thanks for answering me, i am very motivated at this time, as i will be in long holidays and have a lot of time to spend on this… and as i am here, means that i believe Juce will be my next plateform of dev. :wink:

up to now, i did compile Juce and i seems to work like a charm :slight_smile:
have a great day, thank you

Not an expert in JUCE so take this with a grain of salt (many people here with much more knowledge can clarify)

You can have all the layers you want since those technically are Components that contain something, and those can have other Components as childs if you wanna consider that “layers”. Take a look at the documentation to see what can you do with them.

xml are used for saving/loading plugin parameters/states etc. so it’s a supported format in JUCE, even tho I don’t know if those can be used for graphics aswell. You can use svgs & pngs, too, don’t know about ai.

You can modify or have custom sliders & buttons in LookAndFeel.

AFAIK more than 8


See this

JUCE detects whatever the CoreAudio(MacOS)/ASIO (or whatever u have in Windows)/ALSA(Linux) detects, so if your computer detects the soundcard JUCE will aswell. Can’t tell you for sure about iOS/Android (some of them support external soundcards). So

Its not completely clear from your post, but I assume you also ask about using the built-in GUI designer in Projucer? Most people here, myself included, will tell you not to use it, and to hand code your designs using Rectangle::removeFrom... (see or FlexBox layout. Using the live build feature of Projucer can help iteration times so you can see your changes quickly.

Regarding the use of SVG’s, be aware that JUCE has limited support for SVG parsing, so some SVG’s may not render properly, or might need some tweaking. PNG’s are fine but generally not recommended if you want to support different display resolutions. Some developers manually translate Illustrator designs into JUCE path/draw routines.

Enjoy! :slight_smile:

1 Like

Yeah, I found it extreme frustrating, with things like radial smooth shading never worked on Mac, and some other seemingly easy SVG file just didn’t render correctly on Windows either. So that’s a long process of trial and errror, which told me to go straight for bitmaps - PNGs for my graphics. :slight_smile:


Thx DaveH, i would agree on the bitmap gfx as i a m used to produce my GUIs on toshop and i like it this way. i did last year a try on SVG graphics for Windows apps, and i am not fully satisfied, as you said.
i would also request you, DaveH, if we can be in touch to help me with my pngs images, if you dont mind !? please

anyway, that is geat to get your answer :wink:
have a great day

Hi Adamski :slight_smile:
thanks for your answer, i will not use the gui designer, but as you said, with the fully hand-coding process (that the only one i know).

thx johngalt91 :slight_smile: these are great answers to me, this is very clear and by the way, it drops my doubts on outputs and soundcards settings, wicked !
About the look and fell, i still asking myself about creating a components library of sliders and other controls that i my use for my whole production of audio plugins and apps… i am still searching how to produce this lib… more investigation is needed here

thx, have a great day

For me SVG has been working very well.
Sure, there are some edge case SVGs, which JUCE cannot load. But for normal icons, its been working fine for me. Both on Mac and Windows.
For example: JUCE can load the Font Awesome SVGs without problem.


I’m also using SVG’s successfully. As the others said not everything renders as it should but you can find workarounds.

1 Like

hi, thanks for your input here… i am very close to get my setup ready :slight_smile:
after some days on this topic, i am able to load vectors controls (draw), images controls and svg controls… wicked !
now, i am asking myself about where i will put these resources !?
Up to now, i have been testing this, using my desktop to store my images… as my plugins use images and sounds files to be loaded… works fine !
but in the real life… where do you put your resources ? or maybe i should ask this way:
to prepare resources to be used in a release project, where goes the resource folder ? during development and for the final release ?

  • i am using InoSetup to pack my plugins… any idea if this is the way to go ?

thx everyone, i know that should be obvious for most of you, but not yet for me :slight_smile:
have a great day

You can add resource files directly in the Projucer. For example .png or .svg images.
They will then get added to the BinaryData.h and BinaryData.cpp file, which the Projucer automatically creates (located under the “Juce Library Code” folder).

So say you added an .svg file named “GreatVector.svg” to the Projucer. You can then access it from the C++ code using BinaryData::GreatVector_svg and BinaryData::GreatVector_svgSize.
Thats very handy, because you only need to ship one file to the customer: your binary executable file. All resources are baked into that executable file using the Projucer.

that was a big deal for me, to get the files outside the exe was the best solution as i can update the graphics with ease and see directly the result, without compiling, and also because i am building a user theme system (i know it is old style but i like it this way :slight_smile: )… i am trying to :smiley:

but yes, the solution to embed in binary is surely the best option for icons, logo and protected elements.

Ah, I see what you mean. If you want to provide some kind of library data (sound libs or skins), then yes, its probably better to have them externally.
In that case I would put them into one of the “special directories”, which JUCE provides. Take a look at the JUCE::File::SpecialLocationType enum. For example sound files could go into the File::SpecialLocationType::userMusicDirectory. In Mac that defaults to ~/Music and on Win to something similar.

About installation: good question. I did use InnoSetup in the past on Win and just plain .dmg on Mac. But I never had to deal with external files.

No gradients + no shadows + text transformed to outlines = juce SVG heaven


like i said, right now i am using:File::SpecialLocationType::userDesktopDirectory
and i am wondering to what directory i should put my files to be distributed with the app/pugin ?
In any case, i need to change this setting :slight_smile:

i was thinking to put a folder with my assets (soundfiles and svg) next to the executable or plugin, but i cannot success doing this :frowning: so now, i am looking for the user documents directory… but i am really sure of that choice…