Webview! || Whats going on here??

Chazrox

I need a breakdown of whats going on here! This is super cool. Does anybody know how to use this properly and can give me a breakdown of whats going on here?

What I want to know is, What kind of file is being played/controlled here?
How do we create these animations?
Any info is appreciated!

Screenshot 2025-07-23 at 4.43.18 PM.png

oskarsh

@Chazrox this is a html file that you can display in that window. you can do basically everything you can do in normal web pages as well.

the animation is probably three js.

Chazrox

@oskarsh crazy. Have you used this for anything before?

oskarsh

@Chazrox yes, there are tutorials in the hise tutorial branch.

aaronventure

@Chazrox I built a full UI using Webview. This is the future IMHO.

I used Svelte 5 + SvelteKit and developed a "static Single Page App".

Svelte 5 + SvelteKit gave me a built in router and state management, no virtual DOM, tree shaking and compiling to simple html+css+java script. The Webview in general gives me screen refresh rate performance with no hiccups whatsoever, responsive design, full accessibility and accessibility checklist + warnings, performance monitor, profiling (Chrome), GPU rendering if needed.

The build folder is in the Images folder of a HISE project and the Webview component's path simply points to the html file.

The work flow is the standard webdev workflow: npm run dev to launch a server and see the changes in real-time, npm run build to compile.

Then if you one day want to move from HISE, you're not locked in. Take your webview GUI and go anywhere you please: JUCE, iPlug2, Cmajor...

Christoph Hart

@aaronventure how are you doing state management if the webview is trashed when you close the interface?

aaronventure

@Christoph-Hart I made the Webview component itself saveInPreset and am storing the whole state as an object on every UI interaction.

When I close the interface and open it, the DOM finishes loading, I call a function in HISE which then feeds this back into the interface.

The state management in the web app itself is while it's running: full reactivity, store subscriptions etc.

dannytaurus

@aaronventure Do you have any example code that shows this? And do you have any released plugins using this web view method for the UI?

aaronventure

@dannytaurus Don't have anything released yet but this is what you do in HISE

const var Interface = Content.addWebView("Interface", 0, 0);
Interface.set("width", 1600);
Interface.set("height", 900);

Interface.set("enableCache", true);
Interface.set("enableCache", false); // comment this out before export

Interface.set("enablePersistence", true);
Interface.reset();

Interface.set("saveInPreset", true);

// Point to index.html
var index = FileSystem.getFolder(FileSystem.AudioFiles).getParentDirectory().getChildFile("Images/Interface/build/index.html");
Interface.setIndexFile(index);

Interface.setConsumedKeyPresses("all");

//=====================================================================

Interface.bindCallback("DOMContentLoaded", function(args)
{
	// Push persisted state into the interface. Simply call this when the DOM loads in your index.html, 
});

//=====================================================================

// WebView component callback
// Only executes on init when persistent data is restored
inline function onInterfaceControl(component, value)
{
	//Init stuff, recall config.ini, push persisted state back into the interface...
};

Content.getComponent("Interface").setControlCallback(onInterfaceControl);

Your app.html while developing the interface is mostly empty anyway since you do everything in +layout.svelte and the individual components. But it does have

	<script>
		// Define a fallback for development mode
		if (typeof window.DOMContentLoaded === 'undefined') {
			window.DOMContentLoaded = function () {

			};
		}

		document.addEventListener('DOMContentLoaded', function () {
			// Call the function that will be defined in the HISE app
			DOMContentLoaded();
		});
	</script>

