Skip to content
Smelter logo Smelter logo Smelter

WebView

Required feature:web_renderer

WebView renders a website using Chromium engine embedded inside the Smelter instance.

Usage

WebViewExample.tsx
import { View, WebView } from "@swmansion/smelter";
import Smelter from "@swmansion/smelter-node";


function ExampleApp() {
  return (
    <View>
      <WebView instanceId="example_web_renderer" />
    </View>
  );
}


async function run() {
  const smelter = new Smelter();
  await smelter.init();


  await smelter.registerWebRenderer("example_web_renderer", {
    url: "https://smelter.dev",
    resolution: {
      width: 1920,
      height: 1080,
    },
    embeddingMethod: "chromium_embedding",
  });


  await smelter.registerOutput("output", <ExampleApp />, {
12 collapsed lines
    type: "mp4",
    serverPath: "./output.mp4",
    video: {
      encoder: {
        type: "ffmpeg_h264",
        preset: "ultrafast",
      },
      resolution: {
        width: 1920,
        height: 1080,
      },
    },
  });


  await smelter.start();
}
void run();

Reference

Type definitions 

type WebView = {
  id?: string;
  children?: ReactElement[];
  instanceId: string;
}

Props

instanceId

ID of a web renderer instance. It identifies an instance registered using a Smelter.registerWebRenderer method.

  • Type: string

children

Content to be displayed within the WebView.

  • Type: ReactNode

id

ID of a component.

  • Type: string
  • Default value: Value produced by useId hook