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.
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';