Live app preview in the same browser tab

Glitch Feature Ideas
1

Hey folks, Glitch is sweet!

However, it’d be sweeter if apps could be previewed in the same browser tab! ie. iframe in a sidepanel

IMHO it really helps “hello world” type projects, by making them quicker to grok by visiter’s.

1 Like
2

Hi loklaan,

I should probably stop proposing bookmarklets as solutions, but… well, I have a bookmarklet that you can use:

javascript:(function() {
var preview = `
  <div class="preview-wrap" style="width: 50%">
    <button class="button button-small refresh" style="margin: 0 0 10px 10px;">Refresh preview</button>
    <iframe class="preview" src="${application.currentProject().publishedUrl()}" style="border: none; display: block; width: 100%; height: 100%;" />
  </div>
`;

$(".editor-wrap")[0].insertAdjacentHTML("afterend", preview);
window.previewWindow = $(".preview")[0].contentWindow;
$(".refresh").click(() => { previewWindow.location = application.currentProject().publishedUrl() });
})()

Save this for example as “Preview” is in your bookmark bar and then click it while you are in the editor. And… here you go! Ugly, but functional, preview iframe! :slight_smile:

Let me know how it works :slight_smile:

PS: if you don’t know how to add a bookmarklet, in Chrome you can right click on the bookmark bar -> add page -> set “preview” as the name and that code snippet as the URL.

UPDATE: fixed a minor bug in the snippet.

3

Thanks mate! I made something like this last night, but with more hackory. Couldn’t get autorefresh working in the iframe, so just went back to multiwindow.

The suggestion was more-so for new visitors to a glitch project.

1 Like