> For the complete documentation index, see [llms.txt](https://docs.rierino.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rierino.com/design/user-interface/uis/widgets/atom-widgets.md). # Atom Widgets Atom widgets are used to display data without editing capabilities. 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 \

or \. 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 \ 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 | | - | | 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 \ 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) | | - | | 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 This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.rierino.com/design/user-interface/uis/widgets/atom-widgets.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.