mdn/interactive-examples

Stars
727
Rank 62,329 (Top 2 %)
Language
HTML
License
Creative Commons ...
Created over 7 years ago
Updated about 2 months ago

mdn/interactive-examples

mdn

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Home of the MDN live code editor interactive examples

interactive-examples

Home of the MDN interactive code examples.

Project maintainers

Should you have any questions regarding this project, please feel free to @mention either @wbamberg or @schalkneethling

Good first issues

Want to contribute to the interactive examples project? Here are a couple of good first issues to get you started. Thanks!

Good first issues

Folder structure

[css] - This contains the CSS used by the base templates.
[js] - This contains the JS used by the base templates.
[live-examples] - This contains the live example CSS and JS fragments.
[media] - This contains images used by the live examples and templates.
[tmpl] - The base templates.

The dynamically generated pages, their dependencies, and assets are generated to the prod branch.

Browser support baseline

The following is a list of browser/version combinations that are supported by the interactive editor. In browsers that do not meet the criteria, the editor degrades gracefully to displaying static examples.

Firefox - Latest three release versions.
Chrome - Latest three release versions.
Opera - Latest two release versions.
Safari - Latest two release versions.
Edge - Latest release version.

Contributing

If you're interested in contributing to this project, great! Please see the CONTRIBUTING document.

content

The content behind MDN Web Docs

learning-area

GitHub repo for the MDN Learning Area.

browser-compat-data

This repository contains compatibility data for Web technologies as displayed on MDN

webextensions-examples

Example Firefox add-ons created using the WebExtensions API

dom-examples

Code examples that accompany various MDN DOM and Web API documentation pages

web-components-examples

A series of web components examples, related to the MDN web components documentation at https://developer.mozilla.org/en-US/docs/Web/Web_Components.

serviceworker-cookbook

It's online. It's offline. It's a Service Worker!

kuma

The project that powers MDN.

translated-content

The source repository of all translated content for MDN Web Docs

django-locallibrary-tutorial

Local Library website written in Django; example for the MDN server-side development Django module: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django.

web-speech-api

A repository for demos illustrating features of the Web Speech API. See https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API for more details.

mdn

Holding repo for MDN Web Docs things

webaudio-examples

Code examples that accompany the MDN Web Docs pages relating to Web Audio.

express-locallibrary-tutorial

Local Library website written in NodeJS/Express; example for the MDN server-side development NodeJS module: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs.

webgl-examples

Code examples that accompany the MDN WebGL documentation

yari

The platform code behind MDN Web Docs

webassembly-examples

Code examples that accompany the MDN WebAssembly documentation — see https://developer.mozilla.org/en-US/docs/WebAssembly.

js-examples

Code examples that accompany the MDN JavaScript/ECMAScript documentation

samples-server

MDN samples server; used for samples that can't be hosted in-place on MDN, plus back-end server-side code for samples that need it.

pwa-examples

Examples for progressive web apps.

sw-test

Service Worker test repository. This is a very simple demo to show basic service worker features in action.

simple-web-worker

A simple web worker test.

data

This repository contains general data for Web technologies

voice-change-o-matic

Web Audio API-powered voice changer and visualizer

css-examples

Code examples that accompany the MDN CSS documentation

fetch-examples

A repository of Fetch examples. See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API for the corresponding documentation.

web-dictaphone

A sample MDN app that uses getUserMedia and MediaRecorder API for recording audio snippets, and The Web Audio API for visualizations.

to-do-notifications

Enhanced version of the to-do app, which stores to-do items via IndexedDB, and then also aims to provide notifications when to-do item deadlines are up, via the Notification and Vibration APIs.

curriculum

MDN front-end developer curriculum

beginner-html-site

A simple one page website created to help complete beginners learn HTML basics.

beginner-html-site-scripted

A simple one page website created to help complete beginners learn HTML basics. which in this repo has also had some script added to help beginners learn JavaScript basics.

violent-theremin

Violent theremin uses the Web Audio API to generate sound, and HTML5 canvas for a bit of pretty visualization. The colours generated depend on the pitch and gain of the current note, which are themselves dependant on the mouse pointer position.

todo-react

Sample todo app built with the React/ReactDOM framework.

beginner-html-site-styled

A simple one page website created to help complete beginners learn HTML basics, which in this repo has also been styled to help beginners learn CSS basics. The styling is explained over the course of https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics.

django-diy-blog

Basic blog site written in Django (part of MDN Django module assessment).

simple-shared-worker

A simple demo to show shared worker basics.

sprints

Archived: MDN Web Docs issues are tracked in the content repository.

canvas-raycaster

Using the <canvas> element to do software rendering of a 3D environment with ray-casting

kumascript

Bringing scripting to the wiki bears.

mdn-community

A place to provide feedback and suggestions for MDN Web Docs

mdn-minimalist

The base Sass for Mozilla Developer based projects and products

todo-vue

Sample todo app built with the Vue framework

html-examples

Code examples that accompany the MDN HTML documentation: https://developer.mozilla.org/en-US/docs/Web/HTML

