Skip to content

View data components

Canonical family page for every view component. Replaces the one-sentence stubs. Inputs are on Add/Update data components. Comments stay on Comments.

Use a view component when the user should read a value or a layout block. Use an input when they should change it.

The screen is Details, Content, a list row, or the read-only part of an update screen. The property exists if the block is data-backed.

  1. Add component → pick the type in the table.
  2. Bind the property when required.
  3. Set visibility.
  4. Preview empty and filled states.
Type Enum Property Type-specific controls When to use
Details DETAILS Record Layout of the details header The built-in details chrome
View data VIEW_DATA Any displayable Label, empty text Generic read-only value
Metric card METRIC_CARD Number / rollup / formula Label, comparison, format KPI on details or content
Media gallery MEDIA_GALLERY Files Image vs video, captions Multiple files as a gallery
Status timeline STATUS_TIMELINE Status / select + dates Sort History of status changes
Unique ID chip UNIQUE_ID_CHIP unique_id (stored as text) Copy-to-clipboard Show the Notion unique id
Show image SHOW_IMAGE Files / URL Style, fill, orientation One image
Show video SHOW_VIDEO Files / URL Poster One video
Show toggle SHOW_TOGGLE Checkbox On/off labels Read-only checkbox
Show URL SHOW_URL URL Open in new tab Clickable link
View file VIEW_FILE Files Download Non-image files
Contact CONTACT Email / phone email / phoneNumber subcomponents Tap to mail or dial
Heading HEADING — Overlay vs normal Section title
Label LABEL — Size Helper text
Divider DIVIDER — — Visual break
Section SECTION — Title, stepper membership Group fields (forms)
HTML block HTML_BLOCK — HTML Custom markup on content/details
Show page content SHOW_PAGE_CONTENT Page TOC, guest vs signed-in Notion page body
Show user SHOW_USER People / user (as text) — Display who is on the row
View location VIEW_LOCATION Location Map type Map pin
View address VIEW_ADDRESS Address — Formatted address
View signature VIEW_SIGNATURE Signature — Signed image

How-tos for Metric card, Media gallery, Status timeline, and Unique ID chip remain short jobs that link to this table.

They see the current value, or the empty state you configured. They cannot change the Notion property from a view component. Buttons and comments are separate types.

  • unique_id is mapped to text. The chip is display + copy, not an editor.
  • People / created_by / last_edited_by are mapped to text. Show user displays that string; it is not a live Notion people picker.
  • Files are mapped to URL internally. Preview still works when the file is a Notion file.
  • Formula and rollup display as text (or number when the metric card can parse them). They never write back.
  • HTML block is not a replacement for a Content screen. Prefer Content for landing pages.
  • Show page content freshness follows Reload and sync.

A client details screen: Heading “Delivery”, Unique ID chip, Status timeline, Media gallery of files, Show page content for the brief, Contact for the PM.

Symptom Likely cause What to do
Metric card is blank Property is not numeric Bind a number, or a rollup that returns a number.
Unique ID chip empty Database has no unique_id, or not synced Add the property in Notion. Sync.
Page content stale Blocks not re-fetched Reload page content. See sync manual.
People shows a raw id Mapped as text That is expected. Use a User input if you need a picker.

Inputs: Add/Update data components. Page body: Show Page Content. Content screens: Content.