Display Components

<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" />

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
  src="https://example.com/logo.png"
  alt="Channel logo"
  width={200}
  height={100}
/>

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>
  );
}