advanced-js-fundamentals-ck

This content kit provides learning material to allow intermediate web developers to level up their skills, learning real world techniques to take them past rudimentary syntax towards a solid foundation of skills than can be utilized to create modern web applications. It'll be visual; you'll have fun along the way.

bob

Builder of Bits aka The MDN Web Docs interactive examples, example builder

webvr-tests

A set of simple tests for testing WebVR functionality. See https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API for the latest on the documentation.

headless-examples

Examples to support the MDN resource covering Firefox headless mode — see https://developer.mozilla.org/en-US/Firefox/Headless_mode

developer-portal

The code that generates the MDN Web Docs Developer Portal.

archived-content

Archived MDN Web Docs content that is not actively maintained or frequently built

voice-change-o-matic-float-data

Web Audio API-powered voice changer and visualizer

mdn-app-template

[UNMAINTAINED] A simple template for writing web apps into, to save you some time when experimenting. Used in MDN web app demos. See https://developer.mozilla.org/en-US/docs/Web/Apps/App_coding_guidelines#Apps_template for more information on what this template contains.

infra

(Deprecated) MDN Web Docs Infrastructure scripts and configuration

rumba

The clean kuma (🤖🧹)

markdown

MDN Web Docs tool to covert HTML to Markdown

learning-area-pt-br

The MDN Learning Area code examples translated into Brazilian Portuguese.

wp-promote-mdn

WordPress plugin automatically links keywords and phrases to MDN.

crossbrowser-testing-lab

Mozilla's Cross-Browser Testing Lab

battery-quickstart-starter-template

[UNMAINTAINED] The starting state of the example built up in the "Your first app" tutorial found in the Mozilla Developer Network open web app Quickstart article.

workflows

Reusable GitHub Actions workflows

indexeddb-examples

Code examples that accompany the MDN IndexedDB documentation

houdini-examples

CSS Houdini examples relating to MDN content.

sphinx-theme

(Deprecated) Make Sphinx docs look like MDN

pab

MDN Web Docs Product Advisory Board

ansible-jenkins

(Deprecated) Jenkins ansible playbook

mdn.dev-2019

(Deprecated) Content for https://mdn.dev

addon-sdk-content-scripts

DEPRECATED | Use WebExtensions instead | Add-ons demonstrating how to use content scripts in the Add-on SDK.

browser-api-demo

A simple demo to show usage of the Mozilla Browser API. See https://developer.mozilla.org/en-US/docs/Web/API/Using_the_Browser_API for more details.

stumptown-content

browsercompat

API for browser compatibility data on developer.mozilla.org

web-tech-games

Interactive diagram showing what parts of the web technology stack can used for different purposes when creating games. Includes links to more information about each.

mdn-dinocons

A scalable set of icons for use across Mozilla Developer websites

insights

The repo that powers MDN Web Docs Insights.

world-clock

An Ember-based app, built as a sample to demonstrate Ember/Ember CLI and modern web architecture. This goes along with the article series found at https://developer.mozilla.org/en-US/Apps/Build/Modern_web_app_architecture.

fibonacci-worker

A web worker that calculates fibonacci numbers.

content-kit-template

This is the repo to fork or clone when creating a new MDN Content Kit.

shared-assets

A repository for media and assets to be used across MDN Web Docs

mdn-fiori

MDN Web Docs Front-End style guide

beginning-programming-content-kit

This is a Content Kit for people who want to teach programming to beginners.

.github

MDN Web Docs public organization profile

repl-panel

This add-on lets you send remote debugging protocol requests to the debugging server, and displays the response.

community-meetings

A place for agendas and minutes from regular MDN community meetings

audio-channels-demo

A demo to show how the AudioChannels API works, at a basic level

short-descriptions

Short descriptions of web platform features, for flexible usage in applications.

mdn-storybook

UI components for MDN Web Docs

perf-examples

Examples related to MDN performance documentation; see https://developer.mozilla.org/en-US/docs/web/Performance

doc-linter-webextension

Webextension to lint MDN documents

battery-quickstart-finished-example

[UNMAINTAINED] The finished version of the example built up in the "Your first app" tutorial found in the Mozilla Developer Network open web app Quickstart article.

whitestorm-demo

A simple demo showing usage of the Whitestorm.js 3D web library.

browser-compat-toolkit

Toolkit for visualizing and editing MDN's browser compatibility data

webalyzer

[UNMAINTAINED] Collects web code for analysis and reporting.

e10s-example-addons

Examples showing how to port add-ons to be e10s-compatible

viewsourceconf

Repo for View Source Conference site

museum

A historic collection of MDN Web Docs content and examples

project-template

A project template to use for new MDN GitHub repositories

imsc-examples

Repository for examples to go along with MDN IMSC documentation.

retired-content

Content previously, but no longer displayed on MDN Web Docs.

todo-react-build

Live version of our sample todo app built with the React/ReactDOM framework.

ai-feedback

Feedback about AI Help

doc-linter-rules

Linting rules used to lint MDN Web Documents

mdn-http-observatory

Backend for HTTP Observatory on MDN