Field Editor & Viewer Reference
All 34 editor types — exhaustive viewer and editor demonstrations with sample values.
Single-line plain text input. The default for most string fields.
Comma-separated tag tokens rendered as pill badges.
Markdown-formatted text. Rendered with basic heading/list/bold/italic parsing in detail mode.
Title
**Bold** and *italic*
Just a plain sentence with no markdown formatting at all.
HTML content rendered via dangerouslySetInnerHTML in detail mode.
Some bold and link content.
Product Details
- Feature A
- Feature B
See documentation for details.
JSON blob. Pretty-printed in detail mode; shows {…} token in cell mode.
{…}{
"id": 1,
"name": "Sample",
"active": true,
"score": 4.5
}{…}[
{
"key": "a",
"val": 1
},
{
"key": "b",
"val": 2
}
]{…}{
"user": {
"id": "u1",
"roles": [
"admin",
"editor"
]
},
"meta": {
"created": "2024-01-01"
}
}Source code. Rendered in a dark monospace block in detail mode.
function greet(name) {
return `Hello, …function greet(name) {
return `Hello, ${name}!`;
}const config = {
apiUrl: process.env.A…const config = {
apiUrl: process.env.API_URL,
timeout: 5000,
retries: 3,
};
export default config;Email address. Renders as a mailto: link.
Telephone number. Renders as a tel: link.
URL. Opens in a new tab with an external link icon.
Multi-line postal address. Shows pin icon and first line in cell mode; full address in detail.
Network hardware address. Normalised to XX:XX:XX:XX:XX:XX format.
IPv4 or IPv6 network address. Rendered in monospace with CPU icon.
Integer or decimal number. Formatted with locale-aware thousands separators.
Monetary value formatted as AUD currency.
Percentage value. Shows a progress bar in detail mode; over-100% renders bar capped.
0–5 star rating. Interactive stars in editor; filled/empty stars in viewer scaled to max.
Circular arc gauge for numeric KPIs. Display-only. Color changes by threshold. Accepts 0–100 or custom min/max.
Date and time value. Formatted with en-AU locale including time.
Date-only value. Formatted with en-AU locale.
Time-of-day value. Rendered with a clock icon.
Year and month (YYYY-MM). Rendered as full month name.
Time span. Accepts ISO 8601 (PT2H30M), plain seconds, or "Xh Ym" notation.
True/false toggle. Renders a green checkmark or grey X.
Single selection from a fixed list of options.
Ordered list of string items. Rendered as a bullet list in detail mode.
- Alpha
- Beta
- Gamma
- Delta
- Epsilon
- Foo
- Bar
Terms and conditions acceptance. Renders "Accepted" in green or "Not accepted" in amber.
Compact colored dot + optional label for operational status. Animates for active/processing states.
Masked secret. Always renders as bullet dots regardless of actual length.
Payment card number. Only last 4 digits shown; rest masked.
Captured signature. Short values render as "Signed" badge; long base64 renders as image in detail.
Image URL. Shows thumbnail in cell mode; full-size (max 192px) in detail.
File path or name. Shows extension badge and truncated filename.
Named icon identifier. Renders a placeholder icon box in cell mode.
Hex or CSS color value. Renders as a swatch in cell mode; swatch + hex code in detail.
Displays initials in a colored circle. Used for name or email fields that represent a person. Cell shows initials only; detail adds the name.
Cross-entity reference key. Renders in monospace with a hash icon and truncated ID.
Lookup link to another entity. Same rendering as Reference.
Time-series data points array. Read-only computed badge; not editable.
{…}[
{
"t": 1718400000,
"v": 42
},
{
"t": 1718486400,
"v": 67
}
]{…}[
{
"t": 1718400000,
"v": 100
}
]Regular expression pattern. Rendered surrounded by forward-slash delimiters.
/^[A-Z]{2}\d{6}[A-Z]$//^[A-Z]{2}\d{6}[A-Z]$//^[\w.-]+@[\w.-]+\.\w{2,}$//^[\w.-]+@[\w.-]+\.\w{2,}$//^\d{4}$//^\d{4}$/Inline trend line chart. Accepts JSON array of numbers or {t,v} objects, or comma-separated numbers. Display-only.