Collection of free vanilla JavaScript keyboard code examples. Update of February 2020 collection. 4 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Gangnam Style Keyboard
Minimal keyboard created using CSS Grid.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Interactive Keyboard Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus) / JS
About a code
Neu Keyboard
Recreating 60% keyboard in CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Neuomorphic Keyboard
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Keyboard - Type Something
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Keyboard Hero
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Interactive 60% Keyboard
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / JS (Babel)
About a code
Keyboard Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS / JS
About a code
Apple Keyboard
Just another CSS grid demo. This time, it’s an interactive Apple USB keyboard (without the cable).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
JavaScript Interactive Keyboard
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
WAAAAPI Keyboard
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: web-animations-next.js

Links
Made with
- HTML / CSS / JS
About a code
Web Audio Keyboard
C Major, 3 octaves, QWERTY because bumper-bowling is way more fun.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -