You are here

Example: Render API in Examples for Developers 8

Same name and namespace in other branches
  1. 7 render_example/render_example.module \render_example
  2. 3.x modules/render_example/render_example.module \render_example

The Render API consists of two parts: one, structured arrays that provide data, and hints about how that data should be rendered, and two, a rendering pipeline that can be used to render these arrays into various output formats. This example module looks at how to define content using render arrays, as well as how to use alter hooks to manipulate render arrays created by other modules.

For more on the rendering pipeline see The Drupal 8 Render Pipeline.

In order to ensure that a theme can completely customize the markup output by Drupal, module developers should avoid directly writing HTML markup for pages, blocks, and other user-visible output in their modules, and should instead return structured "render arrays". Checkout the example code in \Drupal\render_example\Controller\RenderExampleController::arrays() for an explanation of how to define new renderable arrays. The output from that code can be viewed at examples/render_example/arrays.

One of the primary benefits of using arrays to define content instead of strings of HTML is that arrays are easier to manipulate. There are dozens of hooks, and other ways to gain access to and manipulate existing render arrays during the rendering process both from within a module, and via a theme. As a rule of thumb the process of rendering an array into HTML is delayed for as long as possible. In most cases it's not until the variable containing the content to be rendered is printed out in a Twig template file that it is finally rendered.

For examples of altering render arrays checkout the code in render_example_preprocess_page() and render_example_preprocess_block(). There is a form at examples/render_example/altering that can be used to turn these features on and off if you would like to see the results of the array altering code on your site.

This module contains code that can display the render array used to build each page, and/or block, as you navigate through a site as a way to show some examples of real render arrays being used. This functionality requires that the Devel module be installed in order to work.

Modules can also provide new render element types. A powerful way to encapsulate complex display logic into a reusable widget. This can help to cut down on code repetition, and allow other module developers to build off of your work. See an example of a new render element definition by looking at \Drupal\render_example\Element\Marquee.

Forms are generated using a superset of the Render API. You can see examples of how the Render API is used when creating forms in the fapi_example module.

See also

Render API overview

\Drupal\Core\Render\RendererInterface::render()

\Drupal\Core\Template\TwigExtension::renderVar()

Parent topics

File

render_example/render_example.module, line 8
Demonstrates using Drupal's Render API.

Functions

Namesort descending Location Description
render_example_preprocess_block render_example/render_example.module Implements hook_preprocess_block().
render_example_preprocess_page render_example/render_example.module Implements hook_preprocess_page().
render_example_theme render_example/render_example.module Implements hook_theme().

Classes

Namesort descending Location Description
RenderExampleController render_example/src/Controller/RenderExampleController.php Provides module description page and examples of building render arrays.
RenderExampleDemoForm render_example/src/Form/RenderExampleDemoForm.php Provides the form for toggling module features on and off.
RenderExampleMenuTest render_example/tests/src/Functional/RenderExampleMenuTest.php Test the user-facing menus in Render Example.
RenderExampleTest render_example/tests/src/Functional/RenderExampleTest.php Test the render example functionality.

Files

Namesort descending Location Description
render-example-marquee.html.twig render_example/templates/render-example-marquee.html.twig Default theme implementation for the marquee render element.