Responsive Theme Preview
Provides a component that previews pages in various device dimensions, allowing site builders and content editors to see how their content will appear on different devices.
responsive_preview
Install
composer require 'drupal/responsive_preview:^2.3'
Overview
The Responsive Preview module provides a quick and convenient way to preview any page on your Drupal site within the dimensions of popular mobile devices and screen sizes. This is essential for responsive web design workflows, allowing content editors and site builders to verify how content renders across different devices without leaving the browser.
The module integrates seamlessly with Drupal's toolbar, adding a device preview button that reveals a dropdown list of configured devices. Selecting a device opens an iframe overlay displaying the current page at the device's viewport dimensions, complete with proper pixel density scaling. The preview includes controls for rotating between portrait and landscape orientations and displays device information such as dimensions and DPI.
For node edit forms, the module provides special integration that allows previewing unsaved content changes by triggering the node preview functionality before displaying in the responsive preview frame. This ensures editors can see exactly how their changes will appear on mobile devices before saving.
Features
- Preview any page in various device viewport dimensions using an iframe overlay
- Toolbar integration with dropdown device selector accessible from any non-admin page
- Support for device rotation between portrait and landscape orientations
- Configurable device library with pre-configured popular smartphones and tablets
- Device management admin interface for adding, editing, deleting, and reordering devices
- Integration with node edit forms to preview unsaved content changes
- Responsive preview block for placement anywhere on the site
- Automatic scaling for non-responsive pages to simulate actual device rendering
- Support for Drupal core Navigation module via optional submodule (Drupal 10.3+)
- Keyboard shortcut (Esc key) to close preview
- Clean preview mode that hides toolbar, navigation, and contextual links in iframe
Use Cases
Content Editor Mobile Preview
A content editor is creating a new article with images and complex formatting. Before publishing, they click the responsive preview button in the toolbar, select 'iPhone XS' from the dropdown, and see exactly how the content will appear on mobile devices. They notice an image is too wide and adjust it before saving, ensuring a good mobile experience.
Theme Developer Responsive Testing
A theme developer is building a responsive Drupal theme and needs to test breakpoints across multiple devices. They use responsive preview to quickly switch between phone, tablet, and desktop viewports without needing physical devices or browser DevTools, speeding up their development workflow.
Client Demonstration
A site builder is presenting a new website to a client. Using responsive preview, they demonstrate how the site looks on various devices during a screen share session, rotating between portrait and landscape orientations to show the responsive design adapts properly.
QA Testing on Node Edit Forms
A QA tester is verifying responsive behavior of draft content. On the node edit form, they click a device in the responsive preview dropdown. The module triggers the node preview system and displays the unsaved content in the responsive preview frame, allowing testing of unpublished changes.
Custom Device Configuration
An agency frequently builds sites for a specific enterprise client whose employees use a particular tablet model. The site administrator adds a custom device profile matching those exact dimensions and pixel density, ensuring previews accurately represent the target devices.
Tips
- The preview only shows devices that can fit within your current browser window width. If a device is disabled/grayed out, widen your browser window.
- Use the Esc key to quickly close the responsive preview overlay.
- Click on the device label in the preview frame to toggle display of detailed device specifications.
- The preview respects the site's viewport meta tag - responsive sites scale differently than fixed-width sites.
- For Navigation module users (Drupal 10.3+), enable the Responsive Preview Navigation submodule for integrated top bar controls.
- Device dimensions are specified in physical pixels, not CSS pixels. A 1125x2436 iPhone XS at 3dppx displays as 375x812 CSS pixels.
- The module automatically hides the toolbar, navigation, and contextual links inside the preview iframe for a clean view.
Technical Details
Admin Pages 4
/admin/config/user-interface/responsive-preview
Main administration page for managing responsive preview devices. Displays a draggable table listing all configured devices with their dimensions and status. Allows reordering devices via drag-and-drop, toggling device visibility in the preview list, and provides operations for editing and deleting devices.
/admin/config/user-interface/responsive-preview/add
Form for creating a new device profile for responsive preview. Allows specifying device name, dimensions, pixel density, and default orientation.
/admin/config/user-interface/responsive-preview/{device}/edit
Form for modifying an existing device profile's settings including dimensions, pixel density, and visibility.
/admin/config/user-interface/responsive-preview/{device}/delete
Confirmation form for permanently removing a device profile from the system.
Permissions 2
Hooks 4
hook_toolbar
Implements hook_toolbar() to add responsive preview tab to the Drupal toolbar. Adds device selector dropdown with preview controls.
hook_theme
Implements hook_theme() to register the item_list__responsive_preview theme template for rendering the device list.
hook_form_alter
Implements hook_form_alter() to add AJAX-based responsive preview triggering to node edit forms, enabling preview of unsaved content.
hook_preprocess_html
Implements hook_preprocess_html() to remove toolbar, navigation, and contextual links when viewing content in responsive preview mode.