> ## Documentation Index
> Fetch the complete documentation index at: https://docs.videodb.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Asset

> Overlay text elements on videos with customizable fonts, colors, and positioning

## Quick Example

<CodeGroup>
  ```python Python theme={null}
  from videodb.editor import (
      TextAsset, Font, Background,
      Alignment, HorizontalAlignment, VerticalAlignment, TextAlignment
  )

  text_asset = TextAsset(
      text="BREAKING NEWS",
      font=Font(family="Inter", size=48, color="#FFFFFF"),
      background=Background(
          color="#FF0000",
          width=400,
          height=80,
          text_alignment=TextAlignment.center
      ),
      alignment=Alignment(
          horizontal=HorizontalAlignment.center,
          vertical=VerticalAlignment.center
      )
  )
  ```

  ```javascript Node.js theme={null}
  import {
      TextAsset, Font, Background,
      Alignment, HorizontalAlignment, VerticalAlignment, TextAlignment
  } from 'videodb';

  const textAsset = new TextAsset({
      text: "BREAKING NEWS",
      font: new Font({ family: "Inter", size: 48, color: "#FFFFFF" }),
      background: new Background({
          color: "#FF0000",
          width: 400,
          height: 80,
          textAlignment: TextAlignment.center
      }),
      alignment: new Alignment({
          horizontal: HorizontalAlignment.center,
          vertical: VerticalAlignment.center
      })
  });
  ```
</CodeGroup>

***

## TextAsset Parameters

| Parameter      | Type       | Description                                 |
| :------------- | :--------- | :------------------------------------------ |
| `text`         | str        | The text to display                         |
| `font`         | Font       | Font styling (family, size, color, opacity) |
| `background`   | Background | Background box styling                      |
| `alignment`    | Alignment  | Position on screen                          |
| `border`       | Border     | Border styling                              |
| `shadow`       | Shadow     | Shadow styling                              |
| `tabsize`      | int        | Tab size for text formatting                |
| `line_spacing` | float      | Spacing between lines                       |
| `width`        | int        | Width of text box in pixels                 |
| `height`       | int        | Height of text box in pixels                |

***

## Font

Controls text appearance.

| Parameter | Type  | Default     | Description               |
| :-------- | :---- | :---------- | :------------------------ |
| `family`  | str   | `"Sans"`    | Font family name          |
| `size`    | int   | `24`        | Font size in pixels       |
| `color`   | str   | `"#000000"` | Text color (hex)          |
| `opacity` | float | `1.0`       | Text opacity (0.0 to 1.0) |

<CodeGroup>
  ```python Python theme={null}
  from videodb.editor import Font

  font = Font(
      family="Inter",
      size=56,
      color="#FFFFFF"
  )
  ```

  ```javascript Node.js theme={null}
  const font = new Font({
      family: "Inter",
      size: 56,
      color: "#FFFFFF"
  });
  ```
</CodeGroup>

**Supported fonts:** Sans, Inter, Roboto, Open Sans, Lato, Montserrat, Oswald, Raleway, Poppins, Ubuntu, Clear Sans, Arial, Times New Roman, Courier New, Georgia, Verdana

***

## Background

Controls the background box behind text.

| Parameter        | Type          | Default     | Description                     |
| :--------------- | :------------ | :---------- | :------------------------------ |
| `color`          | str           | `"#FFFFFF"` | Background color (hex)          |
| `opacity`        | float         | `1.0`       | Background opacity (0.0 to 1.0) |
| `width`          | int           | auto        | Box width in pixels             |
| `height`         | int           | auto        | Box height in pixels            |
| `border_width`   | float         | `0`         | Border thickness                |
| `text_alignment` | TextAlignment | center      | Text alignment within box       |

<CodeGroup>
  ```python Python theme={null}
  from videodb.editor import Background, TextAlignment

  background = Background(
      color="#000000",
      width=600,
      height=120,
      border_width=2.0,
      text_alignment=TextAlignment.center
  )
  ```

  ```javascript Node.js theme={null}
  const background = new Background({
      color: "#000000",
      width: 600,
      height: 120,
      borderWidth: 2.0,
      textAlignment: TextAlignment.center
  });
  ```
