skip to content W3C SVG

Demo embedding

Sometimes just pictures of the pattern you’re documenting aren’t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.

CodePen

Cupper offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen’s ID.


{{% codePen VpVNKW %}}

This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:

jsBin

You can embed JS Bins just like CodePens, supplying a single id parameter.


{{% jsBin juwowaq %}}

However, you can also have finer control over which panes are displayed. Use two parameters: one for the id and another, show, listing the panes you want to include.


{{% jsBin id="juwowaq" show="css,output" %}}

The options for the show parameter are:

  • html
  • css
  • js
  • console
  • output

(Note that, under some circumstances, the html pane is added whether you select it or not.)

Inline demos

Cupper also supports the ability to write inline demos directly in markdown files. See Writing inline demos.