Skip to main content

​
Text

Renders styled text. Use the variant prop to control the visual style. 
<Text content="Stream Title" variant="heading" />
<Text content="A helpful description for the streamer." variant="muted" />
<Text content="Important value" variant="bold" />
<Text content="Regular text" />
​
content
string
required
The text to display.
​
variant
'default' | 'muted' | 'bold' | 'heading'
default:"default"
"heading" — large and bold, for titles. "bold" — semibold emphasis. "muted" — smaller and dimmed, for descriptions. "default" — normal text.

​
Practical Example

Use Text to show the current state of a storage value, or as labels and descriptions in your settings panel: 
import { CompactView, Text, useExtensionStorage } from "@1upvision/sdk";

function Overlay() {
  const [storage] = useExtensionStorage();
  const score = storage.score ?? 0;

  return (
    <CompactView>
      <Text content={`Score: ${score}`} variant="heading" />
      <Text content="Updates in real-time from the editor." variant="muted" />
    </CompactView>
  );
}

​
Image

Displays an image from a URL. Handles loading states automatically. 
<Image
  src="https://example.com/logo.png"
  alt="Channel logo"
  width={200}
  height={100}
/>
​
src
string
required
Image source. Supports http(s) URLs and extension-local files from public/ (for example: /assets/icon.png).
​
alt
string
Alt text for accessibility.
​
width
number
Width in pixels.
​
height
number
Height in pixels.

​
Practical Example

Let the streamer provide an avatar URL in the editor, then display it on the overlay: 
import {
  CompactView,
  List,
  Text,
  Image,
  TextField,
  useExtensionStorage,
} from "@1upvision/sdk";

// Editor panel
function Settings() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <CompactView title="Avatar">
      <TextField
        label="Image URL"
        placeholder="https://..."
        value={storage.avatarUrl ?? ""}
        onChange={(value) => setStorage({ ...storage, avatarUrl: value })}
      />
    </CompactView>
  );
}

// OBS layer
function Overlay() {
  const [storage] = useExtensionStorage();

  if (!storage.avatarUrl) return null;

  return (
    <CompactView>
      <List gap={8}>
        <Image src={storage.avatarUrl} alt="Avatar" width={64} height={64} />
        <Text content={storage.name ?? ""} variant="bold" />
      </List>
    </CompactView>
  );
}