Slint Servo Example

Disclaimer: Servo is still experimental and not ready for production use.

Integrate Servo Web Engine as WebView Component for Slint to render websites using hardware rendering on Linux, MacOS, Windows and Android.

Prerequisites

• UV

Simple Usage

• Copy webview.slint from src and paste it in your project.

• Use Webview to your .slint file.

  slintCopy

  import { Webview } from "webview.slint";
  
  export component MyApp inherits Window {
  ...
      Rectangle {
          Webview {
              width: 100%;
              height: 100%;
              changed current_url => {
                  // example usage
                  // lineEdit.text = self.current_url;
              }
          }
      }
  ...
  }
  

• Initialize it in your app with below code.

  rustCopy

  pub mod webview;
  
  use slint::ComponentHandle;
  
  use crate::webview::WebView;
  
  slint::include_modules!();
  
  pub fn main() {
      setup_slint_with_wgpu();
  
      let app = MyApp::new().unwrap();
  
      let initialized = Cell::new(false);
      let app_weak = app.as_weak();
  
      app.window()
          .set_rendering_notifier(move |state, graphics_api| {
              if !matches!(state, slint::RenderingState::RenderingSetup) || initialized.get() {
                  return;
              }
              let slint::GraphicsAPI::WGPU29 { device, queue, .. } = graphics_api else {
                  panic!(
                      "Slint did not select a wgpu-29 renderer; \
                      enable a wgpu-capable renderer feature"
                  );
              };
              let app = app_weak.upgrade().unwrap();
              WebView::new(app, "https://slint.dev".into(), device.clone(), queue.clone());
              initialized.set(true);
          }).unwrap();
  
      app.run().unwrap();
  }
  
  fn setup_slint_with_wgpu() {
      use slint::wgpu_29::{WGPUConfiguration, WGPUSettings};
  
      #[allow(unused_mut)]
      let mut wgpu_settings = WGPUSettings::default();
  
      #[cfg(target_os = "windows")]
      {
          wgpu_settings.backends = slint::wgpu_29::wgpu::Backends::DX12;
      }
  
      slint::BackendSelector::new()
          .require_wgpu_29(WGPUConfiguration::Automatic(wgpu_settings))
          .select()
          .unwrap();
  }
  

Prerequisites for Windows

To build on Windows, you will need Visual Studio installed. Cargo requires the LIBCLANG_PATH environment variable set to the LLVM tools directory bundled with Visual Studio.

• Install Visual Studio.
• Install C++ build tools using Visual Studio Installer.
• Set environment variable LIBCLANG_PATH for example "C:\Program Files\Microsoft Visual Studio\18\Community\VC\Tools\Llvm\x64\bin"

For Android build

• Update your code with android specific code from example to your project.

Prerequisites for Android

• Install JDK.
• Install Android Studio.
• Install Android Command Line Tools.

Install platform-tools

${ANDROID_HOME}/cmdline-tools/latest/bin/sdkmanager --install "platforms;android-30"

Add rust target and install cargo apk

rustup target add aarch64-linux-android
cargo install cargo-apk

Setup Bindgen for Android

platform: linux-x86_64 (Linux) | darwin-x86_64 (Mac) | windows-x86_64 (Windows)

export BINDGEN_EXTRA_CLANG_ARGS="--target=aarch64-linux-android30 --sysroot=$ANDROID_NDK_ROOT/toolchains/llvm/prebuilt/<platform>/sysroot"

Run on android emulator or device

cargo apk run --target aarch64-linux-android --lib