Riot App

The Riot App component renders lightweight, reactive web components using Riot.js. It dynamically loads a specified Riot tag from the /riot directory, injects the necessary Riot.js library, and mounts the component on the page. This approach enables developers to create modular, reusable UI components with minimal overhead.

The component automatically handles script injection for both the Riot.js compiler (from CDN) and the custom tag file. Tags are loaded as separate .tag files, allowing for clean separation of component logic and template markup. The component supports the full Riot.js syntax including expressions, loops, conditionals, and event handlers.

Riot.js provides a simple, component-based architecture that is lighter than React or Vue, making it ideal for smaller interactive features that don't require a full framework. The global riot.mount("*") call automatically initializes all Riot tags on the page.

Usage Notes

  • The component uses Riot.js version 3.9.1 from CDN. This version includes the compiler required for runtime tag compilation and is the same version used by the legacy component. Riot v3 is the last major version to use the legacy custom .tag file format.
  • Tag files must be placed in the /wwwroot/riot directory with a .tag extension.
  • ASP.NET Core must be configured to serve .tag files as static content. This is done in Program.cs by adding the MIME type mapping: provider.Mappings[".tag"] = "riot/tag";
  • The component automatically injects three script blocks into the page's BodyBottom section: the Riot CDN library, the custom tag file, and the mount script.
  • Multiple Riot App components can be used on the same page, each loading a different tag. The global riot.mount("*") will initialize all of them.
  • Riot tags support full JavaScript expressions, event handlers, conditionals, and loops. Refer to Riot.js documentation for tag syntax.
  • The component inherits column sizing and padding parameters from the Hydrogen base template, allowing it to be placed within Bootstrap grid layouts.

Template properties

Datasource template: /sitecore/templates/Feature/MklComponents/Riot App

Field Type Description
TagName Single-Line Text The file name, without the .tag extension, of the riot app located in the rendering host's wwwroot/riot/ folder. Example: distance-to-coast would load the file located at wwwroot/riot/distance-to-coast.tag

Control properties

Standard Values / Defaults

PropertyDefault ValueNotes
Datasource Location./Page Components & Shared Content querySupports both local page-level and shared site-level datasources.
Parameters TemplateColumnInherits standard column parameters (Small, Medium, Large, Offset, Padding, AddClass).

Rendering Parameters

ParameterTypeDescription
SmallDroplinkBootstrap column width at the small breakpoint.
MediumDroplinkBootstrap column width at the medium breakpoint.
LargeDroplinkBootstrap column width at the large breakpoint.
OffsetSmallDroplinkColumn offset at the small breakpoint.
OffsetMediumDroplinkColumn offset at the medium breakpoint.
OffsetLargeDroplinkColumn offset at the large breakpoint.
PaddingTopDroplinkTop padding class.
PaddingBottomDroplinkBottom padding class.
PaddingStartDroplinkStart (left) padding class.
PaddingEndDroplinkEnd (right) padding class.
AddClassSingle-Line TextAdditional CSS classes to add to the component wrapper.