Render

Last updated Jun 18, 2026 View as Markdown Agent setup

The Render component is used 4091 times on 1961 pages.

See all examples of pages that use Render

Used 4091 times.

Pages

Partials

The Render component allows us to include a "partial", a reusable Markdown snippet, onto a page.

It also accepts parameters that can be used as variables within the partial, so that even content which needs slight differences between usages can be turned into a partial.

Component

import { Render } from "~/components";

<Render
	file="simple-props"
	product="style-guide"
	params={{
		name: "world",
	}}
/>

Inputs

file string

This should be the name of the partial, without the containing directory or file extension. For example, /partials/style-guide/hello.mdx would be file="hello".
product string

This should be the folder within src/partials.
params object optional

If you wish to substitute values inside your partial, you can use pass params which can be referenced in your partial. Refer to properties.

Properties

Defining expected properties in frontmatter

Anything defined in the params property of the Render component is available inside the partial, using JavaScript expressions ↗.

To protect against required properties being missed, any partial that relies on params should also define params in the partial's frontmatter. This should be an array of strings, matching the property names you expect. If a property is optional, such as for conditional content, add a ? to the end of the name.

---
params:
  - product
  - deprecated?
---

For each of the below examples, you can open the dropdown to view the partial's content.

Properties as a plain string

The below example would render Hello, world!.

simple-props.mdx

---
params:
  - name
---

Hello, {props.name}!

import { Render } from "~/components";

<Render file="simple-props" product="style-guide" params={{ name: "world" }} />

Properties in Markdown syntax

When using JavaScript expressions, you are now "inside JSX" and cannot use traditional Markdown syntax. Similarly, you cannot use a JavaScript expression inside Markdown syntax.

Ideally, you should not use Markdown syntax, such as **strong** or [text](link), with properties. If using JSX is not feasible, there is a Markdown component that will take a text property.

The MDX documentation ↗ includes a mapping of common Markdown syntax to their equivalent JSX elements.

Strong

strong-in-props.mdx

---
params:
  - dont
  - do
---

**Don't do this!**

{props.dont}

**Do this!**

<strong>{props.do}</strong>

import { Render } from "~/components";

<Render
	file="strong-in-props"
	product="style-guide"
	params={{ do: "Text", dont: "**Text**" }}
/>

Links

link-in-props.mdx

---
params:
  - link
---

**Don't do this!**

This will link to `/style-guide/components/%7Bprops.link%7D`.

[Markdown link]({props.link})

**Do this!**

This will link to `style-guide/components/render/#links`.

<p>
	<a href={props.link}>JSX link</a>
</p>

import { Render } from "~/components";

<Render
	file="link-in-props"
	product="style-guide"
	params={{
		link: "/style-guide/components/render/#links",
	}}
/>

Images

image-in-props.mdx

---
params:
  - image
---

**Don't do this!**

`![Alt text]({props.image})`

**Do this!**

<img src={props.image} alt="Alt text" />

import { Render } from "~/components";

<Render
	file="image-in-props"
	product="style-guide"
	params={{ image: "/logo.svg" }}
/>

Code blocks

code-in-props.mdx

---
params:
  - code
---

import { Code } from "~/components";

#### Inline

**Don't do this!**

`{props.code}`

**Do this!**

<p>
	<code>{props.code}</code>
</p>

<hr />

#### Codeblocks

**Don't do this!**

```js
{
	props.code;
}
```

**Do this!**

<Code code={props.code} lang="js" />

import { Render } from "~/components";

<Render
	file="code-in-props"
	product="style-guide"
	params={{ code: "export const foo = 'bar';" }}
/>

Properties to render content conditionally

Anything that you can represent in a JavaScript expression can be used in your conditional logic.

This may be the and (&&) operator ↗ or ternary (? ... : ... ) operator ↗, the below example uses both.

optional-props.mdx

---
params:
  - product
  - deprecated?
---

{
props.deprecated && (
<p>
<strong>
{props.product} is deprecated, please use alternative products.
</strong>
</p>
)
}

{
props.product === "Thing Three" ? (
<p>Welcome to our Thing Three launch countdown!</p>
) : (
<p>Welcome to the {props.product} landing page.</p>
)
}

import { Render } from "~/components";

<Render
	file="optional-props"
	product="style-guide"
	params={{ product: "Thing", deprecated: true }}
/>

<hr />

<Render
	file="optional-props"
	product="style-guide"
	params={{ product: "Thing Two" }}
/>

<hr />

<Render
	file="optional-props"
	product="style-guide"
	params={{ product: "Thing Three" }}
/>

Was this helpful?