Collection of free vanilla JavaScript keyboard code examples. Update of February 2020 collection. 4 new items.

Author

  • Martín Stanicio

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: -

Author

  • Stívali Serna

Links

Made with

  • HTML / CSS / JS

About a code

Interactive Keyboard Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Manan Tank

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: -

Author

  • Braydon Coyer

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neuomorphic Keyboard

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ricardo Oliva Alonso

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Keyboard - Type Something

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • evilpaper

Links

Made with

  • HTML / CSS / JS

About a code

Keyboard Hero

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • James Holmes

Links

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Interactive 60% Keyboard

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jacob Foster

Links

Made with

  • HTML (Pug) / JS (Babel)

About a code

Keyboard Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Apple Keyboard

Author

  • Jon Kantner

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: -

Author

  • Josh Collinsworth

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

JavaScript Interactive Keyboard

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Dan Wilson

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

Demo image: Web Audio Keyboard

Author

  • Dave DeSandro

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: -