User Guide / Previews

Preview Output Transformation

It is possible to add a transformation step to the preview rendering process to allow for post-processing of the HTML output before it is displayed in the inspector.

The transformed HTML will be used in the preview and displayed in the HTML output tab of the preview inspector.

Specifying a transformer

Use the @after_render tag to specify a private transformer method, referenced via its symbolized name.

# @after_render :transformer_method_name
class FooComponentPreview < ViewComponent::Preview
  # @after_render :wrangle_html
  def default


  def wrangle_html(html, context)

The @after_render tag can be applied at the scenario or preview class level. When set at the class level all scenarios within the class will be run through the specified transformer method.

The transformer method

The transformer method is called with two arguments:

  • html: The rendered HTML (as a string)
  • context: Object of render context data

The method should return a string of transformed HTML to be displayed in the preview inspector.

User Guide

Extending Lookbook