Adding code examples

There are a lot of code examples on MDN, and you’ll probably want to add some as you contribute content to the project. There are four types of code example used on MDN:

  • Static examples — plain code blocks, possibly with a screenshot to statically show the result of such code if it were to be run.
  • Traditional MDN “live samples” — A macro that takes plain code blocks, dynamically puts them into a document inside an <iframe> element, and embeds it into the page to show the code running live.
  • GitHub “live samples” — A macro that takes a document in a GitHub repo inside the MDN organization, puts it inside an <iframe> element, and embeds it into the page to show the code running live.
  • Interactive examples — Our system for creating live interactive examples that show the code running live but also allow you to change code on the fly to see what the effect is.

For a complete description of this topic, see the MDN code examples page.

Also make sure that your code examples follow the MDN code example guidelines.

Last modified June 21, 2022: Fix typos (#17487) (fe80843d97)