A bounded native JSON/CSV preview. It shares typography and compact geometry with cem-table; use cem-source-editor to edit the source.
Full examples and variation matrix ยท Automated stories
JSON/CSV parsing and source retention belong to the native CEM import layer. Missing values, null and empty strings remain distinct. The viewer is passive and does not submit form values.
{slice @name=source |```[{"name":"Ada","score":3},{"name":"Bob","score":null}]```}
{slice @name=label | Preview data}
{slice @name=ariaLabel | }{slice @name=slotLabel | }{slice @name=class | }{slice @name=hidden | false}
{slice @name=format | json}
{slice @name=density | super-compact}
{cem-field @label=label @value={datadom.slices.label} @slice=label @slice-event=input @slice-value="$target.value"}
{cem-field @label=aria-label @value={datadom.slices.ariaLabel} @slice=ariaLabel @slice-event=input @slice-value="$target.value"}
{cem-field @label="label slot" @value={datadom.slices.slotLabel} @slice=slotLabel @slice-event=input @slice-value="$target.value"}
{cem-field @label=class @value={datadom.slices.class} @slice=class @slice-event=input @slice-value="$target.value"}
{cem-checkbox @label=hidden @checked={if datadom.slices.hidden { true } else { null }} @slice=hidden @slice-event=change @slice-value="$target.checked"}
{cem-textarea @label="Source value" @value={datadom.slices.source} @slice=source @slice-event=change @slice-value="$target.value"}
{fieldset | {legend | format}
{cem-radio @name=format @label=JSON @value=json @checked={if datadom.slices.format == "json" { true } else { null }} @slice=format @slice-event=change @slice-value="$target.value"}
{cem-radio @name=format @label=CSV @value=csv @checked={if datadom.slices.format == "csv" { true } else { null }} @slice=format @slice-event=change @slice-value="$target.value"}
}
{fieldset | {legend | Density}
{cem-radio @name=density @label=Default @value=default @checked={if datadom.slices.density == "default" { true } else { null }} @slice=density @slice-event=change @slice-value="$target.value"}
{cem-radio @name=density @label=Compact @value=compact @checked={if datadom.slices.density == "compact" { true } else { null }} @slice=density @slice-event=change @slice-value="$target.value"}
{cem-radio @name=density @label="Paragraph lines" @value=super-compact @checked={if datadom.slices.density == "super-compact" { true } else { null }} @slice=density @slice-event=change @slice-value="$target.value"}
}
{cem-data-view @label={datadom.slices.label} @format={datadom.slices.format} @value={datadom.slices.source} @data-cem-density={datadom.slices.density}
@aria-label={if datadom.slices.ariaLabel { datadom.slices.ariaLabel } else { null }} @class={datadom.slices.class} @hidden={if datadom.slices.hidden { true } else { null }} |
{cem:if @test=datadom.slices.slotLabel | {strong @slot=label | {$datadom.slices.slotLabel}}}
}
Preview limits: 65,536 Unicode source characters, 100 rows, 32 columns/properties, depth 4 and 2,048 characters per scalar cell. Limits are labeled and preserve the original resource. The paragraph-line profile applies to fine hover input without a coarse pointer; touch and hybrid devices retain larger geometry.
{cem-module-url @slice=source @src="@epa-wg/cem-components/components/cem-data-view/cem-data-view.xhtml"}{cem:if @test=datadom.slices.source | {p | {a @href={datadom.slices.source} | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src={datadom.slices.source} @type=xml @demo=false}}