What are Markdoc components in the API Portal?

Markdoc components are tags you place in portal pages to render dynamic content, such as a product card, a plan comparison table, or a contact form, without writing code.

How do I see every Markdoc component in my portal?

Open three routes on your live portal: /kitchen_sink lists the components, /kitchen_sink/examples shows worked examples, and /kitchen_sink/css shows the CSS reference.

How do I add a product card to a page?

Write the productCard tag with a slug, for example a fenced productCard tag whose slug attribute is the product slug. It renders that product's card inside the page.

What is the difference between productCard and productCards?

productCard renders one product by slug. productCards renders several products at once, controlled by numberOfProducts, which defaults to two.

Can I show a plan comparison table in a page?

Yes. Use the productPlanTable tag with the product slug. It renders that product's plans and their features as a comparison table.

Where do Markdoc variables like isAuthenticated come from?

The portal supplies them at render time. Variables are prefixed with a dollar sign, and you read them in tags such as an if that checks $isAuthenticated to show content only to signed-in developers.

API Portal

Markdoc components

The Markdoc components and variables you can use in API Portal pages: product cards, plan tables, articles, buttons, and the live discovery routes that show every component in your own portal.

Markdoc components are tags you place in API Portal pages to render dynamic content, such as a product card or a plan table, from your portal's own data. You write them in the page editor. They render in the live portal.

How do you discover every component in your portal?

Open three routes on your live portal. Each one renders against your real theme and data, so you see exactly what a component looks like in your portal before you use it.

Route	What it shows
`/kitchen_sink`	The component gallery, with each component rendered.
`/kitchen_sink/examples/:example`	A worked example for a named component.
`/kitchen_sink/css`	The CSS reference for portal classes and variables.

What variables can you use in a page?

Variables are prefixed with a dollar sign and supplied by the portal at render time. Read them in tags, most often inside an if to show content only to the right audience. The authentication state is the one you reach for most.

Variable	What it holds
`$isAuthenticated`	Whether the visitor is signed in. Wrap an `if` around content to gate it.
`$heroText1`, `$heroText2`	The hero heading and subheading from the theme.
`$heroDescription1`, `$heroDescription2`	The longer hero copy from the theme.
`$ctaButton1`, `$ctaButton2`	The call-to-action button labels from the theme.
`$heroImage`	The hero image set in the theme.
`$showVideo`, `$videoUrl`, `$videoText`	The landing page video toggle, source, and caption.
`$productText1`, `$productText2`, `$productsLink`	The products area copy and link from the theme.

Which components can you use?

These are the tags the portal renders, confirmed in the component registry. Product tags pull from your products, article tags from your content, and the rest are layout and form helpers. Attributes shown are the ones the schema defines.

Tag	What it renders	Key attributes
`productCard`	One product's card.	`slug`, `tags`
`productCards`	Several product cards.	`numberOfProducts` (default 2)
`productFeatures`	A product's feature list.	`slug`
`productPlanTable`	A product's plans as a comparison table.	`slug`
`productDocumentation`	A product's documentation block.	`slug`
`articleCard`	One article's card.	`slug`, `tags`
`articlesCollection`	A collection of articles.	`collection`, `view` (`card` or `list`)
`roundedButton`	A button or link.	`target`, `variant` (`primary` or `secondary`), `scrollToId`, `rounded`
`linkwrap`	Wraps content in a link.	`link`, `target`
`contactForm`	A contact form.	`label` (default `Contact Us`), `mode` (`modal` or `inline`)

Tabs are available too: a tabs tag wraps one or more tab tags to lay content out in tabbed panels.

How do you write a component tag?

Each component is a Markdoc tag: a tag name followed by its attributes. Tags that render on their own, such as a product card, are self-closing. You place a tag in a page where you want it to render.

Product card. The productCard tag with slug="your-product-slug" renders that product's card, themed to match.
Several products. The productCards tag with numberOfProducts=2 renders a set of cards. It defaults to two when you leave the attribute off.
Plan comparison. The productPlanTable tag with slug="your-product-slug" renders a product's plans and features as a comparison table.
Contact form. The contactForm tag renders a form. Set mode="inline" to place it in the page or mode="modal" to open it in a dialog, and label for the button text.

Where to next

Portal pages

Create the pages where you write these components.

Custom CSS and Markdoc partials

Reuse component blocks across products and restyle them with custom CSS.

Theme

Set the colours and typography the components render with.

Portal localization

Translate the portal's system strings into another language.