</CodeGroup>

***

## Alignment

Controls where the text appears on screen.

| Parameter    | Type                | Description               |
| :----------- | :------------------ | :------------------------ |
| `horizontal` | HorizontalAlignment | `left`, `center`, `right` |
| `vertical`   | VerticalAlignment   | `top`, `center`, `bottom` |

<CodeGroup>
  ```python Python theme={null}
  from videodb.editor import Alignment, HorizontalAlignment, VerticalAlignment

  # Center of screen
  alignment = Alignment(
      horizontal=HorizontalAlignment.center,
      vertical=VerticalAlignment.center
  )

  # Bottom-left corner
  alignment = Alignment(
      horizontal=HorizontalAlignment.left,
      vertical=VerticalAlignment.bottom
  )
  ```

  ```javascript Node.js theme={null}
  // Center of screen
  const alignment = new Alignment({
      horizontal: HorizontalAlignment.center,
      vertical: VerticalAlignment.center
  });

  // Bottom-left corner
  const alignment = new Alignment({
      horizontal: HorizontalAlignment.left,
      vertical: VerticalAlignment.bottom
  });
  ```
</CodeGroup>

***

## Complete Example

<CodeGroup>
  ```python Python theme={null}
  from videodb.editor import (
      Timeline, Track, Clip, VideoAsset, TextAsset,
      Font, Background, Alignment,
      HorizontalAlignment, VerticalAlignment, TextAlignment
  )

  # Create text asset
  intro_text = TextAsset(
      text="Let the Match Begin",
      font=Font(family="Clear Sans", size=56, color="#FFFFFF"),
      background=Background(
          width=600,
          height=120,
          color="#000000",
          border_width=2.0,
          text_alignment=TextAlignment.center
      ),
      alignment=Alignment(
          horizontal=HorizontalAlignment.center,
          vertical=VerticalAlignment.center
      )
  )

  # Add to timeline
  timeline = Timeline(conn)

  video_clip = Clip(asset=VideoAsset(asset_id=video.id), duration=30)
  text_clip = Clip(asset=intro_text, duration=5)

  video_track = Track()
  video_track.add_clip(clip=video_clip, start=0)

  text_track = Track()
  text_track.add_clip(clip=text_clip, start=0)

  timeline.add_track(video_track)
  timeline.add_track(text_track)

  stream_url = timeline.generate_stream()
  ```

  ```javascript Node.js theme={null}
  import {
      Timeline, Track, Clip, VideoAsset, TextAsset,
      Font, Background, Alignment,
      HorizontalAlignment, VerticalAlignment, TextAlignment
  } from 'videodb';

  // Create text asset
  const introText = new TextAsset({
      text: "Let the Match Begin",
      font: new Font({ family: "Clear Sans", size: 56, color: "#FFFFFF" }),
      background: new Background({
          width: 600,
          height: 120,
          color: "#000000",
          borderWidth: 2.0,
          textAlignment: TextAlignment.center
      }),
      alignment: new Alignment({
          horizontal: HorizontalAlignment.center,
          vertical: VerticalAlignment.center
      })
  });

  // Add to timeline
  const timeline = new Timeline(conn);

  const videoClip = new Clip({ asset: new VideoAsset({ assetId: video.id }), duration: 30 });
  const textClip = new Clip({ asset: introText, duration: 5 });

  const videoTrack = new Track();
  videoTrack.addClip({ clip: videoClip, start: 0 });

  const textTrack = new Track();
  textTrack.addClip({ clip: textClip, start: 0 });

  timeline.addTrack(videoTrack);
  timeline.addTrack(textTrack);

  const streamUrl = await timeline.generateStream();
  ```
</CodeGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="CaptionAsset" href="/pages/act/programmable-editing/caption-asset" icon="captions">
    Auto-generated subtitles synced to speech
  </Card>

  <Card title="Timeline Architecture" href="/pages/act/programmable-editing/timeline-architecture" icon="layers">
    Complete guide to the 4-layer editing system
  </Card>
</CardGroup>