aradzie / keybr.com

The smartest way to learn touch typing and improve your typing speed.

keybr.com is not (just) a typing test

It's the smartest way to learn touch typing and improve your typing speed. On the surface it looks pretty simple, it shows you a piece of text, you type it out. The devil is in the details, keybr.com has a few unique features.

• keybr.com tracks every single key press and computes statistics for each individual keyboard key.
• It automatically generates lessons focusing on your weakest keys.
• It allows you to set your own target typing speed and tracks your progress toward this goal.
• It starts with a small list of the most frequent letters of your language.
• It adds more letters later when you reach the target speed with the previous letters.
• It can predict future and tell you how many more lessons to complete to reach the target speed.
• It shows you a beautiful profile page with lots of graphs and the details about your learning progress.
• It has plenty of modes and configuration options.

Can I contribute?

Yes!

• Give us a ⭐️. Help this project gain visibility and stand out.
• Report a bug. If something is not working, let us know.
• Suggest a feature. We are open to new ideas.
• Translate. If you want to see keybr.com in your language.
• Getting started. Launch a local instance of keybr.com, make a pull request.
• Add a keyboard. Add a custom keyboard to keybr.com
• Add a language. Add a custom language to keybr.com
• Join our Discord server. To discuss things in a less formal way.

License

Released under the GNU Affero General Public License v3.0.

keybr.com's Issues

feature: control the amount of capitals and punctuation characters

Make the probability of those characters adjustable by a slider

How to build on windows

I want to help with the repo, but there doesn't seem to be any docs on how to build on windows. This repo seems very platform specific. I also keep getting webpack errors saying there are loaders for files, specifically mp3 wav and font files

feature: play sounds only on errors

Restrict the library of sounds played to:

1. All sounds
2. Only errors
3. ...

Bug: Enter key no longer moves to a new line

Previously, when reaching the end of a line, either Space or Enter would move the cursor to a new line. Now only Space works, while Enter is treated as an error. I noticed this after the colored keyboard layout was introduced.

[Feature] Store last paragraph index when the test option is "Book Paragraphs"

Under "Typing Test" -> “Settings” when the test option is selected as "Book Paragraphs", it would be helpful to store the last position of the book rather than restarting from the beginning of the book every time. This can be the default behavior, or a checkbox can be provided in the setting to facilitate this.

[Feature] Add ctrl, tab and alt keys

im trying to learn to type so i can start using vim as my editor, but i suck at typing with the ctrl tab and alt keys. Would be nice if this app included that. Im willing to make my own fork for it if needed but it seems like this app doesnt accept contributions

req: add arabic to languages that can practiced

feature: bring back the learning rate metric

On the key details graph show how much WPM is gained with every lesson for a key.

Also, detect if learning rate is increasing or decreasing. Indicate this trend to the users.

feature: control the usage of the Shift key

The Shift key is pressed by the pinky finger on the hand opposite to the one hitting the key.
Add an option to register the press of a wrong Shift as an invalid input.

feature: Enhance the behaviour of `Stop cursor on error`

Usul Muad'Dib
—
10/16/2023 10:49 AM
@keybr With the Stop cursor on error setting disabled the erroneous keystrokes bump the next keys to the side. I find it a bit jarring, increasing eye fatigue and making it hard to keep my place when reading. Maybe the erroneous keys could replace the future correct keys until they are deleted revealing the correct keys again. This way the text wouldn't be jumping. The letters that need to be deleted should probably be made visually distinct from letters that were previously missed and corrected.

Related but not the same: a stop on word option. Like stop cursor on error but it lets you continue until a space character. This way you still have to delete the wrong characters and you save time if you notice your mistakes right away but you can't keep typing forever and having to delete all of it.

feature: add matrix keyboard view

add matrix keyboard view as additional view to be selected instead classic view

