Embed

Plunker provides a minimal version of the editor for content creators to include on their websites.

We designed the embed to offer a minimal interface and set of features that is suitable for embedding in another website. The embed provides the following editing features:

1. Full syntax-highlighting for a broad range of languages
2. Real-time preview
3. Arbitrary number of files including both text and binary assets
4. ...

Adding the embed to your website

The embed is designed to run inside an iframe element. The embed service itself runs at https://embed.plnkr.co.

The embed supports different sources of content:

1. Plunks: /plunk/:plunkId
2. Gists: /gist/:gistId
3. Default: /

Additionally, the initial appearance of the embed can be customized using query parameters:

• show: Determines the list of initial panes to be shown.

  The list is a comma-separated listing of filenames, fuzzy filenames or the string preview.

  Give a project with the files index.html, lib/script.js and lib/style.css, you could indicate ?show=index.html,js,preview to show the panes for index.html, lib/script.js and the Preview. Note that index.html is an exact match whereas js will be fuzzy matched against all files in the Project and the best match will be shown.

  If not specified, show defaults to index,preview.

• preview: Determines the default file to be rendered in the preview.

  Normally, Plunker will use a heuristic to guess what the index file should be for a given plunk. However, you can indicate the specific path that you would like the Plunker Preview to use using the preview query parameter.

  For example, given a project with the files index.html and README.md, if you wanted to show a real-time markdown editing experience you could do: ?show=README.md,preview&preview=README.html. Note that the preview parameter uses README.html whereas a file called README.md exists. This is on purpose so that the Plunker run server can transpile the README.md file into README.html to show a rendered version in the preview.

• sidebar: Determines the initial sidebar pane to be shown.

  When set, the sidebar query parameter will determine the sidebar pane that is shown on load. This parameter accepts the values tree and config for the file tree and configuration pane, respectively.

  If sidebar is not specified, the embed will automatically show the sidebar when the width of the embed is greater than or equal to 992px (unless configured otherwise, as per autoCloseSidebar below). If the embed width is less than 992px, the sidebar will automatically close after a file is selected.

• autoCloseSidebar: Determines if the embed will automatically close the sidebar.

  This query parameter allows you to override the default, width-based behaviour. Normally, an embed whose width is less than 992px will automatically close the sidebar after it has been used. This query parameter provides the opportunity to override that behaviour.

  Example: ?sidebar=tree&autoCloseSidebar=false to force the file tree sidebar pane to show and to remain open even once a file operation has been performed.

• deferRun: Prevents preview panes from automatically running.

  When specified, the preview panes will not automatically run on load. Instead, a large button will be shown that, when clicked, will start the preview.

  This feature is particularly useful for two scenarios:

  1. Your embedded examples are processor-heavy.
  2. You display many embedded examples on the same page.

  Example: ?deferRun to prevent previews from automatically running.

We suggest using frameborder="0" as an attribute of the iframe element for a better appearance.

Example

Basic

<iframe
  src="https://embed.plnkr.co/plunk/W8S4hea9h66z6iCX43vy?show=app,preview"
  frameborder="0"
  width="100%"
  height="480px"
></iframe>

Deferred

<iframe
  src="https://embed.plnkr.co/plunk/W8S4hea9h66z6iCX43vy?show=app,preview&deferRun"
  frameborder="0"
  width="100%"
  height="480px"
></iframe>