Responsive viewports with iframes

Created on 19 August 2025, 18 days ago

Problem/Motivation

Follow-up of ✨ Manage breakpoints & add viewports switcher Active . We may need to use iframe HTML element in Builder & Preview, in order to let the browser recalculate the viewport dimension.

Proposed resolution

So, with an HTTP HTML endpoint to open only a display builder instance, with a specific profile and only one island, whatever this island is. The island rendering on the main window will "only" be a iframe to this HTTP HTML endpoint.

Careful:

In general, about performance issue and implementation complexity
Do the islands in the iframe react well to HTMX events from the main page? And the other way around? We may need ✨ Add real-time collaboration Active to land and maybe move OOB swap to SSE
Can we drop a draggable to an an iframe island with SortableJS? This may be the main challenge to overcome.

A commit was already pushed in a dedicated branch of ✨ Manage breakpoints & add viewports switcher Active : https://git.drupalcode.org/issue/display_builder-3538435/-/tree/iframes

Remaining tasks

This is related to ✨ Theming Display Builder Active

✨ Feature request

Status

Active

Version

1.0

Component

Main / Misc.

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.

display_builder-1.0.0-beta

Merge Requests

!84Responsive viewports with iframes
Open
🇫🇷France pdureau
updated 13 days ago

Comments & Activities

Issue created by @pdureau
Comment 16 days ago →
🇫🇷France pdureau Paris
Maybe we can do it only for preview panel :)
Merge request !84Investigation about iframes → (Open) created by pdureau
Comment 13 days ago →
🇫🇷France pdureau Paris
The commit from ✨ Manage breakpoints & add viewports switcher Active has been cherry-picked and the MR opened

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024