The Web APIs Playground
is a project to showcase the JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs provides wrapper functions for many low-level tasks like,
- Device Hardware Interactions
- Client-side storage interactions
- 3D Graphics, WebGL
- Notifications
- Audio, Video
- and many, many more.
Please follow this link to know about different Web APIs and their usages.
The primary mission is to provide working examples of the JavaScript web APIs with simple demonstration that can be accessed using browsers on different devices. It may help many beginners to this topic in understanding how to code and use the Web APIs.
Here is a step-by-step guide to help you add a new demo.
This project is developed using the Next.js
. If you have implemented a similar project using JavaScript or any other frameworks like React, Angular, Vue, please create an issue to include them in the README.
Who doesn't need motivation? Please give the project a star(⭐) and/or share it in your dev circle.
To run the project locally,
- Please clone it.
- Browse to the project directory.
- Install dependencies
npm install
# Or
yarn install
- Run the application locally
npm run dev
# Or
yarn dev
- Open the browser and navigate to
http://localhost:3000
So far, it includes the following examples:
- 📂 File System API
- 📺 FullScreen API
- 📋 Clipboard API
- 📡 Broadcast
- 📷 Image Capture
- 📶 Network Info
- 🧐 Resize Observer
- 💳 Payment Request
- 📳 Vibration API
- 🔋 Battery API
- 🐢 Drag and Drop
- ⚓ Geolocation API
- 🖼️ Picture in Picture
- 💻 Screen Capture
This project is opensource and open for contributions. If you are looking for any examples and demonstrations that are missing, please open a issue from here. You can also contrinute to the source code by adding an exaple, improving code, and providing suggestions.
Any kind of positive contribution is welcome! Please help us to grow by contributing to the project.
If you wish to contribute, you can work on any issues listed here or create one on your own. After adding your code, please send us a Pull Request.
Please read
CONTRIBUTING
for details on ourCODE OF CONDUCT
, and the process for submitting pull requests to us.
We all need support and motivation. WebAPIs Playground
is not an exception. Please give this project a ⭐️ to encourage and show that you liked it.
If you found the app helpful, consider supporting us with a coffee.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!