This module improves the editing experience for the Paragraphs module by showing an accurate preview of content within an iframe. This iframe uses your site's theme, ensuring the preview closely matches how the content will appear on the live website, even for nested paragraphs.
This module renders paragraph previews in a collapsed state inside an iframe, using the frontend theme to closely match the final rendered output. Nested paragraphs are also supported.
Context
When editing a node, paragraphs can be collapsed — either by default or by clicking the Collapse button.
In the Form display settings of a paragraphs field, you can choose what should be shown when a paragraph is collapsed:
- a summary
- or a preview
Without this module, when the Preview option is selected, the preview is rendered using the admin theme. As a result, the preview does not accurately reflect how the paragraph will look on the frontend. This module solves this.
Post-Installation
- In the form display settings of the paragraph field, set "closed / collapsed mode" to "Preview", not "Summary".
- For an even better experience, set "default edit mode" to "Closed / collapsed" so that the preview is displayed by default when loading the node edit form.
- For an optimal user experience, and to make the preview look as close as possible to the final result, you may need to make a few adjustments to your CSS and JavaScript, and reconsider where you attach your libraries. Indeed, only the paragraph markup is rendered in the iframe so any CSS or JS based on other page context or wrapping markup will not apply. See README.md for more explanation on this.
Additional Requirements
Similar projects
- Paragraphs Previewer
provides a button to preview the paragraph inside a modal, where this module replaces the collapsed mode preview with an iframe.