25+ JavaScript Keyboards - Free Code + Demos

Collection of 25+ JavaScript Keyboards. All items are 100% free and open-source.

1. Keyboard - Type Something

JavaScript Keyboards - Keyboard - Type something
Author: Ricardo Oliva Alonso (ricardoolivaalonso)
Created on: December 26, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

2. Keyboard Hero

JavaScript Keyboards - Keyboard Hero
Author: evilpaper (evilpaper)
Created on: October 31, 2019
Made with: HTML, CSS, JS

3. Interactive 60% Keyboard

JavaScript Keyboards - Interactive 60% Keyboard
Author: James Holmes (32bitkid)
Created on: June 17, 2019
Made with: HTML, SCSS, TypeScript

4. CSS Grid Experiment: Keyboard Layout

JavaScript Keyboards - CSS Grid Experiment: Keyboard Layout
Author: Raj Suhail (irajsuhail)
Created on: May 20, 2019
Made with: HTML, CSS

5. Apple Keyboard

JavaScript Keyboards - Apple Keyboard
Just another CSS grid demo. This time, it’s an interactive Apple USB keyboard (without the cable). Update 6/7/18: reduced JS code
Author: Jon Kantner (jkantner)
Created on: June 1, 2018
Made with: HTML, CSS, JS
Tags: mac, apple, keyboard, grid, skeuomorphic

6. WAAAAPI Keyboard

JavaScript Keyboards - WAAAAPI Keyboard
Started because I wanted to title something "WAAAAPI" (Web Animations and Audio APIs). And also because I wanted to refamiliarize myself with the basics of oscillators. And then also familiarize myself with the Web Audio API. Verified in Firefox, Edge, and Chrome so far.
Author: Dan Wilson (danwilson)
Created on: August 3, 2016
Made with: HTML, SCSS, JS
Tags: web-audio-api, web animations api, web-audio, animations api, synth

7. Web Audio Keyboard

JavaScript Keyboards - Web audio keyboard
So rad http://codepen.io/SeanMcBeth/pen/meaQvj C Major, 3 octaves, QWERTY because bumper-bowling is way more fun Love how each browser has its own sound. Chrome is squeaky clean. Firefox kinda raw. And Safari has glorious 90's era fuzz
Author: Dave DeSandro (desandro)
Created on: January 31, 2016
Made with: HTML, CSS, JS
Tags: webaudio

8. Virtual Keyboard

JavaScript Keyboards - Virtual Keyboard
User Friendly Virtual Keyboard A virtual keyboard with cool themes and custom key functionalities. Keyboard for Windows Developed with HTML, CSS, and JS without any dependencies. To-do list Themes Keyboard for Macintosh Custom music for any key Custom key functions Mobile responsive...
Read More
Author: Sai Nikhil (iamsainikhil)
Created on: August 19, 2018
Made with: HTML, CSS, JS
Tags: html, css, javascript, keyboard, css-grid

9. Javascript Calculator With Keyboard Input

JavaScript Keyboards - Javascript Calculator with Keyboard Input
Author: Gabriel Smith (thecountgs)
Created on: October 19, 2016
Made with: HTML, CSS, JS

10. JavaScript Piano

JavaScript Keyboards - JavaScript Piano
Author: Caroline Gabriel (gabrielcarol)
Created on: September 20, 2017
Made with: HTML, CSS, JS

11. Simple Keypress Calculator With Javascript

JavaScript Keyboards - Simple Keypress Calculator with Javascript
Author: Tobias Rickmann (tobirick)
Created on: November 29, 2017
Made with: HTML, SCSS, JS

12. Alphabet Keyboard Listener

JavaScript Keyboards - Alphabet Keyboard Listener
Author: Monica Powell (M0nica)
Created on: June 13, 2020
Made with: HTML, CSS, JS
Tags: alphabet, letters, eventlisteners, keyboard, sound

13. Virtual Keyboard

JavaScript Keyboards - Virtual Keyboard
My task is to write a script that will make the keyboard work. When clicking on a button with a letter or a space, the text content of this button should be added to the text content of the display. When we click on the clear button, all text inside the display should be deleted.
Author: Anika Specter (anikaspecter)
Created on: June 4, 2020
Made with: HTML, CSS, JS
Tags: junior, keyboard, javascript, virtual keybord

14. JavaScript - Virtual Keyboard

JavaScript Keyboards - JavaScript - Virtual Keyboard
JavaScript - Virtual Keyboard
Author: Igor Agapov (harryheman)
Created on: April 28, 2020
Made with: HTML, CSS, JS
Tags: javascript, virtual, keyboard, js


JavaScript Keyboards - NEU KEYBOARD
Recreating my 60% keyboard in CSS
Author: Manan Tank (MananTank)
Created on: April 4, 2020
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: keyboard, colors, neumorphism, grid, cssgrid

16. Keyboard Layout With Html Css And Js

JavaScript Keyboards - Keyboard layout with html css and js
Type any key on the keyboard and the key you pressed will show on the layout
Author: Khalid (khalid8774)
Created on: March 18, 2020
Made with: HTML, CSS, JS
Tags: keyboard

17. Neumorphic Keyboard (Responsive + Interactive)

JavaScript Keyboards - Neumorphic Keyboard (Responsive + Interactive)
Hopping on the bandwagon! This is a mashup of a few awesome projects: http://plnkr.co/edit/aCcc87hAakSaPYwQhO7S https://codepen.io/gschier/pen/VKgyaY https://neumorphism.io I made a bunch of changes: Styling, obviously Now responsive with CSS, no JS necessary Simplified the markup an...
Read More
Author: Riley Shaw (rileyjshaw)
Created on: February 11, 2020
Made with: HTML, SCSS, Babel
Tags: newmorphism, keyboard, ui, trendy, rubberized

18. Keyboard

JavaScript Keyboards - keyboard
a simple keyboard
Author: Michael Quimabao (ThatCoderGuy722)
Created on: October 12, 2019
Made with: HTML, CSS, JS
Tags: keyboard, onscreen, michael quiambao

19. Virtual Keyboard Activity

JavaScript Keyboards - Virtual Keyboard Activity
Create Virtual Keyboard with html css and jquery, keyboard pure css
Author: Adi Jaya (onclick_indo)
Created on: September 29, 2019
Made with: HTML, CSS, JS
Tags: keyboard

20. HTML CSS Keyboard For JavaScript Key Code Finder

JavaScript Keyboards - HTML CSS keyboard for JavaScript key code finder
Fully responsive keyboard app for JavaScript event key code finder. using Grid CSS
Author: Aleksandar Cizmadija (AleksandarCizmadija)
Created on: July 26, 2018
Made with: HTML, SCSS, JS
Tags: css, html, javascript, keyboard, responsive

21. Backlighted Keyboard

JavaScript Keyboards - Backlighted Keyboard
Backlighted Keyboard "Apple Inspired" CSS + JS
Author: Paul Vanlerberghe (PaulVlbg)
Created on: March 1, 2019
Made with: HTML, PostCSS, Babel
Tags: javascript, css, keyboard, skeuomorphism