# Output Type API
Source: https://dev.arcxp.com/pagebuilder-engine/reference/output-type-api/
Use output types to define the HTML wrapping that is applied to server responses (like `head`, `title`, `meta`, `link`, and `script` tags). You must define anything that is part of the server-generated HTML but is not specific to a page or template in an output type.
When rendering a page, the system uses the `outputType` query parameter to determine which output type handles the request. If no parameter is specified, the system uses the `default` output type.
## Implementation
### Naming
You must store and name an output type in the following format: `/components/output-types/{outputTypeName}.(js|jsx)`
Using that format builds a component where the `{outputTypeName}` portion of the file path represents the name of the output type. The `outputTypeName` value should not contain any periods.
> **Note:**
>
> PageBuilder Engine requires that your output type to contain an element in the body that has an ID value of `fusion-app`, which contains the value `props.children` inside of it. This is the ID that PageBuilder Engine renders the client-side portion of the application into. Without this ID, client-side rendering fails.
### Example
`/components/output-types/default.jsx`
```js
import React from 'react'
export default (props) => {
return (
{props.metaValue('title') || 'Default Title'}
Welcome to PageBuilder Engine!
{props.children}
)
}
```
## Properties
All properties that the `Context` component makes available are also available on output types. See the [Context Component API](https://dev.arcxp.com/pagebuilder-engine/developer-docs/context-component-api) for a list of these properties.
### `children (Array)`
React uses the convention of a property named `children` to define content that should be inserted inside your component. We respect this convention for output types. In this case, the `children` property defines the rendered content of the page. If you want to perform client-side-only rendering, do not include this property in your page.
| Parameters | Returns | Example |
| ---------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| n/a | n/a | /components/output-types/default.jsximport React from 'react' export default (props) => { return ( ...
{props.children}
... ) } |
### `contentCache` \- (_Object_)
This field contains all content-source cache from the server-side render, excluding Components marked with `.static = true`. It will contain different values in each render cycle: In the first render cycle it will be an empty object; In the second render cycle it will contain the fetched data executed in the first render cycle. It will not contain data from fetches executed in the second render cycle or client side render. The value will not change past the server-side render.
The object is comprised of the executed content-source names as top-level keys, their unique request-parameter as second-level keys with each containing the response as data key and cache timestamps.
The value is available in JS/TS and JSX/TSX rendering engines starting from Engine v5.1.4/v6.0.1.
> **Note:**
>
> Arc XP does not recommend using this unless you are fully aware of how it behaves. The main use-case lies with XML and JSON outputTypes, not with HTML renders which should use React Contexts or other techniques to oversee data inside the render.
#### Format
```js
{
[contentSourceName: string]: {
[uniqueParameterKey: string]: {
data: [contentSourceResponse: object];
expires: number; // Epoch timestamp
lastModified: number; // Epoch timestamp
};
};
}
```
#### Example
```js
{
"site-service-hierarchy": {
"{\"feature\":\"header-nav-chain\"}": {
"data": {
"children": [
{
"_id": "/business-technology",
"children": [],
"name": "Business & Technology",
"node_type": "section"
},
{
"_id": "/arts",
"children": [],
"name": "Arts",
"node_type": "section"
},
{
"_id": "/news",
"children": [
{
"_id": "/news/politics",
"name": "Politics",
"node_type": "section"
},
{
"_id": "/news/business",
"name": "Business",
"node_type": "section"
},
{
"_id": "/news/world",
"name": "World",
"node_type": "section"
}
],
"name": "News",
"node_type": "section"
}
],
"_id": "/"
},
"expires": 1747660195512,
"lastModified": 1747659895473
}
}
}
```
### `metaValue() (Function)`
Similar to the `MetaTag` component, but this property returns only the value, not a fully rendered HTML meta tag.
| Parameters | Returns | Example |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| metaValue(name) | This function returns a string with the value of the requested metadata variable (not a fully rendered HTML tag). If no value is found for the provided name parameter, it returns undefined. | /components/output-types/default.jsximport React from 'react' export default (props) => { return ( ... {props.metaValue('title') \|| 'Default Title'} ... ) } |
## Property Components
Property components extend the functionality of output types. This section presents a list of property components, their parameters, return values, and examples.
### `props.CssLinks (Component)`
Also aliased as ``
This component includes the stylesheet ``s for the appropriate page or template and/or output-type. This property inserts a `` reference tag. In the case of page or template, the file name is content hashed to the specific state of the page or template. For inline styles, see ``.
`CssLinks` properties have children so that PageBuilder Engine can generate deterministic IDs for them (unless an ID is already specified). Therefore, we recommend adding a `` as a child of `CssLinks` with a defined ID.
| Parameters | Returns | Example |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| You can invoke the CssLinks component on its own or with children. It renders tags for both the output type stylesheet as well as the template-specific stylesheet.{children} children(linkTag) (_HTML_): Accepts number of script tags in plain HTML containing stylesheet URLs. stylesheetObj (_Object_): A wrapper object containing the outputTypeHref and templateHref key and value pairs. stylesheetObj.outputTypeHref (_String_): The stylesheet URL for CSS included in the Output Type itself. stylesheetObj.templateHref (_String_): The stylesheet URL for CSS included in the components specific to this page or template implementation. | Renders tags for the output type and specified template. | **Without Children**/components/output-types/default.jsximport React from 'react' export default (props) => { return ( ... ... ) }**With Children**/components/output-types/default.jsximport React from 'react' export default (props) => { return ( ... ... ) }**Note:**We do not recommend customizing reference links unless absolutely necessary. If inserting a custom link to the page or template styles, ensure you include id="fusion-template-styles" because that ID is used to update the styles in the case of a newly-published template. |
### `props.Fusion (Component)`
This component includes a special script block that includes PageBuilder Engine-specific values, as well as the server-fetched content cache that is used during client-side refresh to prevent content flashing.
Content refresh may be specifically disabled. This applies only to content that was previously fetched server-side and is available in the content cache; any content that is not in the cache is fetched from the client, regardless. This feature is generally useful only in the case of pre-rendered HTML. On-demand HTML is already aware that its content is fresh and does not attempt client-side fetching.
PageBuilder Engine properties have children so that PageBuilder Engine can generate deterministic IDs for them (unless an ID is already specified). Therefore, we recommend adding a `