# samdutton/simpl: Single-File Examples for Every Web Platform API

> simpl.info is a repository of the simplest possible HTML, CSS, and JavaScript examples for browser APIs. Each example lives in its own subdirectory and demonstrates exactly one API feature with no dependencies beyond a browser.

**samdutton/simpl** — Simplest possible examples of HTML, CSS and Javascript:

- Repository: https://github.com/samdutton/simpl
- Website: https://simpl.info
- Stars: 5,183 · Forks: 1,585
- Language: HTML
- License: Apache-2.0
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/samdutton-simpl

## One Browser API, One Folder, No Build Step

simpl.info solves the problem of finding the minimal working example for a browser API. The README describes it as 'a website for simplest-possible code examples.' Each example consists of a small HTML file, often with inline CSS and JavaScript, that demonstrates exactly one feature with no build step required.

The audience is web developers who want to understand how an API works before integrating it into a larger project. The examples are not tutorials with step-by-step explanations; they are working code snippets that a developer can open in a browser or inspect in a text editor to see the API surface in use.

The repository is hosted at simpl.info, and the branch is gh-pages, which means the repository itself is also the deployed website. Every folder in the repository corresponds to a path on simpl.info.

## Repository Structure: API Names as Directory Names

The top-level directory listing follows a flat layout where each API or feature gets a folder named after the technology or the simpl.info URL segment for it. The listing in the repository includes folders such as canvas/, cors/, css/, fetch/, filesystem/, flexboxcenter/, fullscreen/, geolocation/, getusermedia/, and many others.

This naming scheme makes the repository navigable without a table of contents. A developer looking for a WebRTC example navigates to the getusermedia/ folder. A developer looking for a CSS flex example navigates to flexboxcenter/ or flexboxexpand/. The naming is by the feature being demonstrated rather than by the API specification name, which makes the most common use cases easier to find.

The repository also contains folders for newer APIs such as av1/, eventsource/, and es6-modules/. The Gruntfile.js at the root handles linting and style checks for contributors. The package.json lists eslint and stylelint as development dependencies for CI, not as runtime requirements for the examples themselves.

## Cloning the Repository and Running a Demo

The examples require no npm install and no build step to run. After cloning the repository, any folder's index.html can be opened directly in a browser or served from a local server:

```bash
git clone https://github.com/samdutton/simpl.git
```

Some APIs require a web server rather than a file:// origin because browsers block certain features like service workers, getUserMedia, and fetch on file:// URLs. For these, serving the folder from a local HTTP server is necessary. The README does not document a specific server command; any static file server that serves the folder's contents over http://localhost will work.

The CI configuration uses Travis CI (via .travis.yml) and Lighthouse CI (via .lighthouseci/). These tools run on the full repository during development to enforce code quality and performance standards for the example files.

## Coverage: Which Web APIs Are Represented

The folder listing covers APIs from several categories. For media and communication, the repository includes getusermedia/ (camera and microphone), audio/, audiodata/, eme/ (encrypted media), and av1/ (AV1 video). For graphics, it includes canvas/. For layout, it includes flexboxcenter/, flexboxexpand/, and flexvideo/. For networking, it includes cors/, fetch/, and eventsource/ (Server-Sent Events). For device sensors, it includes geolocation/, devicemotion/, and deviceorientation/.

Some folders cover CSS-specific features: cssfilters/, cssmenu/, cssnegativeselector/, csstransition/, and cssbackgroundanimation/. There is also an es6-modules/ folder, which demonstrates JavaScript module loading.

The repository does not cover Web Components, WebAssembly, or the newer Web Bluetooth and Web USB APIs, based on what the folder listing shows. The README acknowledges this implicitly by noting it is for 'simplest possible code examples' and inviting contributions.

## Where simpl.info Falls Short

The examples in simpl.info are deliberately minimal. They do not include error handling, progressive enhancement, or accessibility attributes beyond what the bare API requires. A developer copying a fetch example will find the minimum working call, not a production-ready wrapper with timeout handling and error logging.

