# Atom Widgets

It is possible to extend the list and variety of atom widgets, and Rierino is shipped with the following widgets:

## Text Atom

TextAtom displays an image using a text tag such as \<p> or \<span>. This widget has the following special properties:

{% tabs %}
{% tab title="Properties" %}

| Property       | Definition                               | Example                       | Default |
| -------------- | ---------------------------------------- | ----------------------------- | ------- |
| Tag            | Tag to use (p, span, h1..h6, blockquote) | h1                            | p       |
| DOM Attributes | Attributes to apply to text tag          | {"className": "Custom-image"} | -       |
| {% endtab %}   |                                          |                               |         |

{% tab title="JSON Schema" %}

```json
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "TextAtom widget properties",
  "type": "object",
  "properties": {
    "props": {
      "type": "object",
      "properties": {
        "tag": {
          "type": "string",
          "definition": "Tag to use (p, span, h1..h6, blockquote)",
          "example": "h1",
          "default": "p",
          "enum": ["p", "span", "h1", "h2", "h3", "h4", "h5", "h6", "blockquote"]
        },
        "dom": {
          "type": "object",
          "definition": "Attributes to apply to text tag",
          "example": { "className": "Custom-image" },
          "default": null
        }
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

## Image Atom

ImageAtom displays an image using \<img> tag. This widget has the following special properties:

{% tabs %}
{% tab title="Properties" %}

| Property       | Definition                                            | Example                       | Default |
| -------------- | ----------------------------------------------------- | ----------------------------- | ------- |
| Base URL       | Base url for image to be used as a prefix to its data | <http://cdn.example.com>      | -       |
| DOM Attributes | Attributes to apply to image tag                      | {"className": "Custom-image"} | -       |
| {% endtab %}   |                                                       |                               |         |

{% tab title="JSON Schema" %}

```json
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "ImageAtom widget properties",
  "type": "object",
  "properties": {
    "props": {
      "type": "object",
      "properties": {
        "baseUrl": {
          "type": "string",
          "definition": "Base url for image to be used as a prefix to its data",
          "example": "http://cdn.example.com",
          "default": null
        },
        "dom": {
          "type": "object",
          "definition": "Attributes to apply to image tag",
          "example": { "className": "Custom-image" },
          "default": null
        }
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

## View Atom

ViewAtom is a wrapper, which acts similar to ContentsEditor, displaying all its content widgets. This widget has the following special properties:

{% tabs %}
{% tab title="Properties" %}

| Property       | Definition                                                       | Example                                  | Default |
| -------------- | ---------------------------------------------------------------- | ---------------------------------------- | ------- |
| Tag            | Tag to use (div, main, article, section, header, void)           | main                                     | div     |
| DOM Attributes | Attributes to apply to view tag                                  | {"className": "Custom-image"}            | -       |
| Content        | Complete contents mapping object data paths to widgets and props | \[{"path":"name", "widget": "TextAtom"}] | -       |
| {% endtab %}   |                                                                  |                                          |         |

{% tab title="JSON Schema" %}

```json
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "ViewAtom widget properties",
  "type": "object",
  "properties": {
    "props": {
      "type": "object",
      "properties": {
        "tag": {
          "type": "string",
          "definition": "Tag to use (div, main, article, section, header, void)",
          "example": "main",
          "default": "div",
          "enum": ["div", "main", "article", "section", "header", "void"]
        },
        "dom": {
          "type": "object",
          "definition": "Attributes to apply to view tag",
          "example": { "className": "Custom-image" },
          "default": null
        },
        "contents": {
          "type": "array",
          "definition": "Complete contents mapping object data paths to widgets and props",
          "default": null,
          "items": {
            "type": "object",
            "properties": {
              "path": {
                "type": "string",
                "definition": "Data path to render",
                "example": "name",
                "default": null
              },
              "widget": {
                "type": "string",
                "definition": "Widget to render for the given path",
                "example": "TextAtom",
                "default": null
              },
              "props": {
                "type": "object",
                "definition": "Widget specific properties for this content entry",
                "example": {},
                "default": null
              }
            }
          },
          "example": [{ "path": "name", "widget": "TextAtom" }]
        }
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

## Link Atom

LinkAtom is a wrapper, similar to ViewAtom, but using \<a> tag with a url reference and a single content entry. This widget has the following special properties:

{% tabs %}
{% tab title="Properties" %}

| Property       | Definition                                                                 | Example                               | Default |
| -------------- | -------------------------------------------------------------------------- | ------------------------------------- | ------- |
| URL Link       | Url link (uses data value if not provided)                                 | <http://example.com>                  | -       |
| Text           | Text to display as link (uses data value or props.content if not provided) | Click here                            | -       |
| DOM Attributes | Attributes to apply to link tag                                            | {"className": "Custom-image"}         | -       |
| Content        | Content details mapping object data paths to widgets and props             | {"path":"name", "widget": "TextAtom"} | -       |
| {% endtab %}   |                                                                            |                                       |         |

{% tab title="JSON Schema" %}

```json
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "LinkAtom widget properties",
  "type": "object",
  "properties": {
    "props": {
      "type": "object",
      "properties": {
        "url": {
          "type": "string",
          "definition": "Url link (uses data value if not provided)",
          "example": "http://example.com",
          "default": null
        },
        "text": {
          "type": "string",
          "definition": "Text to display as link (uses data value or props.content if not provided)",
          "example": "Click here",
          "default": null
        },
        "dom": {
          "type": "object",
          "definition": "Attributes to apply to link tag",
          "example": { "className": "Custom-image" },
          "default": null
        },
        "content": {
          "type": "object",
          "definition": "Content details mapping object data paths to widgets and props",
          "default": null,
          "properties": {
            "path": {
              "type": "string",
              "definition": "Data path to render",
              "example": "name",
              "default": null
            },
            "widget": {
              "type": "string",
              "definition": "Widget to render for the given path",
              "example": "TextAtom",
              "default": null
            },
            "props": {
              "type": "object",
              "definition": "Widget specific properties for this content entry",
              "example": {},
              "default": null
            }
          },
          "example": { "path": "name", "widget": "TextAtom" }
        }
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

## Repeat Atom

RepeatAtom is a wrapper, which repeats its content widget for its data array. This widget has the following special properties:

{% tabs %}
{% tab title="Properties" %}

| Property     | Definition                                                          | Example                               | Default |
| ------------ | ------------------------------------------------------------------- | ------------------------------------- | ------- |
| Tag          | Tag to use (div, main, article, section, header, void)              | main                                  | div     |
| Content      | Content details mapping array entry data paths to widgets and props | {"path":"name", "widget": "TextAtom"} | -       |
| {% endtab %} |                                                                     |                                       |         |

{% tab title="JSON Schema" %}

```json
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "RepeatAtom widget properties",
  "type": "object",
  "properties": {
    "props": {
      "type": "object",
      "properties": {
        "tag": {
          "type": "string",
          "definition": "Tag to use (div, main, article, section, header, void)",
          "example": "main",
          "default": "div",
          "enum": ["div", "main", "article", "section", "header", "void"]
        },
        "content": {
          "type": "object",
          "definition": "Content details mapping array entry data paths to widgets and props",
          "default": null,
          "properties": {
            "path": {
              "type": "string",
              "definition": "Data path (within each array entry) to render",
              "example": "name",
              "default": null
            },
            "widget": {
              "type": "string",
              "definition": "Widget to render for the given path",
              "example": "TextAtom",
              "default": null
            },
            "props": {
              "type": "object",
              "definition": "Widget specific properties for this content entry",
              "example": {},
              "default": null
            }
          },
          "example": { "path": "name", "widget": "TextAtom" }
        }
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rierino.com/design/user-interface/uis/widgets/atom-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.