How to convert code samples to be "live"

MDN has a "live sample" system, where the code sample shown on a page is directly used to display the output of that same sample. However, many existing articles have code samples that do not yet use this system, and need to be converted.

Live samples, which let you see what a sample's output looks like, make documentation more dynamic and instructive. This guide covers how to take existing samples and add "live" functionality to them.

Where does it need to be done?

Any article that has a static code example (just blocks of HTML, CSS, JavaScript) that you think would benefit from being shown running live.

What do you need to know to do the task?

  • Understanding of HTML, CSS and/or JavaScript, depending on the code sample.
  • Ability to use KumaScript macros within MDN articles.

What are the steps to do the task?

  1. Find a code example that you think should be converted to be "live".
  2. Convert the code sample to be "live".
  3. Delete any code or image that was previously used to display the output of the sample.

For more information on creating and editing Live Samples, see Using the live sample system