example for matrix keyboard view with colemak (picture from https://colemakmods.github.io/mod-dh/keyboards.html)

bug: typing accents using dead keys produce duplicated letters

Platform: Ubuntu 23.04
Browser: Firefox 118.0.1
I'm using the built-in English (programmer Dvorak) layout.

Doing Typing Test with text settings set to "Common words" and language set to "French (Français)"

typing accent using dead keys (for example, Alt+^ then i) normally produce a single î but keybr register it as two.

feature: design a new lesson type for punctuation

Let people practice the punctuation characters in isolation.

Allow English words with German layout

Currently if you select the English language in the settings, then you can only select the US and UK layouts. I would like to practice writing in English with my German keyboard though. So it would be great if the language and keyboard setting would be independent of each other.

bug: document responsive font-size

The font displayed in presenter is really different in my two displays, macbook build-in monitor and a 3840*2160 monitor.

Assuring there is no zoom effect in the website, the font in MacBook monitor is rather small, and is larger in another. I use the same browser window in two displays, a horizontal scroll bar appears in the larger monitor while website page fully displays in the smaller one.

I found the cause of this issue is the html root font size.

keybr.com/packages/keybr-styles/lib/common/fonts.less

Lines 16 to 22 in b5410fc

	.fontsize(@width, @size) {
	// Please note that the "device-width" query is deprecated, however the
	// "width" query reports browser window size, not screen size.
	// stylelint-disable-next-line media-query-no-invalid
	@media (min-width: @width), (min-device-width: @width) {
	html {
	font-size: @size;

I think using the browser window size to calculate the font-size is better.

I tried to adjust, and successfully work out a reasonable style in my devices. I think it is compatible🥹.

.fontsize(640px, 12px);
.fontsize(1024px, 14px);
.fontsize(1280px, 16px);

.fontsize(@width, @size) {
  @media (min-width: @width) {
    html { }
  }
}

feature: group graph data by date

Now the graphs are continuous, they are indexed by lesson number.
Group results by days, show how typing speed changes day by day.
Detect gaps between learning sessions. If there is a break of a few days between learning sessions, this can be shown by a gap in graph data. It would be interesting to see how typing speed changed in that period between lessons.

feature: randomize words of custom text

Your website is amazing. Please add an option to randomize words in a custom text.

I personally use custom texts to train specific letters, so I usually add a list of words containing a given letter, and I’d like to just practice those words in random order. Whereas now I have no manually randomize my custom text and even then, every time I log back in, I have to start from the beginning of the text.

better charts

What people say:

Alright : The propositions are more oriented on the readability of the graphs. I'm a young researcher, and i've been triggered (like a good karen) by the lack of ease into data reading that i'm not used too :p

My main concern is about the typing speed graph :
-Add an explanation to what operation the "smoothness" does to the data : It will help people to understand how to read this chart. I guess it means the y values with n neighbours, depending on the smoothness value, but i feel like something is off : when you smooth at max value, the max typing speed drops from 37 to 12.2 wpm. So you should maybe warn that smoothed values are not real ones and that the axis graduation is not representative. Then, mention that the smoothness is just for better learning curve visualization.
-Add Y axis scale for error and key number on the left.

For key frequency histogram
-Add a Y axis scale and/or the value on each bar : there is absolutely no Y values indications, that makes them useless. We have no scale to get an idea of the values.

For key frequency heatmap
-Add a legend : i can not understand what is displayed here. It seems like it is error vs good strike.
-Add a scale : If red is mistakes and green good strike, I think I make less mistakes than good strike, so why are both keys the same size ? Maybe you should uniform the scale between max error and max good.

I hope this will help you to improve the readability of the metrics you display.

Overall the website is really good looking and you made a great job !
I'm really enjoying my experience with it ! So thanks a lot for your hard work !

feature: switch between the compact and the full keyboard view

Add a checkbox to the settings page to enable the full keyboard view.

feature: add the ability to set a custom speed target

When practicing in either generated or natural text, make it possible for users to manually adjust the target speed threshold.
In the guided mode this threshold can only be changed when the user has already unlocked all the keys in with the standard threshold.

Does not work in Firefox (and ublock origin) anymore

Hi,
the site displays only a white page with Firefox and ublock origin. It worked on Friday so it this was probably caused by some change on the weekend. I have now bought premium and it works again.

To buy premium, I had to use ungoogled-chromium (also with ublock origin active) though.

feature: show typos on the virtual keyboard after a lesson

When a lesson is completed, we show a heatmap overlay on the virtual keyboard. In addition to this, explore the possibility to show typing errors in the form of an arrow from the intended key to the actually typed key.

feature: require perfect accuracy to unlock a key

In addition to the target typing speed, add a requirement of perfect accuracy to unlock a key.

feature: show state of the modifier keys, such as CapsLock and NumLock

On the virtual keyboard show state whether CapsLock and NumLock is on or off.

feature: show heatmap overlay on the virtual keyboard after a lesson

When a lesson is completed, show heatmap overlay over the virtual keyboard to show "hot" keys.
Also, explore the possibility of showing bigrams.
In the "the" word, there are two bigrams, "th" and "he". Thse can be visualized as two arrows comming from "t" to "h", and from "h" to "e". The number of occurrences of bigrams can be indicated by arrow thickness.
The idea is to show alterations of fingers used for typing.

Layout toggling does not work correctly.

Tried switching layout to colemak and noticed that some of the inputs are displayed in their QWERTY positions.

Here's input from QWERTY keyboard, on a Colemak layout, you can see that the keys are highlighted in order, even though E should have been highlighted on the home row.

Here is the Colemak keyboard with the "QWF" motion. You can see that instead of the F being highlighted in the top row, it's highlighted as a T (that's where the F is located at on the QWERTY layout.

[Feature request] colour coded keyboard

Sometimes I forgot which finger is used to press key like: "c", "y", "r". Would be helpful to have optional colour on virtual keyboard.

keybr.com site should show a link to the tag or commit hash

The webpage keybr.com should show a link to the tag or commit hash, which was used to deploy to keybr.com.
So that users know which features are expected and which features are not yet available.
I think it could be next to the GitHub link or in a subpage like Help page.

feature: require all keys above threshold to unlock the next key

It is a typical situation that when a user unlocks and focuses on a new key, all the previously unlocked keys suffer.
Let's say we are going from R to L. As we learn L, the speed of R will likely drop.

Add a new option that requires users to pass the speed threshold for all previously unlocked keys before a new key is unlocked.

Example scenario.
A user successfully unlocked E,I,N,T,R and the focus is on key L.
User works on L, and in the process the speed of E,I,N,T,R drop below the threshold.
User passed the speed threshold for L, however the new key is not unlocked.
Instead, the algorithm focuses on one of E,I,N,T,R until the user recovers their speed.

feature: add the ability to copy graphs to the clipboard

feature: hightlight keys 'f' anf 'j'

Add the option to visually distinguish the F and J home keys.
Maybe with something like a dot on the key, or a bolder outline, or a color accent.

feature: a new typing assist, the space key skips words

The space key, when pressed, skips the remaining characters of the current word then positions the cursor at a word separating space character.

bug: fix positions of the popup components

wasted space on premium accounts

On a premium acc, as we don't show ads. we can maybe make the practice screen bigger or add some graph to use all that space

[feature req] Please add ( ) { } [ ] \ + = the characters . Will be helpful for programmer

I have been using this website more than years. I improved my typing speed quite lot .
I searched the settings and added the punctuation characters but these ( ) { } [ ] \ + characters didn't showed .
It will be helpful if you add those extra characters. Those are extremely common words for programmer .
You can add a separate section in setting!

better support of accents

i @keybr. I am trying out your app again to check out your Bépo layout implementation (congrats, it's really well done!). It suddenly reminded me of what originally drove me to your Discord server! Some letters are missing from the French language. I have a list of letters that I created based on a dictionary of words and their frequency (though this can be debatable since a dictionary doesn't reveal the frequency of words usage). Here it is, from the most to the least common: eiarstnoulcémpdgbhfvzqâyèàxjîçêkûïôwœæ. From that list, the last ones, œ and æ (ligature letters), cannot be created with any other keyboard in your list of French layouts, apart from Bépo, so you can omit them. However, the letters à and â, for example, are quite common, each with their own specificities: à is found only in 11 words actually, but it is widely used on its own as a preposition to indicate a place or a time, and can be found in various expressions. â is found in a huge number of words and verbs (such as "château", "infâmes", etc.). I missed those letters during my first attempt to use your app (yeah I restarted several times the stats…), and I think it's worth mentioning.

feature: let users manually choose a key to focus on

distracting keyboard view when using programmable keyboards

Having a programmable keyboard, I'm facing the issue to have a qwerty keyboard displayed on the training view while using a non-emulated dvorak... and it is distracting...

I propose to let the user to decide which layout to show, or to let the user disable the keyboard view.

feature: inactivity animation

When keybr is left alone for some time, do something funny. I have this one idea: ghost typing. When not touched for a minute or two, keybr begins to type by itself.

feature: multiple high-scores tables

Impelment several high-score tables for different periods, 1h, 24h, 72h, 1 week, etc.

feature: add the ability to compare profiles

Compare profiles with friends or something like this.

Feature Request: Add the ability to create custom layouts.

Why should we be limited to standard layouts only? Why can't we create our custom layouts? I memorized my custom layout. Your trainer just wouldn't let me do it.

feature: replace averages with something else

What users say:

The problem with the current implementation is that the most you train on keybr, the more difficult is to have the average to reflect your actual speed. For example: I am consistently typing at around 82-87 wpm (since about one month), but my average is still stuck in the 70s because my last month of 80+ WPM is averaged with almost one year of previous data when I was significantly slower. The fact one year ago my wpm was 30 or so is irrelevant to my training though, it tells me nothing about how am I doing/trending. What I would like to know is how my current training session compares against my recent average performance (e.g.: last month or last 20 sessions, if you wanted to keep the calculations simple).

Alternatively: replace all times averages with yesterday's averages.

Feature: Add accuracy to confidence variable

Currently only speed has effect on the confidence variable. It would be good if accuracy had an effect as well. Currently you can brute force your way through a key by rapidly mashing different keys.

Also it would be good if you could move on to next key only if all other keys have confidence level of 1 as well. This way introduction of new keys wouldn't mean pessimization of some other

feature: multiple profiles

This idea came from a user:

Awesome product, thanks for what you've built!

I want to practice in different environments: for example, with an ortholinear keyboard on my desktop and maintain speed on my laptop. Or, in the future, switching between qwerty and colemak.

But, these require different learning profiles, where we don't compare the results of one context to the other.

Is there a way to do this?

Feature: Please add UK English option

Hi

I really like keybr but will likely not use it unless I can practice touch typing using UK English spelling.
I think adding this will really open the UK audience to this application.

Thank you
Alv

feature: display statistics about accuracy streaks on the profile page

.

feature: allow to resize and reposition the components on the practice screen

Use mouse wheel to zoom the virtual keyboard and the text fragment.
Add the ability to drag these components using mouse to a different location on the screen.

feature: add variance to histogram graphs

The histograms show averate value. Add variance.

[Feature] Add average accuracy to "All Time Statistics" and "Statistics for Today" on the profile page

Being accurate is a critical aspect to consider. While some may argue that it's more significant than speed, we can only measure our attempt accuracy and not the statistical trends like speed. Therefore, it is recommended to include the average accuracy in both the "All Time Statistics" and "Statistics for Today" sections on the profile page, just like speed.