TypeScript SDK

TypeScript SDK is a library that provides a set of React components, hooks, and utility functions you can use to control video composition in Smelter.

Runtime

There are different variants of the SDK, each designed to allow Smelter to run in a specific environment. The rendering process can be divided into two main parts: the TypeScript code that defines the video layout using React components, and the media processing that renders the actual video. To select your optimal setup, you need to decide where each of these steps should be executed.

• Node.js

  NPM package: @swmansion/smelter-node

  It allows you to control a Smelter server from the Node.js process. In this approach your React code runs inside Node.js process, and any updates to the React component tree are transmitted to the Smelter server as layout updates over HTTP requests. By default, the Smelter server is automatically launched on the same machine as Node.js, but you may choose to deploy it independently and simply provide the library with the connection URL.

• Browser (Client)

  NPM package: @swmansion/smelter-web-client

  It allows you to control a Smelter server from within the browser. In this approach, your React code runs inside the client’s browser, and any updates to the React component tree are transmitted to the Smelter server as layout updates over HTTP requests. There is no way to start a server from inside the browser, so the library must be provided with the connection URL to an already deployed instance.

• Browser (WASM)

  NPM package: @swmansion/smelter-web-wasm

  It allows you to run the entire Smelter rendering engine directly in the browser. In this approach, your React code runs inside the client’s browser, and any updates to the React component tree are handled by the WASM module running in a separate Web Worker. Since the engine is compiled to WebAssembly, it handles all media processing and output generation locally, eliminating the need for a separate Smelter server.

Getting started

Check out guides to get started:

• Quick start - Node.js
• Quick start - Browser (WASM)

Or generate starter project with:

npm

npx create-smelter-app

pnpm

pnpx create-smelter-app

yarn

yarn create smelter-app

bun

bunx create-smelter-app

Reference

• Node.js
• Browser (Client)
• Browser (WASM)

Components

Smelter TypeScript SDK draws heavy inspiration from React Native in terms of the syntax. It’s important to note that standard DOM components, such as <div/>, are not supported. Instead, you should use Smelter-specific components, such as:

• Image
• InputStream
• Mp4
• Rescaler
• Shader
• Show
• SlideShow
• Text
• Tiles
• View
• WebView

Styling

Smelter components can be customized in a way similar to React inline styling. Most of the components accept style prop - an object defining custom visual aspects. However, some of the animation-related customizations, such as transition are handled by specific dedicated props.

Caution

Despite some of the component names overlapping with React Native, the supported styles differ. Visit a specific component section to see supported styles.

Hooks

Our hooks are primarily designed for managing stream configurations and accessing information about them. Smelter currently offers following hooks:

• useInputStreams
• useAudioInput
• useAfterTimestamp
• useBlockingTask

You’re free to use any standard React hooks such as useState, useEffect, and more.

Inputs

You can handle most of the stream composing by using React components. However, delivering multimedia to Smelter requires registering the input beforehand. You can register an input by using Smelter.registerInput, which accepts inputId and object representing input configurations. Supported inputs depend on the runtime.

Look for Node.js , Browser (Client) , or Browser (WASM) tags in the input documentation to check which runtime is supported.

Node.js o Browser (Client):

• MP4
• RTP
• HLS
• WHIP server
• WHEP client
• RTMP server
• Video for Linux 2 (V4L2 API)

Browser (WASM):

• MP4 (limited API compared to Node.js)
• Camera (Web API)
• Screen capture (Web API)
• MediaStream (Web API)
• WHEP client (Web API)

After registering the stream, you can use it in composition by using InputStream component.

<InputStream inputId="example_input" />

Outputs

Similar to inputs, outputs require registering them before they can be utilized. You can register an output by using Smelter.registerOutput.

Look for Node.js , Browser (Client) , or Browser (WASM) tags in the output documentation to check which runtime is supported.

Node.js:

• MP4
• RTP
• HLS
• WHIP client
• WHEP server
• RTMP client

Browser (WASM)

• Canvas (Web APi)
• MediaStream (Web API)
• WHIP client (Web API)

Resources

Other than inputs and outputs Smelter supports a few other entity types that need to be registered.

• Shader
• Image
• WebRenderer