Skip to content

The Web APIs Playground is a project to showcase the JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs are here to help with providing wrapper functions for many low-level tasks.

License

Notifications You must be signed in to change notification settings

atapas/webapis-playground

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ”Œ WEB APIS PLAYGROUND

All Contributors

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 App

https://webapis-playground.vercel.app

🎯 Vision and Mission of this Playground

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.

πŸ—οΈ How to ADD a new DEMO?

Here is a step-by-step guide to help you add a new demo.

βš’οΈ It's developed using Next.js

This project is developed using 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.

🀲 Want to Motivate?

Who doesn't need motivation? Please give the project a star(⭐) and/or share it in your dev circle.

Many Thanks to all the Stargazers who has supported this project with stars(⭐)

Stargazers repo roster for @atapas/webapis-playground

πŸƒβ€β™€οΈ How to Run the project locally

To run the project locally,

  • Please clone it.
  • Browse to the project directory.
  • Install dependencies
  • Use Node 16.x.x or Node Version Switcher
npm install
# Or
yarn install
  • Run the application locally
npm run dev
# Or
yarn dev
  • Open the browser and navigate to http://localhost:3000

πŸš€ What's Included?

So far, it includes the following examples:

  1. πŸ“‚ File System API
  2. πŸ“Ί FullScreen API
  3. πŸ“‹ Clipboard API
  4. πŸ“‘ Broadcast
  5. πŸ“· Image Capture
  6. πŸ“Ά Network Info
  7. 🧐 Resize Observer
  8. πŸ’³ Payment Request
  9. πŸ“³ Vibration API
  10. πŸ”‹ Battery API
  11. 🐒 Drag and Drop
  12. βš“ Geolocation API
  13. πŸ–ΌοΈ Picture in Picture
  14. πŸ’» Screen Capture
  15. ✍️ CSS Font Loading
  16. πŸŽ™οΈ Web Speech API
  17. 🎨 Canvas API
  18. πŸ‘† Pointer Capture API
  19. 🌐 URL API
  20. πŸ—’οΈ Selection API
  21. πŸ“ƒ Page Visibility API
  22. πŸ’¬ WebRTC

🀝 Open Source

This project is open source and open for contributions. If you are looking for any examples and demonstrations that are missing, please open an issue from here. You can also contribute to the source code by adding an example, improving the code and providing suggestions.

🀝 Contributing to playground

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 our CODE OF CONDUCT, and the process for submitting pull requests to us.

πŸ™ Support

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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Max Programming
Max Programming

πŸ’»
Tapas Adhikary
Tapas Adhikary

πŸ’»
Nitesh Seram
Nitesh Seram

πŸ’» ️️️️♿️ πŸ›
Sameer Waskar
Sameer Waskar

πŸ’»
Omri Attiya
Omri Attiya

πŸ’»
Yash Raj
Yash Raj

πŸ’»
Rehan  Sattar
Rehan Sattar

πŸ’» πŸ›
Muhammad Ahsan Ayaz
Muhammad Ahsan Ayaz

πŸ’»
Koustov
Koustov

πŸ› πŸ’»
Aanchal
Aanchal

πŸ’»
Abhishek Khatri
Abhishek Khatri

πŸ’»
Avneesh Agarwal
Avneesh Agarwal

πŸ’»
Kunal Singh
Kunal Singh

πŸ’»
Rosie Z
Rosie Z

πŸ’»
Matheus Verissimo
Matheus Verissimo

πŸ’»
Abiola
Abiola

πŸ’»
Emit
Emit

πŸ’»
Tyler Morales
Tyler Morales

πŸ’»
chosunosu
chosunosu

πŸ›
Ε ime Vidas
Ε ime Vidas

πŸ›
Vaibhav Agrawal
Vaibhav Agrawal

πŸ“–
Bharati Subramanian
Bharati Subramanian

🎨
Sukhseerat Kaur
Sukhseerat Kaur

πŸ›
Richard Nikolas
Richard Nikolas

πŸ’»
Varun
Varun

πŸ’»
Supriya M
Supriya M

πŸ’»
Williams Samuel
Williams Samuel

πŸ’»
Geovana S. Ribeiro (Raveenita)
Geovana S. Ribeiro

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

About

The Web APIs Playground is a project to showcase the JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs are here to help with providing wrapper functions for many low-level tasks.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published