diff --git a/clap/CMakeLists.txt b/clap/CMakeLists.txt
index 5d180f5..e0c4627 100644
--- a/clap/CMakeLists.txt
+++ b/clap/CMakeLists.txt
@@ -39,8 +39,8 @@ set(CLAP_WRAPPER_DONT_ADD_TARGETS TRUE)
 include(FetchContent)
 FetchContent_Declare(
 	clap-wrapper
-	GIT_REPOSITORY https://github.com/free-audio/clap-wrapper
-	GIT_TAG v0.12.1 # first version with WCLAP stuff
+	GIT_REPOSITORY https://github.com/geraintluff/clap-wrapper.git
+	GIT_TAG cd666f7d2291d47f810d9c8f123886026a631576
 	GIT_SHALLOW ON
 )
 FetchContent_MakeAvailable(clap-wrapper)
diff --git a/stfx/clap/stfx-clap.h b/stfx/clap/stfx-clap.h
index 85dd0c9..ae38419 100644
--- a/stfx/clap/stfx-clap.h
+++ b/stfx/clap/stfx-clap.h
@@ -9,6 +9,7 @@
 
 #include "./param-info.h"
 #include "../storage/storage.h"
+#include "../ui/web-ui.h"
 
 namespace stfx { namespace clap {
 
@@ -121,7 +122,7 @@ template<template<class> class EffectSTFX>
 struct Plugin : public clap_plugin {
 	const Plugins &plugins;
 	const clap_host *host;
-	using Effect = stfx::LibraryEffect<float, EffectSTFX>;
+	using Effect = stfx::WebUILibraryEffect<float, EffectSTFX>;
 	Effect effect;
 	
 	template<class ...Args>
@@ -182,7 +183,6 @@ struct Plugin : public clap_plugin {
 	// CLAP plugin methods
 	static bool plugin_init(const clap_plugin *obj) {
 		auto &plugin = *(Plugin *)obj;
-		LOG_EXPR(plugin.plugins.modulePath);
 		return true;
 	}
 	static void plugin_destroy(const clap_plugin *obj) {
@@ -240,6 +240,12 @@ struct Plugin : public clap_plugin {
 				state_load
 			};
 			return &ext;
+		} else if (!std::strcmp(extId, CLAP_EXT_WEBVIEW)) {
+			static struct clap_plugin_webview ext{
+				webview_provide_starting_uri,
+				webview_receive
+			};
+			return &ext;
 		}
 		return nullptr;
 	}
@@ -589,6 +595,27 @@ struct Plugin : public clap_plugin {
 		plugin.effect.state(storage);
 		return true;
 	}
+	
+	// Just include the proposed draft structs here
+	static constexpr const char *CLAP_EXT_WEBVIEW = "clap.webview/1";
+	struct clap_plugin_webview {
+		bool(CLAP_ABI *provide_starting_uri)(const clap_plugin_t *plugin, char *out_buffer, uint32_t out_buffer_capacity);
+		bool(CLAP_ABI *receive)(const clap_plugin_t *plugin, const void *buffer, uint32_t size);
+	};
+	struct clap_host_webview {
+		bool(CLAP_ABI *send)(const clap_host_t *host, const void *buffer, uint32_t size);
+	};
+	static bool webview_provide_starting_uri(const clap_plugin_t *obj, char *startingUri, uint32_t capacity) {
+		auto &plugin = *(Plugin *)obj;
+		if (!plugin.effect.webPage.size() + 1 > capacity) return false;
+		std::strcpy(startingUri, plugin.effect.webPage.c_str());
+		return true;
+	}
+	static bool webview_receive(const clap_plugin_t *obj, const void *buffer, uint32_t size) {
+		auto &plugin = *(Plugin *)obj;
+		plugin.effect.webReceive(buffer, size);
+		return true;
+	}
 };
 
 }} // namespace
