This has probably been done plenty of times before. A small template for displaying data fields of a tiddler when its in view mode without having to use "Info". Where this differs from tiddler "Info", it doesn't show the standard fields (title, tags, type) but only the ones that display at the bottom of a tiddler edit page, the unique user created fields.
the visual format looks like this:
Hidden data fields of this page
field name : value
field name : value
field name : value
underlined (field names) will be in a <code> like border
It uses 2 spans-- one (ragsspannumb) to give the field name a border, reduce its text size a little and make it bold face. The other span (ragsspannobrk) keeps the field name-data value together so they don't get separated by line breaks.
The container div and span borders for field names can be styled.
template tiddler, title: datafields display template (can be changed)
<div style="width:100%;margin:0px; padding:10px; border:dotted 1px;">
__Hidden data fields of this page__:<br/>
<$list filter="[all[current]fields[]!prefix[filter-field]sort[title]] -[all[shadows]removeprefix[$:/language/Docs/Fields/]]" variable="listItem" >
<span class="ragsspannobrk"><span class="ragsspannumb"><$text text=<<listItem>>/></span> : <$view field=<<listItem>>/></span></$list>
</div>
the styles it uses, can also be renamed to suit needs
/* span nobreak */
.ragspannobrk {white-space: nowrap;}
/* span borders small bold */
.ragsspannumb {border:solid 1px; border-radius:4px; padding:0px 4px 0px 4px; font-size: smaller; font-weight: bold;}
to use it, in any tiddler, use:
{{||datafields display template}}