The README does not document what browsers each example supports. Some examples cover APIs with broad support; others demonstrate APIs that were experimental at the time of writing and may now be deprecated or behind feature flags in modern browsers. There is no compatibility table or last-tested date per folder.

The repository also has no interactive demo site with explanatory prose alongside the code. simpl.info serves the files directly, so the learning experience is 'inspect the source and run it.' Developers who want guided explanations of how and why an API works should consult the MDN documentation.

## simpl.info vs MDN Web Docs Live Examples

MDN Web Docs provides live interactive examples embedded directly in the documentation pages for most browser APIs. Those examples run in a sandboxed environment on the MDN page and are editable in the browser. They serve as authoritative reference implementations linked to the specification text.

simpl.info takes a different approach. Each example is a complete standalone HTML file, not an embedded snippet. This means it can be cloned, modified, and served locally without a sandboxed environment. The format makes it easier to add the example as a starting point in a local project, but harder to explore interactively without a local server.

For understanding the behavior of a complex API across multiple files, such as a WebRTC setup that requires both a caller and a callee page, simpl.info's standalone folder structure is more practical than an inline MDN snippet. The trade-off is that MDN's examples are maintained alongside spec updates, while simpl.info's examples are updated only when someone submits a contribution to the repository.

## Maintenance Status, Contribution Process, and License

The last push to the repository was on 2026-09-09. The repository is licensed under Apache-2.0. The README credits the copyright to 'Google, Inc.' and explicitly states 'this is not a Google product.'

The CONTRIBUTING.md in the repository and the Developer's Guide linked in the README describe the code style, structure, and validation requirements for new examples. The CI setup runs ESLint and Stylelint on all submitted code through Grunt.

The package.json specifies no pinned version numbers for eslint, grunt, or stylelint; all are set to 'latest.' This means the development toolchain updates automatically on npm install, which can produce inconsistent behavior between contributor environments. The README recommends reading the CONTRIBUTING.md before submitting a new example.

## Conclusion

Web developers who need a quick, dependency-free reference for how a specific browser API works in isolation will find simpl.info more direct than MDN's full documentation pages. The repository covers dozens of APIs including WebRTC, fetch, geolocation, and canvas, each in its own folder. Developers who need production-grade code with error handling, fallbacks, and framework integration should look elsewhere. The last push to the repository was on 2026-09-09. Before using any example as a starting point, check the browser compatibility tables for the API in question, as some examples cover older features that may have been updated or deprecated.

## FAQ

### What is simpl.info and what does it contain?

simpl.info is a repository of minimal, standalone HTML, CSS, and JavaScript examples for browser APIs. Each API has its own folder with an index.html that demonstrates the feature with no build step or external dependencies. Topics include WebRTC, canvas, fetch, geolocation, CSS transitions, and dozens of others.

### How do I run a simpl.info example locally?

Clone the repository with git clone https://github.com/samdutton/simpl.git, navigate to any subfolder, and open its index.html in a browser. For APIs that require a secure or HTTP origin, such as getUserMedia or service workers, serve the folder from a local HTTP server instead of using a file:// URL.

### Which browser APIs are covered in samdutton/simpl?

The repository includes examples for WebRTC (getusermedia/), canvas, fetch, cors, geolocation, device sensors (devicemotion, deviceorientation), CSS filters and transitions, flexbox layout, Server-Sent Events, and ES6 modules, among many others. The folder names in the repository correspond to the API or feature being demonstrated.

## Sources

- [Issues](https://github.com/samdutton/simpl/issues)
- [License: Apache-2.0](https://github.com/samdutton/simpl/blob/gh-pages/LICENSE)
- [Project website](https://simpl.info)
- [README](https://github.com/samdutton/simpl/blob/gh-pages/README.md)
- [samdutton/simpl on GitHub](https://github.com/samdutton/simpl)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/samdutton-simpl