How to change Ctrl/Cmd+Shift+V shortcut to View on frontend in Bricks

Ctrl+Shift+V is a common keyboard shortcut in Windows for pasting plain text i.e., without formatting. That is the same shortcut that Bricks builder editor uses to view the current page/post/template being edited on the frontend.

We can change this shortcut to Ctrl/Cmd+Alt+V to free up Ctrl+Shift+V for pasting plain text (on a PC).

Here’s how.

Create a directory named js in your child theme directory.

Create a file inside that named say, builder-view-shortcut.js having the following code:

( () => {
	'use strict';

	/**
	 * Remap "View on frontend" from Ctrl+Shift+V to Ctrl+Alt+V.
	 *
	 * Bricks registers its keydown handler on the iframe document in the
	 * bubble phase.  We register in the capture phase so we always fire first.
	 *
	 * New shortcut : Ctrl+Alt+V   (Win) / Cmd+Option+V (Mac)
	 * Blocked      : Ctrl+Shift+V (Win) / Cmd+Shift+V  (Mac) — restored to
	 *                browser-native paste-without-formatting.
	 */

	const isMac = /Mac|iPhone|iPod|iPad/.test( navigator.platform );

	/**
	 * Capture-phase keydown handler.
	 *
	 * @param {KeyboardEvent} e
	 */
	const handleKeydown = ( e ) => {
		// Use e.code (physical key) instead of e.key because on Mac,
		// Option+V produces "√" rather than "v" for e.key.
		if ( e.code !== 'KeyV' ) {
			return;
		}

		const hasMod = isMac ? e.metaKey : e.ctrlKey;

		if ( ! hasMod ) {
			return;
		}

		// New shortcut: Ctrl+Alt+V → view on frontend.
		if ( e.altKey && ! e.shiftKey ) {
			e.preventDefault();
			e.stopPropagation();
			e.stopImmediatePropagation();

			const anchor = window.top.document.querySelector( '#bricks-toolbar .new-tab a' );

			if ( anchor ) {
				anchor.click();
			}

			return;
		}

		// Block Bricks from hijacking Ctrl+Shift+V.
		// Do NOT preventDefault — let the browser paste without formatting.
		if ( e.shiftKey && ! e.altKey ) {
			e.stopPropagation();
			e.stopImmediatePropagation();
		}
	};

	/**
	 * Attach the capture-phase listener to a document.
	 *
	 * @param {Document} doc
	 */
	const attachTo = ( doc ) => {
		doc.addEventListener( 'keydown', handleKeydown, true );
	};

	// Main builder frame.
	attachTo( document );

	// Canvas iframe (where Bricks' own listener lives).
	const iframe = document.getElementById( 'bricks-builder-iframe' );

	if ( iframe ) {
		iframe.addEventListener( 'load', () => {
			try {
				attachTo( iframe.contentDocument );
			} catch {
				// Same-origin guard.
			}
		} );

		// Iframe may already be loaded.
		try {
			if ( iframe.contentDocument?.readyState === 'complete' ) {
				attachTo( iframe.contentDocument );
			}
		} catch {
			// Ignore.
		}
	}
} )();

Load the above JavaScript in the Bricks editor by editing child theme’s functions.php and replacing

add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}
} );

with

add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}
	
	// Enqueue builder keyboard shortcuts
	if ( bricks_is_builder_main() ) {
		// Remap "View on frontend" from Cmd/Ctrl+Shift+V to Cmd/Ctrl+Alt+V.
		wp_enqueue_script(
			'bl-builder-view-shortcut',
			get_stylesheet_directory_uri() . '/js/builder-view-shortcut.js',
			[ 'bricks-builder' ],
			filemtime( get_stylesheet_directory() . '/js/builder-view-shortcut.js' ),
			true,
		);
	}
} );

Save your work and reload the Bricks editor. Press Ctrl/Cmd+Alt+V to see the current item open in a new tab for preview.

Credit for the JavaScript code: Claude AI.