I want to render as HTML not string on Twig. I have a variable that hold form HTML but after putting on Twig template it's render as string like given below:

1) Set loginpopup variable in preprocess hook.

function MYTHEMENAME_preprocess_page(&$variables) {
    $variables['loginpopup'] = array(
   '#plain_text' => "<div style='display:none'><div id='login-pop'>".drupal_render($form)."</div></div>"

2) Render on Twig template file as :

 {{ loginpopup }}   

But it's visible as string (i.e. double-escaped).. What's the problem and how do I fix it?

enter image description here

  • Btw. You should use \Drupal::service('renderer')->renderRoot() instead of deprecated drupal_render().
    – kenorb
    Commented Aug 5, 2017 at 11:02

2 Answers 2


You should not render in a preprocess function.

Wrap the additional container around your $form and put this into your variable:

function MYTHEMENAME_preprocess_page(&$variables) {
  $variables['loginpopup'] = array(
    '#type' => 'container',  
    '#prefix' => '<div class="visually-hidden"><div id="login-pop">',
    '#suffix' => '</div></div>',
    'form' => $form,

The style attribute is filtered by the xss filter. You can use the class visually-hidden, this is in drupal predefined.


You should definitely NOT put HTML into render arrays (I'm not saying you cannot (you can with #prefix and #suffix), you just shouldn't - that's D7 thinking). You should define a theme hook/template for that so that you can use your own template. But if you have to use inline template:

$page['noscript'] = [
  '#type' => 'inline_template',
  '#template' => '<noscript><div>{{ message }}</div></noscript>',
  '#context' => [
    'message' => $noscript_message,
  • Sorry but this is incorrect - core puts HTML in render arrays all the time. #prefix, for example, is very prevalent throughout the core codebase, and contains HTML.
    – Clive
    Commented Dec 1, 2015 at 10:22
  • @Clive the guidelines is to only put very basic HTML in render arrays. The recommendation is to use a template or inline template. Though I think #markup works as well.
    – Eyal
    Commented Dec 1, 2015 at 10:52
  • "only put very basic" != "definitely NOT" @Eyal, those are very different statements :) As written this answer is misleading, but can easily be made correct with a small edit when the OP is willing to do so
    – Clive
    Commented Dec 1, 2015 at 10:57
  • Could you expand on your opinion that you shouldn't use HTML in #prefix and #suffix? I'm having a hard time reconciling that statement when there's so much of it in D8 core code? Specifically, it would be good to know what makes you think that it's "D7 thinking" when there's so much of it in D8? I'm not saying you're wrong, but so far all the evidence points to the opposite, if there really are guidelines on this I'd be very interested to see them, and obviously raise the relevant bug reports for Drupal failing to meet its own guidelines internally
    – Clive
    Commented Dec 1, 2015 at 12:05
  • People use #prefix or #suffix as quick solution. It works just fine but soon you may find yourself being limited by that and not being able to have a proper structure so you will implement form form alteration to solve your current situation whereas if you would just provide template(either for that particular element or the whole thing) you could have saved yourself some time and pain and just simple altere the HTML structure in the template. I've too recently fond myself in this situation with a form so this is a practical advice, not theoretical.
    – user21641
    Commented Dec 1, 2015 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.