--- description: Render reusable partial content from other files. title: Render image: https://developers.cloudflare.com/style-guide/build-the-page/components/render/og.png?v=753afa1584bd702e --- [Skip to content](#main-content) > Documentation Index > Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt > Use this file to discover all available pages before exploring further. # Render Last updated Aug 25, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/render/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/) The `Render` component is used `3912` times on `1827` pages.

See all examples of pages that use 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 ```mdx import { Render } from "~/components"; ``` ### 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). ## 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. ```mdx --- params: - product --- ``` Note Partials must use `params` only for simple value substitution (for example, `{props.name}`). Do not use conditional or branching logic (such as `&&`, ternary `? :`, or comparisons like `===`) inside a partial. If content needs to differ between call sites, create a separate partial for each variation instead. 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

```mdx --- params: - name --- Hello, {props.name}! ```

```mdx import { Render } from "~/components"; ``` ### 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/build-the-page/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

strong-in-props.mdx

```mdx --- params: - dont - do --- **Don't do this!** {props.dont} **Do this!** {props.do} ```

```mdx import { Render } from "~/components"; ``` #### Links

link-in-props.mdx

```mdx --- params: - link --- **Don't do this!** This will link to `/style-guide/build-the-page/components/%7Bprops.link%7D`. [Markdown link]({props.link}) **Do this!** This will link to `style-guide/components/render/#links`.

JSX link

```

```mdx import { Render } from "~/components"; ``` #### Images

image-in-props.mdx

```mdx --- params: - image --- **Don't do this!** `![Alt text]({props.image})` **Do this!**

```

```mdx import { Render } from "~/components"; ``` #### Code blocks

code-in-props.mdx

````mdx --- params: - code --- import { Code } from "~/components"; #### Inline **Don't do this!** `{props.code}` **Do this!**

{props.code}

#### Codeblocks **Don't do this!** ```js { props.code; } ``` **Do this!**


````



```mdx
import { Render } from "~/components";


```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/render/#page","headline":"Render","description":"Render reusable partial content from other files.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/render/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/render/og.png?v=753afa1584bd702e","dateModified":"2026-08-25","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```