---
title: Code components - Prop schemas
---

When working with code components outside of Canvas, `component.yml` files are
used to define component metadata, including props. These files follow the same
schema as SDC `component.yml` files, but the available prop schemas are limited to
those supported by the in-browser code editor of Canvas.

This page documents all supported prop types for code components. Each type
corresponds to a specific JSON Schema definition.

## Text

Basic text input. Stored as a string value.

```yaml
type: string
examples:
  - Hello, world!
```

## Formatted text

Rich text content with HTML formatting support, displayed in a block context.

```yaml
type: string
contentMediaType: text/html
x-formatting-context: block
examples:
  - <p>This is <strong>formatted</strong> text with HTML.</p>
```

## Link

URL or URI reference for links to internal or external resources.

```yaml
type: string
format: uri-reference
examples:
  - https://example.com
```

**Note:** The format can be either `uri` (accepts only absolute URLs) or `uri-reference` (accepts both absolute and relative URLs).

## Image

Reference to an image object with metadata like alt text, dimensions, and file
URL. Only the file URL is required to exist, all other metadata is always optional.

```yaml
type: object
$ref: json-schema-definitions://canvas.module/image
examples:
  - src: >-
      https://images.unsplash.com/photo-1484959014842-cd1d967a39cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80
    alt: Woman playing the violin
    width: 1770
    height: 1180
```

## Video

Reference to a video object with metadata like dimensions and file URL. Only the file URL is required to exist, all other metadata is always optional.

```yaml
type: object
$ref: json-schema-definitions://canvas.module/video
examples:
  - src: https://media.istockphoto.com/id/1340051874/video/aerial-top-down-view-of-a-container-cargo-ship.mp4?s=mp4-640x640-is&k=20&c=5qPpYI7TOJiOYzKq9V2myBvUno6Fq2XM3ITPGFE8Cd8=
    poster: https://example.com/600x400.png
```

## Boolean

True or false value.

```yaml
type: boolean
examples:
  - false
```

## Integer

Whole number value without decimal places.

```yaml
type: integer
examples:
  - 42
```

## Number

Numeric value that can include decimal places.

```yaml
type: number
examples:
  - 3.14
```

## List: text

A predefined list of text options that the user can select from.

```yaml
type: string
enum:
  - option1
  - option2
  - option3
meta:enum:
  option1: Option 1
  option2: Option 2
  option3: Option 3
examples:
  - option1
```

The `meta:enum` property provides user-friendly labels for each enum value. The
keys match the enum values, and the values are the display labels shown in the
UI.

**Note:** Enum values cannot contain dots.

## List: integer

A predefined list of integer options that the user can select from.

```yaml
type: integer
enum:
  - 1
  - 2
  - 3
meta:enum:
  1: Option 1
  2: Option 2
  3: Option 3
examples:
  - 1
```

The `meta:enum` property provides user-friendly labels for each enum value. The
keys match the enum values, and the values are the display labels shown in the
UI.

**Note:** Enum values cannot contain dots.
