The rule of thumb is, if for the particular page of your app, a delay of 200-300 milliseconds (or even 1 second for the first time) is acceptable, then you can benefit from the vast productivity gains and reusability options available in the web stack.
But the are cases where you need a complex piece of UI such as displaying dashboard charts, a signature pad, a game, etc. In such scenarios, the initial lag of 200-300ms is psychologically very acceptable by the users, because it's a small overhead compared to the time they will spend using that component.
1. In Visual Studio create a new project with the type "Zebble Plugin - Composite View" as explained here.
3. Set the build action of all files inside the Asset folder as Embedded Resource.
4. Create a class for the component which wraps a WebView element based on the following pattern.
public partial class MyComponent : Canvas
Assembly Assembly => GetType().GetAssembly();
public override async Task OnInitializing()
WebView = new WebView(Assembly, "Zebble.Plugin").Size(100.Percent());
public override async Task OnPreRender()
WebView.Html = Assembly.ReadEmbeddedTextFile("Zebble.Plugin", "Asset/Index.html");
// Of course you can customise the HTML code in C# code before rendering, for example to inject parameters into it.
<link rel="stylesheet" href="resource:SomeFolder/Styles.css" />