# Introducing JIVE - the ultimate JUCE extension for building GUIs **URL:** \ **Category:** Useful Tools and Components\ **Created:** [June 5, 2023, 12:02pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534 "2023-06-05T12:02:07Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![sudara](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/sudara/32/8071_2.png) [@sudara](https://forum.juce.com/u/sudara)\ **Post date:** [November 26, 2023, 7:05pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/21 "2023-11-26T19:05:47Z")
Demo looks great! Just want to say I’m excited by this project! ---
**Author:** ![LiamG](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/liamg/32/6844_2.png) [@LiamG](https://forum.juce.com/u/LiamG)\ **Post date:** [November 30, 2023, 11:44am UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/22 "2023-11-30T11:44:10Z")
In principle, can JIVE work with dynamic / runtime CSS styles, or do they have to be specified at compile time? ---
**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [November 30, 2023, 1:42pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/23 "2023-11-30T13:42:51Z")
Everything’s done at runtime so yeah you can update any layout or style properties whenever you need and the JIVE wrappers will pick those up. It’s all based on `juce::ValueTree` and `juce::DynamicObject` so it’s just a matter of setting the right properties. See [https://github.com/ImJimmi/JIVE/tree/main/jive\_style\_sheets](https://github.com/ImJimmi/JIVE/tree/main/jive_style_sheets) and [https://github.com/ImJimmi/JIVE/tree/main/jive\_layouts](https://github.com/ImJimmi/JIVE/tree/main/jive_layouts) for a list of properties ---
**Author:** ![LiamG](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/liamg/32/6844_2.png) [@LiamG](https://forum.juce.com/u/LiamG)\ **Post date:** [December 1, 2023, 11:15am UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/24 "2023-12-01T11:15:13Z")
The more I’m thinking about it, the more of a use case for this in my project, and I’m eager to try it out. Hope you don’t mind me asking lots more questions over the coming weeks! I don’t see any provisions for Components with custom SVG paths. Is this something you have plans for, or is this somewhere where I could implement my own `GuiItemDecorator`? Edit: I’ve clone the repo, but I’m having trouble building the demo runner. Do I need to create a new project, or is there a project file already set up for it? ---
**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [December 1, 2023, 3:32pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/25 "2023-12-01T15:32:08Z")
> [@LiamG](#): > > I don’t see any provisions for Components with custom SVG paths. Is this something you have plans for, or is this somewhere where I could implement my own `GuiItemDecorator`? You can embed SVG elements directly, or you can use an `` element and set the `source` property: ```cpp auto someComponent { return juce::ValueTree { "Component", {}, { // Inline svg juce::ValueTree::fromXml ("..."); // Image element with SVG source juce::ValueTree { "Image", { { "source", "..." }, } }, }, }; }; ``` I prefer to use inline SVG myself. If you already have some existing components that you don’t want to migrate, you could add them to the component factory: ```cpp jive::Interpreter interpreter; interpreter .getComponentFactory() .set("MyComponent", [] { return std::make_unique(); }); auto view = interpreter.interpret(juce::ValueTree{ "MyComponent", }); ``` Depending on your needs, you may also need to add a custom decorator to handle the synchronisation of your custom component and the `juce::ValueTree` representing it. ```cpp class MyComponentGuiItem : public jive::GuiItemDecorator { //... }; interpreter.addDecorator("MyComponent"); ``` > [@LiamG](#): > > Edit: I’ve clone the repo, but I’m having trouble building the demo runner. Do I need to create a new project, or is there a project file already set up for it? How are you building it? It should be as simple as: ```bash > git clone git@github.com:ImJimmi/JIVE.git > cd JIVE > cmake -B build -G -DJIVE_BUILD_DEMO_RUNNER=ON > cmake --build build ``` I haven’t made a Projucer project for the demo runner so if you’re using that then yeah you may need to set up your own. I should probably add a Projucer project for it anyway… ---
**Author:** ![bwall](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/bwall/32/618_2.png) [@bwall](https://forum.juce.com/u/bwall)\ **Post date:** [December 1, 2023, 3:53pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/26 "2023-12-01T15:53:09Z")
Yes, please add a Projucer project. As for my own needs, I have no plans to move to CMake in the foreseeable future. ---
**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [December 1, 2023, 4:05pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/27 "2023-12-01T16:05:24Z")
Will do. FWIW all the modules are formatted as JUCE modules so they’ll work fine with the Projucer, just the demo project doesn’t have a `.jucer` project yet. ---
**Author:** ![bwall](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/bwall/32/618_2.png) [@bwall](https://forum.juce.com/u/bwall)\ **Post date:** [December 1, 2023, 4:22pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/28 "2023-12-01T16:22:10Z")
Thank you. Much appreciated! ---
**Author:** ![LiamG](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/liamg/32/6844_2.png) [@LiamG](https://forum.juce.com/u/LiamG)\ **Post date:** [December 4, 2023, 1:42pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/29 "2023-12-04T13:42:54Z")
Hello, I started playing around with Jive tonight, and I can’t get Style sheets to work. I’ve basically copied your Getting Started guide verbatim, like this: ```auto juce::ValueTree testText() { return { "Text", { {"text", "test text"} } }; } juce::ValueTree window() { static constexpr auto style = []() { return new jive::Object{ { "background", "#254E70" }, { "foreground", "#AEF3E7" }, { "font-family", "Helvetica" }, { "font-size", 25 } }; }; return { "Window", { { "width", 440 }, { "height", 200 }, { "style", style() } }, { testText() } }; } std::unique_ptr getJiveWindow() // goes to JUCEApplication { jive::Interpreter jive; return jive.interpret(window()); } ``` The window and the text box are displayed, but the style doesn’t get applied–it’s just the default style. Any idea what the problem is? I’m guessing it’s something very simple, and possibly a step that you forgot to mention in your Getting Started guide. When I was stepping through the code, I had the impression that the new style was being applied but then got reset, in case that helps. ---
**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [December 4, 2023, 2:58pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/30 "2023-12-04T14:58:01Z")
Sounds like you could have the same issue as here: [Getting started and CMake integration example errors · Issue #126 · ImJimmi/JIVE · GitHub](https://github.com/ImJimmi/JIVE/issues/126) You likely need to define `JIVE_GUI_ITEMS_HAVE_STYLE_SHEETS=1`. This is turned off by default so the two modules `jive_layouts` and `jive_style_sheets` don’t depend on one another. I’ve been meaning to think of a nicer way to do this. ---
**Author:** ![LiamG](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/liamg/32/6844_2.png) [@LiamG](https://forum.juce.com/u/LiamG)\ **Post date:** [December 4, 2023, 3:40pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/31 "2023-12-04T15:40:04Z")
Yes that did it, thank you! ---
**Author:** ![QuilioLtd](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/quilioltd/32/15459_2.png) [@QuilioLtd](https://forum.juce.com/u/QuilioLtd)\ **Post date:** [December 5, 2023, 12:09am UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/32 "2023-12-05T00:09:13Z")
Whoah! Super cool. We definitely have a use case since we use Figma a lot for our component design. I wonder how we’d integrate it into our WYSIWYG design system, though. ---
**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [December 5, 2023, 10:19am UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/33 "2023-12-05T10:19:08Z")
Figma integration is something I’d like to add actually. There’s various exporters that can generate code from your Figma designs, and they have a nice plugin API that lets you write your own. This would (hopefully) replace the need for a WYSIWYG editor as Figma would effectively act as your editor in that case. That’s more of a quality-of-life thing though, at the moment I’m trying to focus on fleshing out features, so haven’t any plans to work on that any time soon. ---
**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [December 28, 2023, 5:07pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/34 "2023-12-28T17:07:42Z")
> [@bwall](#): > > Yes, please add a Projucer project. I’ve now added Projucer projects for all the included example projects, as well as adding a plugin version of the demo app. Check it out on the latest `main`, or tag `v1.0.4` ---
**Author:** ![bnc8](https://avatars.discourse-cdn.com/v4/letter/b/ea5d25/32.png) [@bnc8](https://forum.juce.com/u/bnc8)\ **Post date:** [January 7, 2024, 9:40pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/35 "2024-01-07T21:40:07Z")
I really like what you are trying to do here, and all the other GUI projects, it just helps developers. I’ve just cloned and am trying it out, nice work. TBH I’m fairly new to JUCE (which is the basis of my thoughts below), and I started building my own basic GUI builder as I only needed something simple, using XML, as projects I had started the same way. I was working on a data structure (ValueTree), then a GUI to referto the ValueTree, which updated as child items were retrieved. What I was trying to achieve was something fairly basic, describe the structure in XML (as JUCE handles that better than Json generally), read that into a ValueTree, and then describe the styles similarly, relating to the structure like HTML/css properties/classes. Most importantly to keep it simple, use external XML files that are easy to read and construct, so others on a project can pick up the structure and layout quickly, with the code reading in the external files, and doing the heavy lifting. Needless to say, easier said than done. What you have done is MUCH further along than I have done so far, and better and more complete than I was planning to do. It’s impressive, as are the other GUI builders. For my 2 cents of feedback, I wonder if there is a way to make the onboarding easier? Like that the structure and layouts are more familiar, like using XML/css files rather than learning new layouts in code? Like the example you provided: ```auto // .html
// .css .container { display: flex; flex-direction: column; background-color: red; border: 2px solid blue; } ``` Could this be how the developer specifies it, then JIVE reads it into the required JIVE structure? Maybe this is a step towards other imports too, like Figma? Again, just my 2 cents, and again, what you have done is great! ---
**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [January 8, 2024, 9:39pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/36 "2024-01-08T21:39:27Z")
I don’t have any intension to officially support HTML in JIVE, I think that would be the wrong direction for this project. Couple reasons for this: 1. JUCE already has a fully featured HTML renderer, the `juce::WebBrowserComponent`. If you want to use HTML, you should use that along with whatever JS and CSS frameworks your heart desires. I understand there are [planned improvements to this approach coming in JUCE 8](https://forum.juce.com/t/the-2023-juce-user-survey/56653/5) so this will likely become an even more viable solution in the near future. 2. The HTML/CSS specification is [HUGE](https://www.w3.org/TR/css-2023/). As soon as you start to “officially” support _some_ of it, it becomes totally reasonable for anyone and everyone to request any and all features of those specifications be implemented. Adding things like `
`, `

`, `` etc. would be trivial - any contributor could smash that out in an afternoon. Things like `display: inline-block` wouldn’t be too tricky either. But what about things like `
    `? More specifically, all the weird and wacky CSS properties that apply to it, like [`@counter-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style). Trying to add support for all these things would completely derail the project IMO as all the development into the project would be spent reinventing wheels. Some of my previous comments may somewhat contradict this so to clarify - for things like colour, I _do_ wish to support the CSS [`` data type](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). By this, I mean it should be possible to take a string like `rgb(255 0 153)` and paste it into a CSS file, and into a C++ source file using JIVE and both produce an identical colour. However, I do _not_ plan to support the CSS `color` property as there are bound to be endless edge-cases and whatnot that would be wasted effort to try to replicate - instead I have `foreground` which can be used to specify the colour of text, icons, etc. ---
    **Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [January 8, 2024, 9:40pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/37 "2024-01-08T21:40:10Z")
    I want JIVE to feel “native” to JUCE - it should feel familiar and comfortable for anyone who’s used JUCE for even just a short while. For that reason it should support only what is strictly necessery for developers to achieve whatever it is they need to achieve. For example, JUCE doesn’t have any equivalent to HTML’s `
      ` (unordered list). If you want a bullet-point list in JUCE you’d have to write you own custom `Component` class and build it from scratch. I’ll leave it up to your own imagination what that might entail, my guess would be ~150 lines of code. JIVE doesn’t have an unordered-list type either, however what it _does_ have is the ability to build one from scratch using relatively few lines of code. For example you might do something like this: ```cpp [[nodiscard]] auto listItem(const juce::String& item) { return juce::ValueTree { "Component", { { "flex-direction", "row" }, }, { juce::ValueTree::fromXml (" ... "), // Bullet icon juce::ValueTree { "Text", { "text", item } }, }, }; } [[nodiscard]] auto unorderedList(const juce::StringArray& items) { juce::ValueTree view{ "Component", { { "padding", "0 0 0 20" }, }, }; for (const auto& item : items) view.appendChild(listItem(item), nullptr); return view; } ``` Two functions of less than 15 lines of code to do the equivalent of a 100+ line-of-code class is exactly what JIVE is built for. ---
      **Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [January 8, 2024, 9:48pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/38 "2024-01-08T21:48:30Z")
      > [@bnc8](#): > > I wonder if there is a way to make the onboarding easier? As for making onboarding easier - I would like to make some more in-depth tutorials and more straight-forward examples at some point to help shallow the learning curve, but I haven’t any immediate plans. ---
      **Author:** ![bnc8](https://avatars.discourse-cdn.com/v4/letter/b/ea5d25/32.png) [@bnc8](https://forum.juce.com/u/bnc8)\ **Post date:** [January 12, 2024, 8:45pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/39 "2024-01-12T20:45:08Z")
      Thanks for the reply. I probably shouldn’t have referred the your html/css example, as that seemed to have confused things. I was meaning using XML as a templating option, parsing those into value trees to describe the UI structure, as an alternative option to writing explicitly in the code. Either way, thats not your approach which I respect. Looking forward to where this project goes. ---
      **Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\ **Post date:** [January 12, 2024, 10:22pm UTC](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534/40 "2024-01-12T22:22:37Z")
      > [@bnc8](#): > > I was meaning using XML as a templating option, parsing those into value trees to describe the UI structure, as an alternative option to writing explicitly in the code. Ahh I see. Sorry I thought you meant HTML specifically. You absolutely can use XML files if you like, or pretty much any other method that JUCE provides for constructing value trees. I use the `ValueTree` constructor in the examples as it’s (currently) the way I’d recommend as it offers the most flexibility, but JIVE also includes some utilities to make working with XML easier. [`jive::parseXML()`](https://github.com/ImJimmi/JIVE/blob/main/jive_core/values/jive_XmlParser.h) takes either a `juce::XmlElement`, an XML-formatted string, or some XML string data (if loading from JUCE’s binary data mechanism for example) and will produce a `juce::ValueTree` that you can pass to a `jive::Interpreter` as in the examples. Most of the heavy lifting in `jive::parseXML()` is done by `juce::ValueTree::fromXml()` interally however `jive::parseXML()` has the additional benefit of handling inline text elements. For example, ```xml ``` This is valid XML but can’t be loaded directly to a `juce::ValueTree` as `juce::ValueTree` does not support inline text elements. So `jive::parseXML()` will first convert this to: ```xml )"; static constexpr auto style = R"( { "background": "red" } )"; jive::Interpreter interpreter; const auto view = interpreter.interpret(jive::parseXML(button).setProperty("style", style, nullptr)); ``` [Previous page](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534.md?page=1) [Next page](https://forum.juce.com/t/introducing-jive-the-ultimate-juce-extension-for-building-guis/56534.md?page=3)