Keyboard shortcut for enable preview

I have quite large pages - And sometimes I prefer not to have the design update on every change.

Therefore, would it be a possibility - hit @Martin - to have the following:

Enable/Disable preview by Hotkey, for example Ctrl+T - but changeable in settings.

And if possible, a toggle fo "only render preview on save (Ctrl+S) and hotkey (Ctrl+U)".

Then I can have the preview open on my other screen, edit in BSS - without refreshing every time I move an element around. And then when I either press Ctrl+S to save - or press Ctrl+U (or whatever i set as my update hotkey) - The preview will be triggered.

At the moment, I have to go to the Preview toggle and toggle it on and off 20-30 times during a work day.

-- Michael

1 Like

Preview has already had work done to it quite some time ago actually.

To disable the refresh on every change, just take the window or tab off of focus. In other words, you can minimize your browser completely or if you are using a tabbed browser just change tabs until you want it to refresh again. You don't have to toggle preview on and off.

Okay - Been trying this for a month now - And working with 2 (sometimes 3 screens) - Having to minimize or tab away from the layout every time I don't want the refresh to occur is not an option.

Therefore I'd like to keep my original feature request of a Keyboard shortcut to enable/disable preview, and if possible a hotkey to update preview files on my request - and not everytime I make a change

Regards, Michael

And I'd like to add additional details to this.

I have 3 screens, minimizing and maximizing, or changing tabs again and again, is not an option.

Please see attached video

In this you see my 3 screens, my Bootstrap Studio, my Chrome browser and my DevTools, and a clock.

Explanation of what happens - Using the clock in the video:

08:18:04 I change name of second tab to Example Tab 001 08:18:13 I change name of third tab to Example Tab 002 08:18:20 I enable preview (off screen) 08:18:24 I refresh my browser, you can see both the Waterfall and the requests and times (cutout from screen 2) 08:18:35 Page is loaded after 11.86 seconds 08:18:40 Page is completed after 15.83 seconds 08:18:45 I refresh page, it is loaded in 64 ms, and page is completed after 2.92 seconds. 08:18:51 I refresh again, page is loaded in 110ms and completed after 2.75 seconds.

Then with preview enabled, i edit the content 08:19:00 I change name of second tab to Example Tab 1 08:19:05 The livereload goes to pending 08:19:22 Page is loaded after 16.32 seconds 08:19:26 Page is completed after 19.68 seconds 08:19:31 I change name of tird tab to Example Tab 2 08:19:32 Livereload goes to pending 08:19:44 Page is loaded after 11.86 seconds, and completed after 14.63 seconds

So please please please make a keyboard shortcut to Enable/Disable live preview - and/or the live reload - I can live with the preview being on, and me deciding when to reload the page in browser - When i have to wait for 15 seconds everytime I change a single thing in Bootstrap Studio.

I absolutely love the software, but this would make my days even better.

Regards, Michael Denmark


I do agree that we really should have shortcut keys to enable/disable AND a button in BSS that just toggles the rendering on and off, not the actual Preview Window setting (meaning not turning it off and on where you have to constantly choose the server etc, just turning off the rendering as if you minimized the browser or changed tabs to stop it). The button would be for those that don't always use short cut keys and there's a lot of real estate space on BSS so there shouldn't be an issue adding a button for that. Would be best placed on the main bar to the left of the Preview button.

Having said that you have some major issues or too extreme of scripts if your pages are taking over 4 to 5 seconds to load every time up do an update of the page. Those times over over 8 seconds for pages loaded and completed are horrendous. I usually wait 1 to 3 seconds for a page refresh after changes and about the same for manually refreshing the page.

@Jo When the page has loaded once, it will load within 1-3 seconds, no problem there - Problem is that when preview is active, any changes within bootstrap studio halts the program for upwards of 20 seconds.

While it is generating the preview, I can't make a change in BSS.

So like in my video, changing the name of two tabs, takes 40-50 seconds, if I forgot to disable the preview. Because as soon as I leave the first tab, refresh takes over and I cannot make changes untill it has loaded in browser (perhaps a few seconds before load is complete).

I have a single project where I am re-building our entire backend - consisting of approx 50-70 pages, and some pages with 10-15 tabs, and each tab contains can contain upwards of 200 bootstrap elements (panels, dropdowns, checkboxes, input fields etc.)

The page I showcase in the video is one of the larger ones - Page size alone is 522KB, and contain 18 tabs and close to 7000 DOM elements. My .bstudio file is at 1.5 MB, and uncompressed the file is a 18MB JSON document.

Regards, Michael

I do agree with this. The preview window can definitely bog down the program at times.

Yes, I agree it does interrupt being able to do changes quickly, but I have never had it do so for more than a few seconds. Definitely not even close to 20 seconds which is why I say something is wrong. It’s most likely a script that is causing it to bog down that long. I am pretty sure that there was a conversation on this issue quite a while ago and the person was told to try disabling their scripts to find which one was causing it. Could be the issue here too maybe.

Thank you for starting this thread! We will add a shortcut for toggling the preview in the upcoming release. Unless there are better suggestions, the combo will be Cmd/Ctrl + I.

I can confirm that certain designs can slow down the program with the preview open. We will improve this in future updates.

Can we get a button toggle for this too please rather than just a shortcut? Would go perfect next to the preview button.

There already is a toggle in the dropdown. It takes an extra click to show the menu, but it is still handy.

Preview toggle

Interesting, never noticed that lol.

Can we get one more thing for this setup? Since the button does allow us to toggle the preview on and off, can we get it to refresh the preview page when it's turned back on, basically as it would if we made changes? so we don't have to do that extra step and go to the browser to do it each time?

@Martin Yay -- CTRL+i works.

Remember to put it in the Keyboard Shortcuts page, and perhaps show it in the dropdown of the preview.


Regards, Michael