content Remove jsfiddle/jsbin/codepen links

We'd prefer not to have JSFiddle links on MDN because it's hard for us to maintain this content.

Here's a list of all the places we're linking to JSFidddles (I think). Ideally, we would replace there with live samples. Note that many of them are in the Games area - I'm not sure if it's worth investing the time to remove these ones..

[x] https://developer.mozilla.org/en-US/docs/games/techniques/2d_collision_detection
[x] https://developer.mozilla.org/en-US/docs/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_aframe
[x] https://developer.mozilla.org/en-US/docs/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js
[x] https://developer.mozilla.org/en-US/docs/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine
[x] https://developer.mozilla.org/en-US/docs/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js
[ ] https://developer.mozilla.org/en-US/docs/games/techniques/audio_for_web_games
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/animations_and_tweens
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/build_the_brick_field
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/buttons
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/collision_detection
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/extra_lives
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/game_over
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/initialize_the_framework
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/move_the_ball
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/physics
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/randomizing_gameplay
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/scaling
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/the_score
[ ] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_phaser/win_the_game
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/collision_detection
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/finishing_up
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/game_over
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls
[x] https://developer.mozilla.org/en-US/docs/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win
[x] https://developer.mozilla.org/en-US/docs/mdn/contribute/help_beginners
[x] https://developer.mozilla.org/en-US/docs/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/files
[x] https://developer.mozilla.org/en-US/docs/web/api/document/anchors
[x] https://developer.mozilla.org/en-US/docs/web/api/element/click_event
[ ] https://developer.mozilla.org/en-US/docs/web/api/html_drag_and_drop_api
[x] https://developer.mozilla.org/en-US/docs/web/api/webgl_api/matrix_math_for_the_web
[x] https://developer.mozilla.org/en-US/docs/web/api/webgl_api/webgl_best_practices
[x] https://developer.mozilla.org/en-US/docs/web/api/webgl_api/webgl_model_view_projection
[x] https://developer.mozilla.org/en-US/docs/web/api/xmlhttprequest/html_in_xmlhttprequest
[x] https://developer.mozilla.org/en-US/docs/web/css/border-radius
[x] https://developer.mozilla.org/en-US/docs/web/css/css_animations/detecting_css_animation_support
[x] https://developer.mozilla.org/en-US/docs/web/css/css_animations/tips
[ ] https://developer.mozilla.org/en-US/docs/web/css/offset-path
[x] https://developer.mozilla.org/en-US/docs/web/html/global_attributes/tabindex
[x] https://developer.mozilla.org/en-US/docs/web/javascript/closures
[x] https://developer.mozilla.org/en-US/docs/web/performance/css_javascript_animation_performance

Codepens:

[ ] https://developer.mozilla.org/en-US/docs/learn/javascript/client-side_web_apis/drawing_graphics
[ ] https://developer.mozilla.org/en-US/docs/learn/tools_and_testing/client-side_javascript_frameworks/introduction
[x] https://developer.mozilla.org/en-US/docs/web/accessibility/aria/roles/timer_role
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/animation
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/currenttime
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/finish_event
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/id
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/pause
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/play
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/playbackrate
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/playstate
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/reverse/
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/starttime
[ ] https://developer.mozilla.org/en-US/docs/web/api/canvas_api/tutorial/finale
[ ] https://developer.mozilla.org/en-US/docs/web/api/convolvernode
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/addelement
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/cleardata
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/dropeffect
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/effectallowed
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/getdata
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/items
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/setdata
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/setdragimage
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/types
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransferitem/kind
[ ] https://developer.mozilla.org/en-US/docs/web/api/document/evaluate
[ ] https://developer.mozilla.org/en-US/docs/web/api/document/execcommand
[ ] https://developer.mozilla.org/en-US/docs/web/api/dragevent
[ ] https://developer.mozilla.org/en-US/docs/web/api/element/animate
[x] https://developer.mozilla.org/en-US/docs/web/api/iirfilternode
[x] https://developer.mozilla.org/en-US/docs/web/api/keyframeeffect
[x] https://developer.mozilla.org/en-US/docs/web/api/keyframeeffect/getkeyframes
[x] https://developer.mozilla.org/en-US/docs/web/api/keyframeeffect/keyframeeffect
[x] https://developer.mozilla.org/en-US/docs/web/api/keyframeeffect/target
[ ] https://developer.mozilla.org/en-US/docs/web/api/mediastream_recording_api
[x] https://developer.mozilla.org/en-US/docs/web/api/mutationobserver
[x] https://developer.mozilla.org/en-US/docs/web/api/urlsearchparams/set
[x] https://developer.mozilla.org/en-US/docs/web/api/web_animations_api
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_animations_api/using_the_web_animations_api
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_animations_api/web_animations_api_concepts
[x] https://developer.mozilla.org/en-US/docs/web/api/web_audio_api/best_practices
[x] https://developer.mozilla.org/en-US/docs/web/api/web_audio_api/using_iir_filters
[x] https://developer.mozilla.org/en-US/docs/web/api/web_audio_api/using_web_audio_api
[x] https://developer.mozilla.org/en-US/docs/web/api/web_audio_api/web_audio_spatialization_basics
[ ] https://developer.mozilla.org/en-US/docs/web/css/css_scroll_snap
[ ] https://developer.mozilla.org/en-US/docs/web/css/css_scroll_snap/basic_concepts
[ ] https://developer.mozilla.org/en-US/docs/web/css/css_shapes
[ ] https://developer.mozilla.org/en-US/docs/web/css/offset-path
[ ] https://developer.mozilla.org/en-US/docs/web/css/transform-box
[x] https://developer.mozilla.org/en-US/docs/web/html/global_attributes/id
[ ] https://developer.mozilla.org/en-US/docs/web/media/audio_and_video_manipulation
[x] https://developer.mozilla.org/en-US/docs/web/svg/tutorial/paths

