Rendering HTML in Slint #6642

dokick · 2024-10-24T12:33:26Z

dokick
Oct 24, 2024

Greetings Slint Community. In my desktop application I have to render html files and I'm aware that webview support is in development. I have looked into Discussions and PRs that reference that problem. During my research I came across the following resources:

I was wondering if someone here has at least a "hacky" way to render html or incorporate a webview into Slint UI. I've been messing around with wry and winit as a backend. I even have a code example that unfortunately doesn't work and I was wondering if someone could improve upon that. If the new window opens it's just blank. I don't know if this information is neccessary, but WASM is not my target, I actually just want to render raw HTML with CSS.

Cargo.toml

[package]
name = "multiwindow-test"
version = "0.1.0"
edition = "2021"
build = "build.rs"

[dependencies]
slint = { version = "1.8.0", features = ["raw-window-handle-06"] }
wry = "0.46.3"

[build-dependencies]
slint-build = "1.8.0"

main.slint

import { StandardButton, Button } from "std-widgets.slint";

export component HtmlWindow inherits Window {
}

export component App inherits Window {
    callback show-document();
    // ...
    Button {
        text: "Show Document";
        clicked => { root.show-document(); }
    }
}

main.rs

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use std::error::Error;

use wry;

slint::include_modules!();

fn main() -> Result<(), Box<dyn Error>> {
    let ui = App::new()?;

    ui.on_show_document(|| {
        let html_str = r#"<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Simple HTML5 page </title>
  </head>
  <body>

    <header>
      <hgroup>
        <h1> HTML5 AND CSS3 </h1>
        <h2> A Simple HTML5 WITHOUT CSS</h2>
      </hgroup>
      <nav>
        <ul>
          <a href="">Home</a>
          <a href="">Advance features</a>
          <a href=""> About</a>
          <a href=""> contact </a>
          <a href=""> Sign in </a>
          <a href=""> Sign up </a>
        </ul>
      </nav>
    </header>

    <section>
      <h2>A Simple HTML5 Page</h2>
      <p>
        This is an example of a simple HTML5 webpage using some of it's basic elements.
       </p>
     </section>

    <section>
      <h2> CSS3 for Styling</h2>
      <p>
        To make this webpage visually appealing we'll use some of the basic CSS3 code in another example. CSS Makes styling of the page more easy and convenient.
       </p>
     </section>

    <section>
      <h2> Progress bar </h2>
      <p>
        Progress you'll make<br>
        When you understand HTML5 code<progress max="100" value=50></progress><br>
        When you understand CSS3 Code <progress max="100" value=50></progress><br>
        When you understand HTML5+CSS3 Code<progress max=100 value=100></progress>
      </p>
    </section>

  <section>
    <mark> For more understandability how css works this page doesn't include any CSS3 code.</mark>
  </section>

   <footer>
     <p>This is the modified example of the code taught by Colleen van Lent in her Introduction to CSS3 course on coursera.</p>
   </footer
  </body>
</html>"#;

        let new_window = HtmlWindow::new().unwrap();

        let _webview = wry::WebViewBuilder::new()
            .with_html(html_str)
            .build_as_child(&new_window.window().window_handle())  // I've also tried .build()
            .unwrap();

        new_window.show().unwrap(); // I've also tried .run()
    });

    ui.run()?;
    Ok(())
}

sadlrxn · 2024-10-24T12:57:19Z

sadlrxn
Oct 24, 2024

I don't think webview is yet supported. Use tauri for that.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rendering HTML in Slint #6642

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Rendering HTML in Slint #6642

dokick Oct 24, 2024

Replies: 1 comment

sadlrxn Oct 24, 2024

dokick
Oct 24, 2024

sadlrxn
Oct 24, 2024