Skip to content
Smelter logo Smelter logo Smelter

Text

A component for rendering text.

Reference

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


function ExampleApp() {
  return (
    <View>
      <Text style={{ fontSize: 64, color: "#a5baf0", fontWeight: "bold" }}>
        Test text
      </Text>
    </View>
  );
}


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


  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();
Type definitions 

type TextProps = {
  id?: string;
  children?: (string | number)[] | string | number;
  style?: TextStyleProps;
}

Props

children

Text content to be displayed.

  • Type: string | number | (string | number)[]

id

ID of a component.

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

style

Text styling properties.