Template preview harness
DeprecatedLoads every available template bundle inline and binds the single <m-template> element to a mock CSOM adapter. Switching the
template dropdown swaps the rendered bundle instantly (no fetch).
The JS-bundle path is deprecated as of 2026-04-27. New integrations should use the static HTML surface — it's now the primary rendering path. The JS bundles stay shipped for existing consumers; no new variants are being added.
Element attributes
Adapter behavior
Mock data (JSON)
Rendered element
JSON Schema
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"type": "object",
"properties": {
"user": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"displayName": {
"type": "string"
},
"handle": {
"type": "string"
},
"role": {
"type": "string"
},
"status": {
"type": "string",
"enum": [
"online",
"offline",
"away",
"busy"
]
},
"avatarUrl": {
"anyOf": [
{
"type": "string",
"format": "uri"
},
{
"type": "null"
}
]
},
"bannerUrl": {
"anyOf": [
{
"type": "string",
"format": "uri"
},
{
"type": "null"
}
]
},
"bio": {
"type": "string"
},
"location": {
"type": "string"
},
"joinedAt": {
"type": "string",
"format": "date-time",
"pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
}
},
"required": [
"id",
"displayName",
"avatarUrl"
],
"additionalProperties": false
},
"stats": {
"type": "object",
"properties": {
"followers": {
"type": "integer",
"minimum": 0,
"maximum": 9007199254740991
},
"following": {
"type": "integer",
"minimum": 0,
"maximum": 9007199254740991
},
"posts": {
"type": "integer",
"minimum": 0,
"maximum": 9007199254740991
}
},
"required": [
"followers",
"following",
"posts"
],
"additionalProperties": false
},
"statsDelta": {
"type": "object",
"properties": {
"followers": {
"type": "number"
},
"following": {
"type": "number"
},
"posts": {
"type": "number"
}
},
"additionalProperties": false
},
"links": {
"default": [],
"type": "array",
"items": {
"type": "object",
"properties": {
"label": {
"type": "string"
},
"href": {
"type": "string",
"format": "uri"
},
"iconKey": {
"type": "string"
}
},
"required": [
"label",
"href"
],
"additionalProperties": false
}
},
"badges": {
"default": [],
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"label": {
"type": "string"
},
"color": {
"type": "string"
}
},
"required": [
"id",
"label"
],
"additionalProperties": false
}
},
"activity": {
"default": [],
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"at": {
"type": "string",
"format": "date-time",
"pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
},
"title": {
"type": "string"
},
"href": {
"type": "string",
"format": "uri"
}
},
"required": [
"id",
"at",
"title"
],
"additionalProperties": false
}
}
},
"required": [
"user",
"stats",
"links",
"badges"
],
"additionalProperties": false
}