So here’s a fun trick I use that I thought I’d share with other devs working in Builder.io.
I have a component we employ across many pages, and this component contains only custom code. Because of this, I wanted a way to be able to see said code in a large window, but also be able to publish code changes without exiting a modal and losing my place in the code. That’s what it’s like to use Builder.io’s default “fullscreen” code popup/lightbox.
Enter this solution: Click your code element, throw this JavaScript into your dev console, and voila! Fullscreen code view with the “Publish” button always accessible!
The code:
let shoosh = document.querySelector('div[style*="width: 380px;"]') ?? [...document.querySelectorAll('div[style*="width: 300px;"]')].at(-1);
shoosh.style.width = "100vw";
shoosh.style.maxWidth = "100vw";
shoosh.parentElement.firstChild.style.width = 0;
shoosh.querySelector('div.dark-mode-invert').style.height = '75vh';
The result:
Cheers!