remy/html5demos

★ 4,728HTMLAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((html5demos))
    What it does
      Show browser features
      Teach via source code
    Content areas
      Canvas and drawing
      Audio and video
      Event handling
    Structure
      One file per demo
      Shared JS folder
      Media assets folder
    License
      MIT for code
      CC Share Alike content

mindmap root((html5demos)) What it does Show browser features Teach via source code Content areas Canvas and drawing Audio and video Event handling Structure One file per demo Shared JS folder Media assets folder License MIT for code CC Share Alike content

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Study working HTML5 canvas, audio, and video examples by reading the source code of each standalone file.

USE CASE 2

Copy a self-contained demo as a starting point for your own browser experiment with no build tools needed.

USE CASE 3

Check browser compatibility notes baked into each demo to understand which features were supported at the time.

USE CASE 4

Use the simple demo template structure, HTML file in demos folder plus shared JS and assets, to build your own showcase.

Tech stack

HTMLJavaScriptCSS

Getting it running

Difficulty · easy Time to first run · 5min

No build step required, open any .html file directly in a browser to run each demo.

Code is MIT, use freely for any purpose including commercial use, just keep the copyright notice. Demo content is Creative Commons Share Alike 2.0, reuse allowed as long as you credit the source and apply the same license.

In plain English

HTML5 Demos is a collection of small web experiments built to show what HTML5-era browsers can do. Each demo is a self-contained HTML file designed so that anyone can view its source code and learn from it directly. The README notes that the project is now retired and no longer live or maintained, though the code remains available. The original goal was to provide working examples of browser capabilities that other developers and learners could study. Demos cover things like audio, video, canvas, and event handling, with notes on which browsers supported each feature at the time the demos were written. The project is structured around a simple template: create an HTML file in the demos directory, add your markup and JavaScript, and it gets wrapped in a consistent page layout when served. Any JavaScript libraries go in a shared folder, and media assets like video or audio files go in an assets folder. The README also lists some areas the project intended to cover but never fully completed, including more canvas examples, WebSockets, and SVG. All code is released under the MIT license. Demo content is covered by Creative Commons Share Alike 2.0, meaning it can be reused and adapted as long as credit and the same license terms are preserved.

Copy-paste prompts

Prompt 1

Show me a self-contained HTML5 canvas demo that draws animated shapes, following the pattern used in remy/html5demos where each demo is one HTML file with inline JavaScript.

Prompt 2

Using the html5demos project as a reference, write a single HTML file that demonstrates HTML5 audio playback with play, pause, and volume controls.

Prompt 3

How does remy/html5demos structure its demo directory so each HTML file gets wrapped in a shared page layout when served? Show me a minimal version of that setup.

Prompt 4

Write a self-contained HTML5 video demo in the style of html5demos that tracks the current playback time using JavaScript event listeners.

Prompt 5

Based on the html5demos approach, create a single-file HTML5 demo showing the drag-and-drop API with a drop zone that accepts files.

Open on GitHub → Explain another repo

← remy on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.