diff --git a/stfx/ui/html/cbor.min.js b/stfx/ui/html/cbor.min.js
new file mode 100644
index 0000000..99ead1c
--- /dev/null
+++ b/stfx/ui/html/cbor.min.js
@@ -0,0 +1 @@
+let CBOR={encode(e,r){let o=r&&r.resizable?(r.resize(0),r):new ArrayBuffer(0,{maxByteLength:64}),f=new DataView(o),i=[o],l=CBOR.encodeTag;function y(e,r,t){var n=1+t;if(o.byteLength+n>o.maxByteLength){let e=1;for(;e<=o.maxByteLength||e<=t;)e*=2;o=new ArrayBuffer(0,{maxByteLength:e}),i.push(o),f=new DataView(o)}var a=o.byteLength;return o.resize(a+n),f.setUint8(a,e<<5|r),a+1}function s(e,r,t){var n;return r<24?y(e,r,t):r<256?(n=y(e,24,t+1),f.setUint8(n,r),n+1):r<65536?(n=y(e,25,t+2),f.setUint16(n,r),n+2):(n=y(e,26,t+4),f.setUint32(n,r),n+4)}if(!function r(t){if("number"==typeof t)Number.isInteger(t)&&t<=Number.MAX_SAFE_INTEGER&&t>=Number.MIN_SAFE_INTEGER?0<=t?t<4294967296?s(0,t,0):t<0x10000000000000000?(e=y(0,27,8),f.setBigUint64(e,BigInt(t))):(e=y(7,27,8),f.setFloat64(e,t)):-4294967296<=t?s(1,-1-t,0):-18446744073709551616n<=t?(e=y(1,27,8),f.setBigUint64(e,BigInt(-1-t))):(e=y(7,26,8),f.setFloat64(e,t)):(e=y(7,27,8),f.setFloat64(e,t));else if("bigint"==typeof t)if(0<=t)if(t<18446744073709551616n){var e=y(0,27,8);f.setBigUint64(e,t)}else{y(6,2,0);for(var n=[];t;)n.unshift(Number(0xffn&t)),t>>=8n;r(new Uint8Array(n).buffer)}else if(-18446744073709551616n<=t){e=y(1,27,8);f.setBigUint64(e,-1n-t)}else{y(6,3,0),t=-1n-t;for(var a=[];t;)a.unshift(Number(0xffn&t)),t>>=8n;r(new Uint8Array(a).buffer)}else if(!1===t)y(7,20,0);else if(!0===t)y(7,21,0);else if(null===t)y(7,22,0);else if(void 0===t)y(7,23,0);else if("string"==typeof t){var i=s(3,(e=(new TextEncoder).encode(t)).length,e.length);new Uint8Array(o).set(e,i)}else if(t instanceof ArrayBuffer)e=s(2,t.byteLength,t.byteLength),new Uint8Array(o).set(new Uint8Array(t),e);else if(t instanceof DataView){i=s(2,t.byteLength,t.byteLength);new Uint8Array(o).set(new Uint8Array(t.buffer,t.byteOffset,t.byteLength),i)}else if(Array.isArray(t))s(4,t.length,0),t.forEach(r);else{if("object"!=typeof t){for(let e=0;e<256;++e)if(t===CBOR.simple[e])return s(7,e,0);throw Error("unknown simple value")}if(l in t)return s(6,(e=t[l](t))[0],0),r(e[1]);y(5,(i=Object.keys(t)).length,0),i.forEach(e=>{r(e),r(t[e])})}}(e),1==i.length)return i[0];let t=0,n=(i.forEach(e=>t+=e.length),new ArrayBuffer(0,{maxByteLength:t})),a=new Uint8Array(n);return i.forEach(e=>{var r=n.byteLength;n.resize(r+e.byteLength),a.set(new Uint8Array(e),r)}),n},decode(s){let o=CBOR.decodeTags,u=0,c=(ArrayBuffer.isView(s)&&(u=s.byteOffset,s=s.buffer),s.byteLength),g=(s=new DataView(s),CBOR.breakCode);function h(e,r,t){switch(e){case 0:return r;case 1:return-1-r;case 2:var n=t?new Uint8Array(s.buffer,u,r):s.buffer.slice(u,u+r);return u+=r,n;case 3:n=new Uint8Array(s.buffer,u,r);return u+=r,(new TextDecoder).decode(n);case 4:var a=[];for(let e=0;e<r;++e)a.push(A());return a;case 5:var i=Object.create(null);for(let e=0;e<r;++e)i[A()]=A();return i;case 6:return o[r]?o[r](A(!0)):A();case 7:if(256<=r)throw Error("invalid simple value");return CBOR.simple[r]}}function A(e=!1){if(u>=c)throw Error("end of CBOR");var r=s.getUint8(u++),t=r>>5,n=31&r;switch(n){case 24:return h(t,s.getUint8(u++),e);case 25:return 7==t?(a=s.getFloat16(u),u+=2,a):(a=s.getUint16(u),u+=2,h(t,a,e));case 26:return 7==t?(a=s.getFloat32(u),u+=4,a):(a=s.getUint32(u),u+=4,h(t,a,e));case 27:if(7==t)return a=s.getFloat64(u),u+=4,a;var a=s.getBigUint64(u);if(u+=4,a<Number.MAX_SAFE_INTEGER)return h(t,Number(a),e);var i=a;switch(t){case 0:return i;case 1:return-1n-i;default:throw Error("unsupported type for 8-byte length")}return;case 28:case 29:case 30:throw Error("invalid additional CBOR code");case 31:var o=e;switch(t){case 2:{var f=[];let e=0,r=A(!0);for(;r!=g;){if(!(r instanceof Uint8Array))throw Error("indefinite bytes with non-byte item");f.push(r),e+=r.length,r=A(!0)}let t=new Uint8Array(e),n=0;return f.forEach(e=>{t.set(e,n),n+=e.length}),o?t:t.buffer}case 3:{let e="",r=A();for(;r!=g;){if("string"!=typeof r)throw Error("indefinite string with non-string item");e+=r,r=A()}return e}case 4:{var l=[];let e=A();for(;e!=g;)l.push(e),e=A();return l}case 5:{var y=Object.create(null);let e=A();for(;e!=g;)y[e]=A(),e=A();return y}case 7:return g;default:throw Error("invalid indefinite type")}return;default:return h(t,n,e)}}return A()},simple:[],encodeTag:Symbol(),decodeTags:{0:e=>new Date(e),1:e=>new Date(1e3*e),2:r=>{let t=0n;for(let e=0;e<r.length;++e)t=256n*t+BigInt(r[e]);return t},3:r=>{let t=0n;for(let e=0;e<r.length;++e)t=256n*t+BigInt(r[e]);return-1n-t},32:e=>new URL(e),258:e=>new Set(e)},encode16(e,r){var t=new Uint8Array(CBOR.encode(e,r));let n="";for(let e=0;e<t.length;++e)n+=(t[e]>>4).toString(16)+(15&t[e]).toString(16);return n},encode64(e,r){var t=new Uint8Array(CBOR.encode(e,r));let n="";for(let e=0;e<t.length;++e)n+=String.fromCharCode(t[e]);return btoa(n)},decode64(e){var r=atob(e),t=new Uint8Array(r.length);for(let e=0;e<t.length;++e)t[e]=r.charCodeAt(e);return CBOR.decode(t)},decode16(r){var t=new Uint8Array(r.length/2);for(let e=0;e<t.length;++e)t[e]=parseInt(r.substr(2*e,2),16);return CBOR.decode(t)}};for(let e=0;e<256;++e)CBOR.simple[e]=Symbol("CBOR "+e);CBOR.simple[20]=!1,CBOR.simple[21]=!0,CBOR.simple[22]=null,CBOR.simple[23]=void 0,((e,l)=>{function r(e){return new DataView(e.buffer,e.byteOffset,e.byteLength)}Date.prototype[e]=e=>[1,+e/1e3],URL.prototype[e]=e=>[32,e.href],Set.prototype[e]=e=>[258,Array.from(e)];var t="function"==typeof Float16Array;Uint8Array.prototype[e]=e=>[64,r(e)],Int8Array.prototype[e]=e=>[72,r(e)],Uint16Array.prototype[e]=e=>[l?65:69,r(e)],Int16Array.prototype[e]=e=>[l?73:77,r(e)],Uint32Array.prototype[e]=e=>[l?66:70,r(e)],Int32Array.prototype[e]=e=>[l?74:78,r(e)],BigUint64Array.prototype[e]=e=>[l?67:71,r(e)],BigInt64Array.prototype[e]=e=>[l?75:79,r(e)],t&&(Float16Array.prototype[e]=e=>[l?80:84,r(e)]),Float32Array.prototype[e]=e=>[l?81:85,r(e)],Float64Array.prototype[e]=e=>[l?82:86,r(e)];e=(r,o)=>{const f=r.BYTES_PER_ELEMENT;return e=>{if((e.byteOffset%f||o!=l)&&(e=e.slice()),o!=l){var t=e,n=f;for(let r=0;r<t.length;r+=n)for(let e=0;e<n/2;++e){var a=n-1-e,i=t[r+e];t[r+e]=t[r+a],t[r+a]=i}}return new r(e.buffer,e.byteOffset,e.length/f)}};Object.assign(CBOR.decodeTags,{64:e=>e,65:e(Uint16Array,!0),66:e(Uint32Array,!0),67:e(BigUint64Array,!0),69:e(Uint16Array,!1),70:e(Uint32Array,!1),71:e(BigUint64Array,!1),72:e=>new Int8Array(e.buffer,e.byteOffset,e.length),73:e(Int16Array,!0),74:e(Int32Array,!0),75:e(BigInt64Array,!0),77:e(Int16Array,!1),78:e(Int32Array,!1),79:e(BigInt64Array,!1),80:t&&e(Float16Array,!0),81:e(Float32Array,!0),82:e(Float64Array,!0),84:t&&e(Float16Array,!1),85:e(Float32Array,!1),86:e(Float64Array,!1)})})(CBOR.encodeTag,!!new Uint8Array(new Uint16Array([256]).buffer)[0]),"object"==typeof module&&module?.exports&&(module.exports=CBOR);
diff --git a/stfx/ui/html/generic.html b/stfx/ui/html/generic.html
new file mode 100644
index 0000000..21cf1a9
--- /dev/null
+++ b/stfx/ui/html/generic.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Generic STFX UI</title>
+		<style>
+			body {
+				width: 100vw;
+				height: 100vh;
+				overflow: hidden;
+				
+				background: linear-gradient(#FFF, #EEE, #CCC);
+  				color: #000;
+  				
+  				font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, system-ui, sans-serif;
+			}
+			output {
+				font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+				font-weight: normal;
+			}
+		</style>
+	</head>
+	<body>
+		{=}
+		<h1>{name}</h1>
+		<script src="cbor.min.js"></script>
+		<script src="matsui-bundle.min.js"></script>
+		<script>
+			addEventListener('message', e => {
+				let state = window.state = Matsui.replace(document.body, CBOR.decode(e.data));
+				state.trackMerges(merge => {
+					window.parent.postMessage(CBOR.encode(merge), '*');
+				}, true/*async*/, false/*include direct merges*/);
+
+				addEventListener('message', e => {
+					state.merge(CBOR.decode(e.data));
+				});
+			}, {once: true});
+			
+			//*
+			window.dispatchEvent(new MessageEvent('message', {
+				data: CBOR.encode({name: "Hello 😀"})
+			}));//*/
+			window.parent.postMessage(CBOR.encode("ready"), '*');
+		</script>
+	</body>
+</html>
diff --git a/stfx/ui/html/matsui-bundle.min.js b/stfx/ui/html/matsui-bundle.min.js
new file mode 100644
index 0000000..f1ec192
--- /dev/null
+++ b/stfx/ui/html/matsui-bundle.min.js
@@ -0,0 +1,2 @@
+"use strict";self.Matsui=(e=>{var t;Object.hasOwn||(Object.hasOwn=(e,t)=>Object.prototype.hasOwnProperty.call(e,t));let o=e=>e,p=e=>e&&"object"==typeof e,h=()=>document.createTextNode("");function n(e,t){for(;e.nextSibling&&e.nextSibling!=t;)e.nextSibling.remove()}function u(){var e=document.createDocumentFragment();let t=h(),r=h();return e.append(t,r),{t:e,o:(...e)=>{n(t,r),t.after(...e)}}}let f=Symbol();function c(t){if(p(t)){let e=t[f];for(;e&&e!=t;)e=(t=e)[f]}return t}let i=[],l=null;function a(){for(clearTimeout(l),l=null;i.length;)i.shift()()}function s(t,...r){i.push(e=>t(...r)),null==l&&(requestAnimationFrame(a),l=setTimeout(a,0))}let d=Symbol(),v=Symbol(),m=Symbol("no change"),y=Symbol("replace"),g={apply(r,n,o){return p(n)?p(r)?Array.isArray(n)?n:(n[y]&&(o?r[y]=!0:delete n[y]),Object.keys(n).forEach(e=>{var t=n[e];Object.hasOwn(r,e)?null!=t||o?r[e]=g.apply(r[e],t,o):delete r[e]:null==t&&!o||(r[e]=t)}),r):(o&&(n[y]=!0),n):n},make(n,o,e){if(!e||n!==o){if(!p(o))return o;if(!p(n))return o[y]=!0,o;if(Array.isArray(o))return o;let r={};return Object.keys(o).forEach(e=>{var t;Object.hasOwn(n,e)?void 0!==(t=g.make(n[e],o[e],!0))&&(r[e]=t):r[e]=o[e]}),Object.keys(n).forEach(e=>{Object.hasOwn(o,e)||(r[e]=null)}),e&&0==Object.keys(r).length?void 0:r}},tracked(e,t,r,...n){if(!p(e))return e;let o=m,i=m,l=()=>{var e;i!=m&&(e=i,i=m,r(e))},u=e=>{r&&(i==m?(i=o,s(l)):i=g.apply(i,o,!0))},a=(n.length&&u(n[0]),(e,o)=>new Proxy(e,{get(e,t){var r=e[t];return t==f?e:p(r)?a(r,e=>o({[t]:e})):r},set(e,t,r,n){if(null==r)return delete n[t];if((r=c(r))===e[t])return!0;if(n=g.make(e[t],r),p(n))n[y]=!0;else if(r===e[t])return!0;return!!Reflect.set(e,t,r)&&(o({[t]:n}),!0)},deleteProperty(e,t){return!(t in e)||delete e[t]&&(o({[t]:null}),!0)}}));return a(e,e=>{o=o!=m?g.apply(o,e,!0):(o=e,t&&t(e),u(),m)})},addNoChange(e){return g.addHidden(e,m)},addHidden(e,n){return p(e)?new Proxy(e,{get(e,t){var r;return t==d?n:t==v||t==f?e:(e=e[t],r=p(n)&&t in n,g.addHidden(e,r?n[t]:m))},has(e,t){return t==d||t in e}}):e},hasHidden(e){return d in e},none:m,getHidden(e,r){var t;return p(e)?void 0!==(t=c(e[d]))?t===m?void 0===r?m:r:t:new Proxy(e,{get(e,t){return null==(e=e[t])?null:g.getHidden(e,r)},has(e,t){return!0}}):e},withoutHidden(e){return p(e)&&e[v]||e}},w=Symbol("accessed"),b=Symbol(),E=Symbol("list-keys"),O={tracked(e,n){if(!p(e))return n[w]=!0,e;let o=Array.isArray(e);return new Proxy(e,{get(e,t){var r=e[t];return t==f||t==b?e:t==w?(n[w]=w,e):o&&"length"===t?(n[E]=E,r):("function"!=typeof r||r.prototype||(n[w]=w),t in n||(n[t]={}),O.tracked(r,n[t]))},ownKeys(e){return n[E]=E,Reflect.ownKeys(e)}})},pierce(e,t){return e&&e[t?b:w]||e},flags:{listKeys:E,pierced:w},forMerge:function e(t,r,n){if(r!=m){if(t[w])return!0;if(!p(r)||Array.isArray(r)||r[y])return!0;if(t[E]){if(!n)return!0;for(var o in r)if(o=r[o],!p(o)||Array.isArray(o)||o[y])return!0}for(var i in r)if(t[i]&&e(t[i],r[i],n))return!0}return!1}},$=Symbol(),j=(n,...r)=>{for(let e=0;e<n.length;++e)n[e][$]&&(n.splice(e,1,...n[e][$]),--e);if(r.length){let e=j(n);n=[(...t)=>e(...r.map(e=>e(...t)),...t.slice(r.length))]}Object.freeze(n);let o=!0,u=[],a=[];var e=(...i)=>{for(let e=0;e<i.length;++e)i[e]=O.pierce(i[e]);var e=i.map(e=>g.withoutHidden(e));let l=i.map(e=>c(e)),t=o||l.length!=a.length;if(!t)for(let e=0;e<l.length;++e)if(a[e]!==l[e]){t=!0;break}if(t){a=l;let r=o?e:i;o=!1,n.forEach((e,t)=>{e(...(u[t]=l.map(e=>({}))).map((e,t)=>O.tracked(r[t],e)))})}else{let o=i.map(e=>p(e)?g.getHidden(e,m):m);n.forEach((t,r)=>{for(let e=0;e<i.length;++e){var n=u[r][e];if(O.forMerge(n,o[e],!0))return void t(...(u[r]=l.map(e=>({}))).map((e,t)=>O.tracked(i[t],e)))}})}};return e[$]=n,e};function k(e){let r=0;if(!(e=(e="="==e?"$0":e).replace(/^\$[0-9]+($|\.)/,e=>(r=parseInt(e.substr(1),10),""))).length)return(...e)=>e[r];let n=e.split(".");if(1!=n.length)return(...e)=>{let t=e[r];return n.forEach(e=>{t=t?.[e]}),t};{let t=n[0];return(...e)=>e[r]?.[t]}}let A=/\$\{/g;function I(n,o){let i=0;for(var l,u=[];l=A.exec(n);){u.push(n.slice(i,l.index));let e=l.index+2,t=e+1,r;for(;t<n.length;){if("}"==n[t]){var a=n.slice(e,t);try{r=null,new Function("return "+a);break}catch(e){r=e}}++t}if(r)return console.error(r),u.push(`{${r.message}}`),u.join("");u.push(o(n.slice(e,t))),A.lastIndex=i=t+1}return u.push(n.slice(i)),u.join("")}function _(e,t){let n=e.split(R);for(let e=1;e<n.length;e+=2){var o=n[e];let r=o.slice(1,-1);if("{"==o[0])if(t){let t=r.split(",").map(k);1==t.length&&(t=t[0]),n[e]=e=>t}else n[e]=e=>k(r);else n[e]=e=>e[r]}return t=>{let e=n.map(e=>"function"==typeof e?e(t):e).filter(e=>""!=e);return 1==e.length?e[0]:e.some(e=>"function"==typeof e)?(...t)=>e.map(e=>"function"==typeof e?e(...t):e).join(""):e.join("")}}function D(e){if(/^template$/i.test(e.tagName))return 1;for(var t of e.attributes||[])if("@"==t.name[0])return 1}function S(e){return/^script$/i.test(e.tagName)}function L(e){return e.slice(1).toLowerCase().replace(/-+(.)/g,(e,t)=>t.toUpperCase())}let R=/(\{[a-z0-9_=\.,\$-]+\}|\uF74A[0-9]+\uF74B)/giu,H=/((\$[a-z0-9_-]+)*)(\{([a-z0-9_=\.,\$-]+)\}|\uF74A([0-9]+)\uF74B)/giu,M=Symbol();function T(e){let c=e.content||e,s=[],d={},p=!1,v=(Array.from(c.childNodes).forEach(t=>{if("TEMPLATE"==t.tagName){var r=t.getAttribute("name");if(r){p=!0;let e=e=>null;t.hasAttribute("$filter")&&(e=_(t.getAttribute("$filter"))),d[r]={i:T(t),l:t[M],u:e},t.remove()}}}),function r(e,l){if(3==e.nodeType){var u=l,a=e.nodeValue;let n,o=0;for(;n=H.exec(a);){let i=a.slice(o,n.index),l=(o=H.lastIndex,n[1].split("$").slice(1)),e=n[4],t=n[5],r=null;e&&(r=e.split(",").map(k)),s.push((n,e)=>{let o=r||[].concat(e[t]);return"function"==typeof o[0]&&l.some(e=>"template"===e)&&(n=n.extend()).add("template",o.shift()),o.forEach((t,e)=>{"function"!=typeof t&&(o[e]=e=>t)}),{p:u,v:(e,t,r)=>{i&&e.before(i),r=function(n,e,o){let i=e.map(e=>{var t=n.named[e];if(t)return t;let r="Template not found: "+e;return console.error(r),e=>({node:document.createTextNode(r),updates:[]})});return function t(r){if(r>=e.length)return o;let n=i[r];return e=>n(t(r+1))}(0)(n.dynamic)}(n,l,r),e.before(r.node),t.push(j(r.updates,...o))}}})}if(0<o){let t=a.slice(o),r=t?e=>e.nodeValue=t:e=>e.remove();s.push(e=>({p:u,v:r}))}}else if(1===e.nodeType){if(D(e)&&l.length){if("TEMPLATE"==e.tagName&&e.hasAttribute("name"))throw Error('<template name=""> can only be immediate child');let o=e[M],i=T(e);return s.push((e,t)=>{var r={};t[o](r);let n=i(e,r);return{p:l,v:(e,t,r)=>{r=n(r),e.replaceWith(r.node),t.push(j(r.updates))}}}),e.replaceWith(h())}if(S(e))return;for(var t of Array.from(e.attributes))!function(e,r,n){if("$"==r.name[0]){e.removeAttribute(r.name);let p="-"==r.name[1],v=p?r.name.slice(2):L(r.name),t=_(r.value);s.push((c,e)=>{let s=t(e),d="function"==typeof s;return{p:n,v:(r,e,t)=>{let n=[];var o,i,l,u;let a=d?(...e)=>s(...e,...n):s,f;f=p?e=>{var t=d?a():s;null==t?r.removeAttribute(v):r.setAttribute(v,t)}:v in c.attributes?c.attributes[v](r,a,e=>n[e||0]):(o=d?a:()=>s,i=r,l=v,u=o,"on"+l in i?void i.addEventListener(l,u):l in i?e=>{var t=u();try{i[l]=t}catch(e){null==t?i.removeAttribute(l):i.setAttribute(l,t)}}:e=>{var t=u();null==t&&i.hasAttribute(l)?i.removeAttribute(l):i.getAttribute(l)!=t&&i.setAttribute(l,t)}),e.push((...t)=>{n=t,f&&f(...t);for(let e=0;e<t.length;++e)n[e]=g.withoutHidden(O.pierce(t[e],!0))})}}})}}(e,t,l)}(e.childNodes||[]).forEach((e,t)=>{r(e,l.concat(t))})}(c,[]),{}),m=!1;for(var t of e.attributes||[]){var r;"@"==t.name[0]&&(m=!0,r=L(t.name),v[r]=_(t.value,!0))}return(t,r)=>{var e,n=t;if(p||m)for(var o in t=t.extend(),d){var i=d[o],l=i.l;let e={};l?r[l](e):e=r,l=i.u(e),i=i.i(t,e),t.add(o,i,l)}let u=s.map(e=>e(t,r)),a=r=>{let n=c,o=(c=c.cloneNode(!0),[]),i=u.map(e=>{let t=n;return e.p.forEach(e=>t=t.childNodes[e]),t});return u.forEach((e,t)=>{e.v(i[t],o,r)}),{node:n,updates:o}};for(e in v){var f=t.transforms[e];if(!f)throw Error("Unknown transform: "+e);a=f(a,v[e](r),n,t)}return a}}let P=Symbol(),B=new WeakMap,J=/\uF74A!?[0-9]+\uF74B/gu,C=/^\uF74A![0-9]+\uF74B$/gu,x=new class z{attributes={};transforms={};named={};constructor(e){this.#m=e,this.attributes=Object.create(e?e.attributes:null),this.transforms=Object.create(e?e.transforms:null),this.named=Object.create(e?e.named:null),this.dynamic=n=>{let o=u(),i,l;return{node:o.t,updates:[(...e)=>{if(i&&i(...e))return l(...e);var t=this.getForData(...e),r=t.bind(n||this.dynamic);l=j(r.updates),i=t.filter,o.o(r.node),l(...e)}]}}}#m;#h=[];extend(){return new z(this)}add(e,t,r){if("function"!=typeof(t="function"!=typeof t?t&&t.dynamic:t))throw Error("Template not a function");return e&&(this.named[e]=t),r&&this.#h.unshift({u:r,v:t}),this}addElement(e,t,r){return this.add(e,this.fromElement(t),r)}addAll(e){return(e="string"==typeof(e=e||"template")?document.querySelectorAll(e):e).forEach(e=>{var t=e.id||e.getAttribute("name");let r=null;e.hasAttribute("$filter")&&(r=_(e.getAttribute("$filter"))(null)),"TEMPLATE"===e.tagName&&t&&this.addElement(t,e,r)}),this}addTag(r,n){return(e,...t)=>{e=this.fromTag(e,...t),this.add(r,e,n)}}getForData(...t){for(let e=0;e<this.#h.length;++e){var r=this.#h[e];if(r.u(...t))return{bind:r.v,filter:r.u}}if(this.#m)return this.#m.getForData(...t);throw Error("No template for data")}fromElement(e){if("string"==typeof e){if(!(o=document.querySelector(e)))throw Error("Invalid element:"+e);e=o}if(!e[P]){let u=0,a=e=>"\uf74a"+(e?"!":"")+ ++u+"\uf74b",f="__matsui_template",c={},s=[];var t,o;!function t(r,e){function n(e){var t=a();return c[t]=f+`[${u}]=(${e});`,t}if(3===r.nodeType){var o=u,i=I(r.nodeValue,n);u>o&&(r.nodeValue=i)}else if(1===r.nodeType)if(S(r))11==r.getRootNode().nodeType&&(o=a(!0),c[o]=r.textContent,r.textContent=o,s.push(r));else if(i=e=>{for(var t of r.attributes)"$"!=t.name[0]&&"@"!=t.name[0]||(t.value=I(t.value,n))},D(r)&&!e){var o=a(!0),e=++u+"",l=a(!0);r[M]=e,r.before(document.createTextNode(o)),c[o]=f+`[${e}]=${f}=>{`,i(),t(r.content||r,!0),r.after(document.createTextNode(l)),c[l]="};"}else{i();let e=r.firstChild;for(;e;)t(e),e=e.nextSibling}else{let e=r.firstChild;for(;e;)t(e),e=e.nextSibling}}(o=e.content||e,!0);let r=e=>e,n=(Object.keys(c).length&&(t="/*"+e.outerHTML.replace(/\*\//g,"* /").replace(J,e=>`*/${c[e]}/*`)+"*/",r=new Function(f,t)),s.forEach(e=>e.remove()),function t(r){var e=S(r)?r.textContent:r.nodeValue;if(C.test(e))r.remove();else{let e=r.firstChild;for(;e;){var n=e.nextSibling;t(e),e=n}/^template$/i.test(r.tagName)&&r.content&&t(r.content)}}(o),T(e));e[P]=e=>{var t={};return r(t),n(e,t)}}return e[P](this)}fromTag(t,...r){let e=B.get(t);if(!e){var n=[t[0]];for(let e=0;e<r.length;++e)n.push("\uf74a"+e+"\uf74b"),n.push(t[e+1]);var o=document.createElement("template");o.innerHTML=n.join(""),e=T(o),B.set(t,e)}var i={};for(let e=0;e<r.length;++e)i[e]=r[e];return e(this,i)}},F=(x.add("json",e=>{let t=h();return{node:t,updates:[e=>{t.nodeValue=JSON.stringify(e)}]}},e=>!0),x.add("text",e=>{let t=h();return{node:t,updates:[e=>{t.nodeValue=null==e?"":e}]}},e=>!p(e)),x.add("list",u=>{var e=document.createDocumentFragment();let a=[h()];e.appendChild(a[0]);let f,c,s=()=>{var e=a[a.length-2],t=a.pop();n(e,t),t.remove()},d=()=>{for(;1<a.length;)s();f=null,c=null};return{node:e,updates:[(r,...n)=>{r=O.pierce(r);let o=g.getHidden(r,m);if(o!==m)if(p(r)){if(Array.isArray(r))f&&!c||(d(),f=[]);else{var t=Object.keys(r);if(r=t.map(e=>r[e]),f&&c){let e=0;for(;e<c.length&&t[e]==c[e];)++e;for(;f.length>e;)s(),f.pop()}else d(),f=[];c=t}for(;f.length>r.length;)s(),f.pop();for(f.forEach((e,t)=>{(c?c[t]:t)in o&&e(r[t],...n)});f.length<r.length;){var e=f.length,i=u(u),l=void 0,l=(l=h(),a[a.length-1].after(l),a.push(l),l.before(i.node),j(i.updates));f.push(l),l(r[e],...n)}}else d()}]}}),x.transforms.data=(t,r,e)=>{if(""==r&&(r=o),(r=[].concat(r)).some(e=>"function"!=typeof e))throw Error("needs data-function argument(s)");return e=>((e=t(e)).updates=[j(e.updates,...r)],e)},x.transforms.foreach=(r,e,t)=>{let n=t.named.list;return x.transforms.data(t=>n(e=>r(t)),e,t)},x.transforms.keyValue=(n,i,e)=>{""==i&&(i=o),i=[].concat(i);let l=e.named.list;return e=>{let o=Object.create(null);var t=e,e=l(e=>n(t)),r=[(r,...e)=>{r=i[0](r,...e);let n=o;return o=Object.create(null),Array.isArray(r)?r.map((e,t)=>((t=o[t]=n[t]||{key:t}).value=e,g.addHidden(t,{value:g.getHidden(e)}))):"object"==typeof r?Object.keys(r).sort().map(e=>{var t=o[e]=n[e]||{key:e};return t.value=r[e],g.addHidden(t,{value:g.getHidden(t.value)})}):[{key:null,value:r}]}].concat(i.slice(1));return e.updates=[j(e.updates,...r)],e}},Symbol());function r(){let e=[];return{g:e,O:(...t)=>e.forEach(e=>e(...t))}}function N(n){let o=r(),i=r(),l=r(),u,a=(this.trackMerges=(e,t,r)=>((t?i:l).g.push(e),r&&o.g.push(e),this),this.trackData=(e,t,r)=>{let n=j([].concat(e));return this.trackMerges(e=>{e=g.addHidden(u,e),n(e)},t,r),n(u),this},Object.defineProperty(this,"data",{get(){return u},set(e){var t=g.make(n,e);p(t)&&(t[y]=!0),n=e,o.O(t),u=g.tracked(n,i.O,l.O,t)}}),this.data=n,this.merge=(e,t)=>{var r=g.apply(n,e);r!==n&&(n=r,p(e))&&(e[y]=!0),(t?i:o).O(e),u=g.tracked(n,i.O,l.O,e)},(e,t,r,n)=>{if(!(e="string"==typeof e?document.querySelector(e):e))throw Error("invalid host");"string"==typeof t&&(t=(t=document.querySelector(t))&&x.fromElement(t)),r||"function"==typeof t||(r=t,t=null),r=r||x,t=(t=t||r.fromElement(e))(r.dynamic),this.trackData(t.updates,!1,!0),r=t.node,n?e!==r&&e.replaceWith(r):e.append(r)});this.addTo=(e,t,r)=>(a(e,t,r,!1),this),this.replace=(e,t,r)=>(a(e,t,r,!0),this)}x.transforms.if=(i,l,e)=>(""==l&&(l=o),e[F]=l,r=>{let n=u(),o=null;return{node:n.t,updates:[(...e)=>{var t;l(...e)?(o||(t=i(r),n.o(t.node),o=j(t.updates)))(...e):o&&(n.o(),o=null)}]}}),x.transforms.else=(e,t,r)=>{let n=r[F];if(n)return e=x.transforms.if(e,e=>!n(e),r),delete r[F],e;throw Error("@else must follow @if")},t=new N([]);let U={merge:g,access:O,combineUpdates:j,getRaw:c,global:x,errors:t,Wrapped:N,wrap(e,t){return new N(e)},addTo(e,t,r){return U.wrap(t).addTo(e,r)},replace(e,t,r){return U.wrap(t).replace(e,r)}};return e&&s(e.bind(self),Matsui=U),U})("function"==typeof Matsui?Matsui:self.Matsui),Matsui.interaction=(e=>{e.class=(r,n)=>{let o="";return e=>{var t=n();t!=o&&((o+"").split(/\s+/g).forEach(e=>{e&&r.classList.remove(e)}),(t+"").split(/\s+/g).forEach(e=>{e&&r.classList.add(e)}),o=t)}};var t=document.createElement("style");function a(e,t){return(t.ctrlKey||t.shiftKey)&&(e*=.1),t.metaKey||t.altKey?0<e?1/0:e<0?-1/0:0:e}function f(e){return!e.ctrlKey&&0==e.button}function c(t,r,n){t.hasAttribute("tabindex")||t.setAttribute("tabindex",0),t.addEventListener("keydown",e=>{r[e.key]&&(t.focus(),e.preventDefault(),e.stopPropagation(),r[e.key](e))}),n&&t.addEventListener("keyup",e=>{n[e.key]&&(e.preventDefault(),e.stopPropagation(),n[e.key](e))})}t.textContent=".interaction-implicit-focus :focus {outline: none;}",document.head.appendChild(t),window.addEventListener("pointerdown",e=>{document.body.classList.add("interaction-implicit-focus")},{capture:!0}),window.addEventListener("keydown",e=>{"Tab"==e.code&&document.body.classList.remove("interaction-implicit-focus")},{capture:!0}),window.addEventListener("keydown",e=>{"Escape"==e.code&&(document.body.classList.contains("interaction-implicit-focus")?e.target.blur():document.body.classList.add("interaction-implicit-focus"))}),e.value=(r,n,o)=>{let i="INPUT"==r.tagName&&"checkbox"==r.type,l="INPUT"==r.tagName&&("range"==r.type||"number"==r.type);if("string"!=typeof n)return e=>{r.value=n()};{let e=(n=n.split(".")).pop();function t(){let t=o();n.forEach(e=>t=t?.[e]),t&&(t[e]=i?r.checked:l?parseFloat(r.value):r.value)}return r.addEventListener("input",t),r.addEventListener("change",t),t=>{n.forEach(e=>t=t?.[e]),t&&(r.value=t[e],i)&&(r.checked=t[e])}}};let s=e.moveKeys=(r,n)=>{let t=(e,t)=>n({x:e,y:t,node:r});c(r,{ArrowDown:e=>t(0,a(1,e)),ArrowUp:e=>t(0,a(-1,e)),ArrowLeft:e=>t(a(-1,e),0),ArrowRight:e=>t(a(1,e),0),PageDown:e=>t(0,1/0),PageUp:e=>t(0,-1/0),Home:e=>t(-1/0,0),End:e=>n(1/0,0)})};return e.pointerLock=(e,t)=>{e._interactionPointerLock="function"==typeof t?t():""==t||t},e.move=(n,o)=>{n.classList.add("interaction-has-move"),n.style.touchAction="none",n.style.cursor=n.style.cursor||"grab";let t="grab",i,l;function r(e){e.preventDefault(),e.stopPropagation();let t=e.pageX-i,r=e.pageY-l;document.pointerLockElement==n&&(t=e.movementX,r=e.movementY),i=e.pageX,l=e.pageY,o({x:a(t,e),y:a(r,e),node:n})}let u=0;function e(e){n.classList.remove("interaction-move"),e.preventDefault(),e.stopPropagation(),document.pointerLockElement==n&&document.exitPointerLock(),e.pointerId&&n.releasePointerCapture(e.pointerId),--u<=0&&(u=0,n.removeEventListener("pointermove",r)),n.style.pointer=t}n.addEventListener("pointerdown",e=>{n.classList.add("interaction-move"),f(e)&&(e.preventDefault(),e.stopPropagation(),n.focus(),i=e.pageX,l=e.pageY,n.setPointerCapture(e.pointerId),n._interactionPointerLock&&n.requestPointerLock(),1==++u&&n.addEventListener("pointermove",r),t=n.style.pointer)}),n.addEventListener("pointerup",e),n.addEventListener("pointercancel",e),n.addEventListener("blur",e),s(n,e=>o({x:15*e.x,y:15*e.y,node:e.node}))},e.scroll=(e,t)=>{e.classList.add("interaction-has-scroll"),e.addEventListener("wheel",e=>{e.preventDefault(),e.stopPropagation(),focus(),t({x:a(e.deltaX,e),y:a(e.deltaY,e)})},{capture:!0})},e.press=(n,o)=>{n.classList.add("interaction-has-press");let i=0,l=0,u=!1,t=e=>{var t=Date.now(),r=t-l;l=t,300<r&&(i=0),n.classList.add("interaction-press"),u||o({count:++i,event:e,node:n}),u=!0,e.pointerId&&n.setPointerCapture(e.pointerId)};var e=e=>{e.preventDefault(),e.stopPropagation(),n.classList.remove("interaction-press"),u=!1,e.pointerId&&n.releasePointerCapture(e.pointerId)};c(n,{Enter:t," ":t},{Enter:e," ":e}),n.addEventListener("blur",e),n.addEventListener("pointerdown",e=>{f(e)&&(e.preventDefault(),e.stopPropagation(),n.focus(),t(e))}),n.addEventListener("pointerup",e),n.addEventListener("pointercancel",e)},e.unpress=(t,r)=>{t.classList.add("interaction-has-unpress");let n=null,o=e=>{n=Date.now(),e.preventDefault(),e.stopPropagation(),e.pointerId&&t.setPointerCapture(e.pointerId)};var e=e=>{e.preventDefault(),e.stopPropagation(),null!=n&&r({duration:.001*(Date.now()-n),event:e,node:t}),n=null,e.pointerId&&t.releasePointerCapture(e.pointerId)};c(t,{Enter:o},{Enter:e}),t.addEventListener("blur",e),t.addEventListener("pointerdown",e=>{f(e)&&(t.focus(),o(e))}),t.addEventListener("pointerup",e)},e.click=(n,o)=>{let i=0,l=0;n.addEventListener("click",e=>{var t=Date.now(),r=t-l;l=t,300<r&&(i=0),o({count:++i,event:e,node:n})})},e.delete=(e,t)=>{e.addEventListener("keydown",e=>{"Delete"!=e.code&&"Backspace"!=e.code||(e.preventDefault(),e.stopPropagation(),t())})},e.cancel=(e,t)=>{e.addEventListener("keydown",e=>{"Escape"==e.code&&(e.preventDefault(),e.stopPropagation(),t())})},e.done=(t,r)=>{let n="INPUT"!=t.tagName;n||t.hasAttribute("enterkeyhint")||t.setAttribute("enterkeyhint","done"),t.addEventListener("keydown",e=>{"Enter"!=e.key||n&&!e.metaKey&&!e.shiftKey||(e.preventDefault(),e.stopPropagation(),r(t.value,e))})},e.clipboard=(r,n)=>(r.classList.add("interaction-has-clipboard"),e.press(r,e=>{var t=n?"function"==typeof n?n(r):n:r.textContent;navigator.clipboard.writeText(t),r.classList.remove("interaction-clipboard"),r.classList.add("interaction-clipboard"),setTimeout(()=>{r.classList.remove("interaction-clipboard")},1e3)})),e.dropFileIf=(e,t)=>{e._interactionDropIfHandler=t},e.dropFile=(r,n)=>{r.classList.add("interaction-has-drop"),""==n&&(n=e=>{let t=r.parentNode;for(;t;){if(t._interactionDropHandler)return void t._interactionDropHandler(e);t=t.parentNode}}),r._interactionDropHandler=n;let o=r._interactionDropIfHandler||(e=>!0);function i(e){let t=[];return e.dataTransfer.items?[...e.dataTransfer.items].forEach(e=>{"file"===e.kind&&t.push(e.getAsFile())}):t=[...e.dataTransfer.files],t.length&&t}let l=null;r.addEventListener("dragenter",e=>{l=e.target;var t=i(e);t&&o(t,e)&&(r.classList.add("interaction-drop"),e.preventDefault(),e.stopPropagation())}),r.addEventListener("dragleave",e=>{e.target===l&&r.classList.remove("interaction-drop")}),r.addEventListener("dragover",e=>{e.preventDefault();var t=i(e);t&&o(t,e)||r.classList.remove("interaction-drop")}),r.addEventListener("drop",e=>{var t=i(e);r.classList.remove("interaction-drop"),document.querySelectorAll(".interaction-drop").forEach(e=>{e.classList.remove("interaction-drop")}),t&&o(t,e)&&(e.preventDefault(),e.stopPropagation(),n(t))}),"INPUT"==r.tagName&&"file"==r.type&&r.addEventListener("change",e=>{e.preventDefault();var t=[].slice.call(r.files,0);t.length&&t&&o(t,e)&&n(t)})},e.dialogWhen=(r,n)=>{if("DIALOG"!==r.tagName)throw Error("only use $dialog-when on <dialog>");function e(){r._interactionHasDialogClose||console.error("<dialog> closed with no $dialog-close to align the state")}return r.addEventListener("close",e),r.addEventListener("cancel",e),r.addEventListener("click",e=>{var t=(t=r.getBoundingClientRect()).top<=event.clientY&&event.clientY<=t.bottom&&t.left<=event.clientX&&event.clientX<=t.right;e.target!==r||t||r.close()},{capture:!0}),e=>{var t="function"==typeof n?n():n;t&&!r.open?r.showModal():!t&&r.open&&r.close()}},e.dialogClose=(e,t)=>{e._interactionHasDialogClose=!0,e.addEventListener("close",t),e.addEventListener("cancel",t)},{keys:c}})(Matsui.global.attributes),Matsui.makeHash=(e,t)=>{var r=location.href.replace(/^[^#]*#?/,""),n=(e="string"!=typeof e?r.replace(/\?.*/,""):e)+((n=t&&"object"==typeof t?Object.keys(t).filter(e=>null!=t[e]).map(e=>""===t[e]?encodeURIComponent(e):[e,t[e]].map(encodeURIComponent).join("=")).join("&").replace(/%20/g,"+"):"")&&"?")+n;return{hash:n,push:n!=r&&r.replace(/\?.*/,"")!=e}},Matsui.merge.apply(Matsui.Wrapped.prototype,{syncHash(o){let i=this;function t(e){var t=(r=location.href.replace(/^[^#]*#?/,"")).replace(/\?.*/,""),r=r.substr(t.length+1);let n={};r.replace(/\+/g,"%20").split("&").forEach(e=>{e&&(e=e.split("=").map(t=>{try{return decodeURIComponent(t)}catch(e){return t}}),n[e.shift()]=e.join("="))}),(r=o(i.data)).path!==t&&(r.path=t),r.query!==n&&(r.query=n),Matsui.merge.apply(r.state,Matsui.merge.make(r.state,e))}addEventListener("hashchange",e=>t(null)),addEventListener("popstate",e=>t(window.history.state)),t(window.history.state),i.trackData(e=>{var e=o(e),t=Matsui.makeHash(e.path,e.query),e=(e=Matsui.getRaw(Matsui.access.pierce(e.state)))&&JSON.parse(JSON.stringify(e));t.push?window.history.pushState(e,"","#"+t.hash):window.history.replaceState(e,"","#"+t.hash)})},syncLocalStorage(o){let i=this;function l(t){var e=o(i.data);if(null===t)for(var r in e)l(r);else{var n=localStorage.getItem(t);if(n)try{e[t]=JSON.parse(n)}catch(e){console.error("localStorage."+t,e)}}}addEventListener("storage",e=>l(e.key)),l(null),i.trackData(e=>{var t,r=o(e);for(t in r){var n=r[t];null==n?localStorage.removeItem(t):localStorage.setItem(t,JSON.stringify(n))}})}}),Matsui.version="latest";
+//# sourceMappingURL=matsui-bundle.min.js.map
\ No newline at end of file
diff --git a/stfx/ui/web-ui.h b/stfx/ui/web-ui.h
new file mode 100644
index 0000000..229a829
--- /dev/null
+++ b/stfx/ui/web-ui.h
@@ -0,0 +1,21 @@
+#pragma once
+
+#include <string>
+
+namespace stfx {
+
+template<typename Sample, template<class, class...> class EffectSTFX, class... ExtraArgs>
+struct WebUILibraryEffect : public LibraryEffect<Sample, EffectSTFX, ExtraArgs...> {
+	std::string webPage = "generic.html";
+	int webWidth = 640, webHeight = 480;
+	
+	using LibraryEffect<Sample, EffectSTFX, ExtraArgs...>::LibraryEffect;
+
+	void webReceive(const void *message, size_t size) {
+		std::cout << "received " << size << " bytes from webview\n";
+	}
+private:
+	using Super = LibraryEffect<Sample, EffectSTFX, ExtraArgs...>;
+};
+
+} // namespace