tplai/kbsim

Mechanical keyboard simulator website w/ a typing test. Offers 10+ unique switch sounds, layouts, and keyboard colors for an oddly satisfying typing experience.

Mechanical Keyboard Simulator - kbs.im

Mechanical Keyboard Simulator is website that simulates typing on a variety of custom keyswitches and offers a simple typing test. Currently, it supports 10+ switches, keyboard layouts, and colors for an customizable, satisfying typing experience.

Features

• Unique sounds for specific keys
• 1 minute English typing test
• Wide selection of case colors and layouts
• Dark mode

Currently Supported Switches

• NovelKeys Creams
• Holy Pandas
• Turqoise Tealios
• Gateron Black Inks
• Cherry MX Blacks
• Cherry MX Browns
• Cherry MX Blues
• Kailh Box Navies
• Buckling Spring
• SKCM Blue Alps
• Topre

Currently Supported Layouts

• Fullsize
• Tenkeyless
• 75%
• 65%
• HHKB

Requests

Switch and layout requests are open at the moment, feel free to open an issue if you'd like to see a switch or layout added!

Developers

Setup

To run this application locally, use:

npm install
npm start

Project structure

.
├── src                                           # Source files
│   ├── assets                                    # audio and image assets
|   |   ├── audio  
|   |   └── images
│   ├── features                                  # components and modules
│   |   ├── Store                                 # Redux store
|   |   |   └── store.js
|   |   └── sampleComponent                       # component structure
|   |       ├── SampleComponent.js
|   |       ├── SampleComponentSlice.js
|   |       └── SampleComponent.module.css
│   ├── public                                    # robots.txt
|   |   └── robots.txt
|   ├── App.test.js                               # starter React test file
|   ├── index.css                                 # index styling
|   ├── index.html                                # meta tags
|   ├── index.js                                  # React entry point
|   └── serviceWorker.js                          # basic offline usage serviceWorker
├── .babelrc                                      # babel transpiler config
├── LICENSE.md                                    # MIT license
├── README.md                                     # you're reading this!
├── package.lock.json                             # npm dependency lockfile
├── package.json                                  # dependency file
├── webpack.config.json                           # webpack config file
└── yarn.lock                                     # yarn dependency lockfile

Contributing

Pull requests are welcome, but please do create an issue to discuss any major changes.

kbsim's Issues

(New Switches)

You should add some more switches and have lube for them (i hope u know what i mean by lube NOT THAT LUBE

Always hearing the keys

Is there any way possible to hear the key sounds when I am for example playing a game?

3 More Ideas

I have no clue if any of these are possible because I can't code that well but I hope that it is possible.

#1 is to add something that is RGB and reacts to key clicks.

#2 Another idea is to add custom boards and keycaps.
What I mean is like you are able to put different keycaps on different boards. For example, blue pudding keycaps with a gk61 board.
I think these would be cool.

#3 I also have no clue if it's possible but I would also think it would be cool for a foam mod and or tape.
Maybe a new collum with modifications you can put on the keyboard.

New feature (Lubed and stock)

New Feature

You should add a new feature that allows you to choose between lubed and stock switches. Not under the switches collum but a new collum. I think that with it that you should add a film one with the stock, and lubed. And combinations like lubed and filmed.

(P.S loving the site don't stop and keep going.)

kbs.im on Firefox, the semicolon key does not produce a sound when the key is pressed.

Problem:
kbs.im on firefox, the semicolon key ";" does not produce a sound when the key is pressed. if i click it with the mouse it does produce a sound, and the semicolon key does display in the text field so the value its being capture.

ScreenCapture:

Browser: Firefox 101
OS: MacOS Monterey

Love this project, keep up the good work!