So you open the interface, it finishes loading and calls DOMContentLoaded, which is defined in HISE, and in HISE you simply take the value of the webview component (or wherever you're storing the state) and call a function in your interface https://docs.hise.dev/scripting/scripting-api/scriptwebview/index.html#callfunction.

In your interface, you take the object that this function receives and reset your state.

For every interaction, you're managing your Svelte state anyway. In your appState.svelte or whatever you call it, you simply define a callback which says when the state changes, it calls a function "storeToHISE" or whatever you call it, which again you define in HISE, which just receives the json and stores it in the webviewcomponent or in any other component via setValue() so that it can persist.

Chazrox

@oskarsh @aaronventure Thank You Im gonna look more into this. Let me ask one thing before I move on, is this function dependent on being connected to the internet or a file in some app data folder?

dannytaurus

@Chazrox Unless @aaronventure says otherwise, as far as I know it's all local files. Webview is a bit of a misnomer really. It's just a local HTML file.

aaronventure

@Chazrox it's just a frameless browser instance that loads a html file. When you connect to a website with a normal browser app, it loads the same bundle, it's just served by a server. Here it's shipped in your dll. Put the bundle in the Images directory and point the Webview component towards it.

The idea of Webview in general is to leverage the undoubtedly most mature frontend technology on the planet - the web platform technologies - to develop an interface for your desktop app.

The Web tech is so far ahead of the native JUCE UI stuff in terms of what it can do, how well it runs and how easy it is to work with it. As a bonus, you also get skills that directly translate elsewhere outside HISE and even audio.

Once you know this, the only missing thing will be how to point CloudFlare Pages or Github Pages to your github repo (it's like two clicks) and voila, you have a static website. Then if you learn Firebase or Supabase for example, you can ship a whole SSR web app with user accounts, database etc.

Chazrox

@dannytaurus def got my wheels turning...Thanks!

Chazrox

@aaronventure Mad potential is what Im hearing! Im definitely going to be learning this starting now. Thanks for the great breakdown!

Christoph Hart

The Web tech is so far ahead of the native JUCE UI stuff in terms of what it can do

I know my arguments are a bit tainted by the sunken cost fallacy of writing C++ GUIs for 10 years and offering a framework that builds on this tech stack, but this topic is currently creating a rift in the audio developer community and the jury hasn't decided yet. I've heard multiple complaints from developers getting into trouble with multiple instances or bugs that arise when people load in different plugins that all use a webview.

I guess the only way to find out is using it in real world projects and see if it holds up to the expectations.

you also get skills that directly translate elsewhere outside HISE and even audio.

That's maybe the biggest advantage of that approach though - not only you learn web UI development alongside the process, but the pool of people you can hire grows exponentially.

aaronventure

@Christoph-Hart said in Webview! || Whats going on here??:

I've heard multiple complaints from developers getting into trouble with multiple instances or bugs that arise when people load in different plugins that all use a webview.

Big if true, but also an issue that should then be fixed by DAW devs or JUCE devs or Webview2/Webkit devs. The potential is too insane to ignore. Though I've never seen two Webview based desktop apps interact with each other negatively, which means this could be a thing because they're within the same process/host, which might then put it into the DAW developers' court.

No doubt in some cases your users will have to be using the latest version of the DAW. That's the price. It's also a question of where HISE's Webview component is with tech, since HISE is still on JUCE 6.

Also, if your plugin has a skeumorphic interface with little or no animations or you're generally just using filmstrips, it's simpler and faster to just use HISE.

If it's not complex and you don't need performant animations, it's also faster and simpler to use HISE, and it's even possible to do a responsive design now with the changeable plugin resolution.

HISE is uniquely positioned here because of hot reloading. Actually developing a complex interface in JUCE is not super fun. Melatonin inspector helps, but man...

d.healey

@aaronventure Is there any overheard when the UI is minimized, or does it all go to sleep like the native UI?

Christoph Hart

Big if true, but also an issue that should then be fixed by DAW devs or JUCE devs or Webview2/Webkit devs.

That's true and you can expect that DAW or JUCE devs will go out of their way to fix the stuff, but if the issue is within the Webview2 layer you're basically dead in the water as you have to engage with the developer support of Apple and Microsoft and expect them to care about our little fringe use case (compared to where webview tech is used elsewhere).

aaronventure

@d-healey it gets destroyed completely, so even the memory gets cleared

Webview! || Whats going on here??

25

1.8k

12.2k

106.0k