Plunker - Embed Only Preview Pane
I use embedded plunks a lot in my posts to show working code samples, I prefer plunker over other online editors such as jsfiddle and codepen because it offers more flexibility and allows you to add multiple files which is required for most non-trivial examples.
Recently I noticed that my embedded plunks were displaying a code editor pane as well as the preview pane, whereas previously the default was only to show the preview pane. I couldn't find much documentation online about how to change it back to show just the preview pane so I thought I'd make a quick post to make it easier for anyone else wanting to do the same.
Embed code to show only the preview pane of a plunk
To show only the preview pane simply add ?show=preview to the embed url of your plunk, e.g:
http://embed.plnkr.co/TQoIJ2/?show=preview
Here's the full embed code for the example plunk inside an iframe:
<iframe src="http://embed.plnkr.co/TQoIJ2/?show=preview" frameborder="0" width="100%" height="500"></iframe>
Other embedded plunk options
The show parameter in the url can take a comma separated list of panes that you want to show in your embedded plunk, the list can contain any combination of complete file names (e.g app.js,index.html), partial filenames (e.g js,html,css) and/or the word 'preview'.
Panes are displayed in the order that they appear in the list, if you use partial filenames the plunk will display the best match. For example if I wanted to embed the above plunk with three panes showing the 'angulike.js' file editor, followed by the main html file editor and then the plunk preview I could use the following url:
http://embed.plnkr.co/TQoIJ2/?show=angulike.js,html,preview
Need Some JavaScript Help?
Search fiverr for freelance JavaScript developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!