JSBins:

[ ] https://developer.mozilla.org/en-US/docs/learn/html/howto/use_data_attributes
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/files
[ ] https://developer.mozilla.org/en-US/docs/web/api/html_drag_and_drop_api
[x] https://developer.mozilla.org/en-US/docs/web/api/readablestream/cancel
[ ] https://developer.mozilla.org/en-US/docs/web/media/audio_and_video_delivery
[ ] https://developer.mozilla.org/en-US/docs/web/media/audio_and_video_delivery/buffering_seeking_time_ranges
[ ] https://developer.mozilla.org/en-US/docs/web/media/audio_and_video_delivery/webaudio_playbackrate_explained
[ ] https://developer.mozilla.org/en-US/docs/web/media/audio_and_video_manipulation

May 17 '22 00:05 wbamberg

In https://developer.mozilla.org/en-US/docs/web/api/datatransfer/files, there is also a link to JSbin. Should we add the links to JSbin to this issue too, it is the same problem? (I found only 3 occurrences):

[ ] https://developer.mozilla.org/en-US/docs/web/api/readablestream/cancel
[ ] https://developer.mozilla.org/en-US/docs/web/api/html_drag_and_drop_api
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/files

(For games/ I think we shouldn't do it ourselves but be ready to review contributions. Even if the section goes away at some point, I guess it will be archived, and having everything embedded will be better than having JSfiddle links that will go away at some point...)

May 17 '22 06:05 teoli2003

There's CodePen as well. I just searched for JSFiddle here but we could add it.

May 17 '22 06:05 wbamberg

Codepens:

[ ] https://developer.mozilla.org/en-US/docs/web/api/mutationobserver
[ ] https://developer.mozilla.org/en-US/docs/web/api/dragevent
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_audio_api/using_web_audio_api
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_audio_api/best_practices
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_audio_api/using_iir_filters
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_audio_api/web_audio_spatialization_basics
[ ] https://developer.mozilla.org/en-US/docs/web/api/canvas_api/tutorial/finale
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_animations_api/web_animations_api_concepts
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_animations_api
[ ] https://developer.mozilla.org/en-US/docs/web/api/web_animations_api/using_the_web_animations_api
[ ] https://developer.mozilla.org/en-US/docs/web/api/urlsearchparams/set
[ ] https://developer.mozilla.org/en-US/docs/web/api/mediastream_recording_api
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/cleardata
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/mozcursor
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/addelement
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/effectallowed
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/mozitemcount
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/mozgetdataat
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/dropeffect
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/mozsetdataat
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/items
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/mozsourcenode
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/mozcleardataat
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/setdragimage
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/moztypesat
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/setdata
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/mozusercancelled
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/types
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransfer/getdata
[ ] https://developer.mozilla.org/en-US/docs/web/api/document/execcommand
[ ] https://developer.mozilla.org/en-US/docs/web/api/document/evaluate
[ ] https://developer.mozilla.org/en-US/docs/web/api/keyframeeffect
[ ] https://developer.mozilla.org/en-US/docs/web/api/keyframeeffect/keyframeeffect
[ ] https://developer.mozilla.org/en-US/docs/web/api/keyframeeffect/target
[ ] https://developer.mozilla.org/en-US/docs/web/api/keyframeeffect/getkeyframes
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/finish_event
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/id
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/reverse/
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/playstate
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/animation
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/playbackrate
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/starttime
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/play
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/currenttime
[ ] https://developer.mozilla.org/en-US/docs/web/api/animation/pause
[ ] https://developer.mozilla.org/en-US/docs/web/api/element/animate
[ ] https://developer.mozilla.org/en-US/docs/web/api/iirfilternode
[ ] https://developer.mozilla.org/en-US/docs/web/api/css_typed_om_api/guide
[ ] https://developer.mozilla.org/en-US/docs/web/api/datatransferitem/kind
[ ] https://developer.mozilla.org/en-US/docs/web/api/convolvernode

May 17 '22 06:05 teoli2003

We can close #13483 after https://developer.mozilla.org/en-US/docs/Web/API/Element/animate is done.

May 17 '22 09:05 OnkarRuikar

One thing I would say is we need to take a bit more time to consider what we do with the bigger examples (those that wouldn't work as live samples - largely I think the codepens) purely because it's useful for our users to have an interactive editor and we still need to figure out one that can be powered from github 👍

May 17 '22 13:05 Rumyra

Yes, maybe I was a bit premature here. Hopefully there are lots of cases where a live sample is good enough, and we can keep using these links, for now, for the other cases.

May 17 '22 15:05 wbamberg

https://jc-verse.github.io/mdn-graph/warnings now has an up-to-date list of links (under "External sandbox link"). It doesn't include JSFiddleEmbed though, which are all in Phaser docs and is part of https://github.com/mdn/content/issues/35578.

The examples on the following pages use external media and cannot be ported to live samples due to CSP (we need alternative sources hosted in shared-assets):

https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games
https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Audio_and_video_delivery
https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/buffering_seeking_time_ranges
https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/WebAudio_playbackRate_explained

The playground on https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics itself has gotten complaints (https://github.com/mdn/content/issues/25379), so we may need to redo it anyway.

The examples under https://developer.mozilla.org/en-US/docs/Web/API/Animation, https://developer.mozilla.org/en-US/docs/Web/API/Element/animate, and https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API are already tracked to be included into dom-examples as per https://github.com/mdn/content/issues/10318.

https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Audio_and_video_manipulation and https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode have the same example but with different URLs. It's a pretty big one and probably belongs in webaudio-examples.

Jun 05 '25 12:06 Josh-Cena

Hello, I'm working on https://github.com/mdn/content/issues/35578 and got stuck at modifying the live sample. All the examples in the tutorial assumes that js/phaser.min.js is put at the directory of the HTML file. However, does the live sample currently support such a use case? Should I put js/phaser.min.js somewhere in the repository?

Jul 12 '25 13:07 igrep

@igrep One possibility is to host it on https://github.com/mdn/shared-assets. But @bsmth may have better suggestions here.

Jul 12 '25 13:07 Josh-Cena

Thanks for tagging me. Can you try with a CDN? https://github.com/phaserjs/phaser?tab=readme-ov-file#using-phaser-from-a-cdn, for instance:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.88.2/phaser.js"></script>
```

```js
class Example extends Phaser.Scene {
  preload() {
    this.load.setBaseURL("https://cdn.phaserfiles.com/v385");
    this.load.image("raster", "assets/demoscene/raster-bw-800x16.png");
  }

  create() {
    const group = this.add.group();
    group.createMultiple({ key: "raster", repeat: 64 });
    const hsv = Phaser.Display.Color.HSVColorWheel();
    let i = 0;
    const _this = this;

    group.children.iterate((child) => {
      child.x = 500;
      child.y = 100;
      child.depth = 64 - i;
      child.scaleX = 0.6;
      // child.setBlendMode(Phaser.BlendModes.ADD);
      child.setTint(hsv[i * 4].color);
      i++;
      _this.tweens.add({
        targets: child,
        props: {
          x: { value: 300, duration: 700 },
          y: { value: 500, duration: 2500 },
          scaleX: {
            value: Math.min(0.1, child.depth / 64),
            duration: 4000,
            hold: 2000,
            delay: 2000,
          },
        },
        yoyo: true,
        repeat: -1,
        ease: "Sine.easeInOut",
        delay: 38 * i,
      });
    });
  }
}

const config = {
  type: Phaser.AUTO,
  parent: "phaser-example",
  width: 700,
  height: 550,
  scene: Example,
};

const game = new Phaser.Game(config);
```

{{embedlivesample("", "100%", 600)}}

We're already doing that here: https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js

Jul 18 '25 11:07 bsmth

@bsmth @Josh-Cena Thank you all! I confirmed https://github.com/mdn/content/commit/43c875a07770bbaef8b97b1105b7f0025d41a137 worked except for that the images were not loaded. I'll send a pull request to https://github.com/mdn/shared-assets to add the images later!

Jul 21 '25 14:07 igrep

content content copied to clipboard

Remove jsfiddle/jsbin/codepen links

content
content copied to clipboard