When you select a component on the Studio canvas, the right panel switches into a per-element editor. The Data tab (also called Settings) is where you decide what content each component renders.

The right panel also includes a Design tab for styles. At the page level, a separate Page Data view holds the data sources the whole composition can draw from: pinned entries, saved queries, and external data.

This page explains, from a marketer's point of view, what each subsection does and walks through pinning an entry so its fields become bindable inside any component.

The Data tab is only meaningful when an element is selected.

• If nothing is selected, the panel shows the empty state "No element is currently selected. Please select an element to view its properties and make edits."
• If the selected component has no exposed props, the panel shows "This component does not have fields to set data." In that case, the developer must expose props on the component first.
• For Section components, an additional Section field binding area appears so you can map the section's slots and props at once.

When a component is selected, the Data tab renders three accordions, top to bottom:

Component-level switches that change how the element renders (for example, "Show/Hide Hidden Elements"). This is the section to use when you want to toggle behavior without touching individual fields.

The heart of the Data tab. One row per exposed prop on the component. Each row is an input field that opens the Data Picker popover when clicked. The picker lets you bind the prop to one of five data sources, defined in dataSources: DataSource[]:

1. Linked Template Entry: the entry attached to the current template. Use this for the main page content.
2. Additional Entry Data: any extra entries you pinned to the composition from the Page Data view (see below). Tooltip: "These entries are directly pinned to this section. Their data is always rendered regardless of which template uses the section."
3. Contentstack Query: a saved query (built via the Query Builder) that returns a list of entries.
4. Component Default Data: the built-in default values the developer shipped with the component. Useful as fallbacks.
5. Repeater Data: only available inside a Repeater; exposes the current iteration's fields.

A sixth source, Static value, is registered for binding lookups but does not appear as a picker option. Static values exist so that a prop can hold a literal (e.g. a fixed button label or a constant style variant) alongside bound props on the same component. Because they are always a direct input rather than a field reference, they are set by typing into the prop's input directly, not by navigating the picker's data source tree.

HTML-level metadata: the element ID and any custom key/value attributes. Reserved keys (class, style, and Studio-internal attributes) are blocked.

(For Section components, the Attributes accordion is hidden because attributes belong to the children inside the section.)

These three concepts are page-level, not per-component. They appear on the Page Data view (sibling of the right-panel component editor), driven by src/components/PageData/index.tsx. Each one is a card in the empty state and an Accordion once populated:

Card	What it represents	How to add
Pinned Entries	Entries pinned to the composition. Backed by the contentstack data source.	Click the card, or use Link Entry in the Additional Entry Data accordion.
Pinned Queries	Saved Contentstack queries. Backed by the query data source.	Opens the Query Builder modal. Requires the PAGE_DATA_QUERIES SDK capability.
External Data	A schema slot for non-Contentstack data the host app injects at runtime. Backed by the external data source.	Click the card to initialize an empty external data object.

Once any of these are populated, the matching entries, queries, or props become selectable in the per-component Data Picker under Additional Entry Data, Contentstack Query, or Component Default Data respectively.

1. Open the composition and switch the right panel to Page Data.
2. Click the Pinned Entries card (or, if entries are already pinned, the Link Entry button in the Additional Entry Data accordion, test ID link-entry-button).
3. In the entry picker, select one or more entries and confirm. Studio writes them onto the composition via actions.canvas.updateDataSourceEntries.
4. Select a component on the canvas. Open its Data tab.
5. Under Properties, click the prop you want to bind. The Data Picker popover opens.
6. Choose the Additional Entry Data source. Expand the entry you just pinned and pick a field. Studio writes the binding and the canvas re-renders with the field's value.

The entry now travels with the composition: any template that uses this section renders the same pinned content.

• CMS binding: how bindings are serialized into the composition JSON.
• Layers: selecting the right node so the Data tab targets what you intend.
• Design panel: the styles-side counterpart to the Data tab.
• Composition overview: where the Data tab sits in the larger authoring flow.