---
title: "render · RUAL Documentation"
description: "Sends the combined HTML to the frontend and renders the page into React components."
canonical: https://docs.rual.nl/block-types/state%20ui/state_render_page
language: en
---

[Cluster](https://docs.rual.nl/cluster)

[Blocks](https://docs.rual.nl/block-types)

[Interfaces](https://docs.rual.nl/interfaces)

[Blueprints](https://docs.rual.nl/blueprints)

[Tutorials](https://docs.rual.nl/tutorials)

[Home automation](https://docs.rual.nl/home-automation)

[Examples](https://docs.rual.nl/examples)

[Reference](https://docs.rual.nl/reference)

[Architecture](https://docs.rual.nl/architecture)

[Troubleshooting](https://docs.rual.nl/troubleshooting)

Other

# render

This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v10.4.28`](https://docs.rual.nl/core-versions/100428).

Sends the combined HTML to the frontend and renders the page into React components.

- flow `flow`

- connection required `httpconnection`

- title required `value` The title of this web page.

- description required `value` A small description of the web page.

- body required `state` The default HTML displayed on this page. We will serve the main base using SSR (Server Side Rendering).

- onload `execute_function` This function will trigger when the page has been loaded succesfully and the viewer supports websockets. Using this event makes the page create a WebSocket connection each render, if you don't really need to, don't use it.

| `return` |
| --- |

A typical wiring for [render](https://docs.rual.nl/block-types/state%2520ui/state_render_page): a [function trigger](https://docs.rual.nl/block-types/globals/trigger_custom_function) starts the flow; [container](https://docs.rual.nl/block-types/state%2520ui/state_container) feeds the `content` pin; [translate key](https://docs.rual.nl/block-types/translations/value_translate_key) feeds the `title` pin; [concatenate values](https://docs.rual.nl/block-types/value/value_concatenate) feeds the `description` pin; the function out pin wires to an [execute](https://docs.rual.nl/block-types/function%2520execution/function_custom_execute_from_trigger) block.

[![Studio canvas example for the render block: typical wiring for render.](https://docs.rual.nl/canvas-examples/state_render_page.png)](https://docs.rual.nl/canvas-examples/state_render_page.png?v=3)

## Commonly used with

In production blueprints, this block is most often wired together with:

- [new page](https://docs.rual.nl/block-types/state%20ui/state_page): feeds into this block. Allowes you to create a dynamic web page on the given URL.

- [container](https://docs.rual.nl/block-types/state%20ui/state_container): feeds into this block. A div with the class container on it by default.

- [translate key](https://docs.rual.nl/block-types/translations/value_translate_key): feeds into this block. Translates a given key.

- [div](https://docs.rual.nl/block-types/state%20ui/state_div): feeds into this block. Creates a dynamic and customizable div element on your web page.

- [concatenate values](https://docs.rual.nl/block-types/value/value_concatenate): feeds into this block.

- [value](https://docs.rual.nl/block-types/value/value_default): feeds into this block. Simply returns the provided value.

## Used in these guides

These documentation pages use or explain this block:

- [Quickstart](https://docs.rual.nl/getting-started/quickstart)

- [Block Quick Reference](https://docs.rual.nl/reference/block-quick-reference)

- [Finding Blocks](https://docs.rual.nl/block-types/finding-blocks)

## Version history

Introduced in [`v10.4.28`](https://docs.rual.nl/core-versions/100428).

- [Back to `state ui`](https://docs.rual.nl/block-types/state%20ui): Return to the main group to view all sub-groups

- [Back to `state paging`](https://docs.rual.nl/block-types/state%20ui?group=state%20paging): Return to the group to view all blocks within this group

Was this page helpful? [Tell us what to improve](https://docs.rual.nl/support) · RUAL Docs is an integral component of the [RUAL ecosystem](https://rual.nl)