---
title: Render · Cloudflare Style Guide
description: The Render component allows us to include a "partial", a reusable Markdown snippet, onto a page.
lastUpdated: 2025-03-06T20:33:22.000Z
source_url:
  html: https://kian-pcx-16407.preview.developers.cloudflare.com/style-guide/components/render/index.md
  md: https://kian-pcx-16407.preview.developers.cloudflare.com/style-guide/components/render/
---

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

### 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 optional

  By default, it will look for partials in the same product folder as the current page. You can use this to specify a different product.

  Warning

  When using the `Render` component inside partials, the original `product` is lost.

  For example, if there are three files:

  1. `docs/fundamentals/index.mdx`

  2. `partials/dns/thing.mdx`

  3. `partials/dns/thing2.mdx`

  `docs/fundamentals/index.mdx` uses `<Render file="thing" product="dns" />`

  `partials/dns/thing.mdx` must use `<Render file="thing2" product="dns" />` as `product` cannot be inferred.

* `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).

## Properties

### Defining expected properties in frontmatter

Anything defined in the `params` property of the `Render` component is available inside the partial, using [JavaScript expressions](https://mdxjs.com/docs/using-mdx/).

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](#properties-to-render-content-conditionally), add a `?` to the end of the name.

```mdx
---
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!`.

### 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`](https://developers.cloudflare.com/style-guide/components/markdown/) component that will take a `text` property.

The [MDX documentation](https://mdxjs.com/table-of-components/#components) includes a mapping of common Markdown syntax to their equivalent JSX elements.

#### Strong

#### Links

#### Images

#### Code blocks

### 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) or [ternary (`? ... : ... `) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator), the below example uses both.
