Online Keyboard Layout · Free & Interactive · 104-Key ANSI

Keyboard Layout

Press any key to highlight it in real time, click a key to view its function, shortcuts, and notes; five color-coded zones help you quickly learn the keyboard layout.

Keyboard Layout

0/104

Num

Caps

Scroll

0 keys pressed at once. Some keyboards may not recognize all keys.

Function Keys16 keys

Main Keys48 keys

Modifier Keys13 keys

Editing Keys10 keys

Numpad17 keys

🎨 Click any color block above to highlight the corresponding keyboard area and view its description.

Esc

F10

F11

F12

PrtSc

ScrLk

Pause

Backspace

Tab

[

]

Caps

;

Enter

Shift

Ctrl

Win

Alt

Win

Ctrl

Ins

Home

PgUp

Del

End

PgDn

↑

←

↓

→

Num

Enter

Press any key to see what it does

Each key on the keyboard has a knowledge card with its function, usage, and common shortcuts.
You can also click a key above, or click a colored area legend to learn the keyboard area by area.

About the Keyboard Layout

Keyboard Layout is an online interactive tool based on the Windows 104-key ANSI layout. It includes real-time key highlighting, color-coded zones, key knowledge cards, shortcut lookups, and key testing statistics — ideal for keyboard beginners, office workers, programmers, students, and writers who want to systematically understand the keyboard layout, fill in gaps, and build key memory.

What is a keyboard layout?

A keyboard layout is an interactive page that graphically presents the position and function of every key on a keyboard. It intuitively displays each key's location, name, and purpose, and users can trigger a description by clicking or pressing the corresponding key. Unlike a static keyboard image, an online keyboard layout combines "seeing" with "pressing," helping users build both spatial and muscle memory. This keyboard layout also offers key testing progress statistics, zone color filtering, sound feedback, and indicator light synchronization, making the process of learning the keyboard layout more intuitive and efficient.

Keyboard layout overview

Common keyboard layouts include ANSI (US standard), ISO (European), and JIS (Japanese). ANSI uses a long Enter key, a long left Shift key, and a single-row backslash key, and is the most common keyboard layout in North America and most regions. ISO features an inverted L-shaped Enter key and an extra key, widely used in Europe. JIS adds kana and conversion keys. This keyboard diagram is drawn based on the ANSI layout, and the vast majority of key knowledge and function descriptions also apply to other layouts. Understanding the differences between keyboard layouts helps users quickly adapt to key changes across devices, and the keyboard layout is a visual reference for comparing and familiarizing yourself with these layouts.

Differences between keyboards with different key counts

Keyboards can be categorized by key count into the 104-key full-size, 87-key TKL (no numpad), and 61-key 60% compact. The 104-key includes the complete main key area, function key area, editing key area, and numeric keypad, suitable for office work and data entry. The 87-key removes the right-side numpad to save desk space. The 61-key further trims the F-row and editing keys, implementing the same functions via combinations, making it more portable. This keyboard layout is based on the 104-key full-size, serving as the basic reference for understanding various keyboard layouts. Whether you use a full-size or compact keyboard, you can understand the universal functions and combination logic of keys through this keyboard diagram, allowing you to transition smoothly between different keyboards.

How to quickly master keyboard key usage?

It's recommended to learn zone by zone according to the color divisions: first familiarize yourself with the letters and numbers in the main key area, then master the combination logic of modifier keys like Ctrl, Shift, Alt, and Win, followed by the cursor operations of editing keys like Ins, Home, and End, and finally the switching methods of the F-row function keys and numpad. Practice in real time with this keyboard layout — 10 to 15 minutes a day, and you can typically build an overall understanding of the keyboard layout within a week and form muscle memory for common shortcuts. Keep your hands on the home row while practicing, reduce the number of times you look down at the keyboard, and let the keyboard diagram become your on-demand reference manual.

How to view detailed descriptions of keys?

This keyboard layout provides a knowledge card for every key. You can press any key directly on your physical keyboard, or click a key on the screen, and the page will immediately display that key's name, function description, usage, common shortcuts, and notes. If you press multiple keys at once, the top of the page also tracks the number of tested keys and the progress percentage, helping you understand how many keys you've become familiar with. Clicking the colored zone legend above the keyboard highlights all keys in that zone and shows a summary description for that area; the bottom legend marks the four states of untested, tested, pressed, and selected. Through these interactive designs, the keyboard layout is not just a static keyboard image, but a hands-on keyboard learning tool.

Keyboard Layout FAQ

Does the online keyboard layout record the keys I press?

No. This keyboard layout runs entirely in your browser locally. Key events are only used to trigger highlighting and description cards, are not sent to any server, and do not read the specific text you type. The page only recognizes the physical code of a key (such as KeyA or Enter), so even pressing password characters poses no privacy concern. All data is cleared once the page is closed, so you can safely use the keyboard diagram for key lookups and practice.

Why do some shortcuts I press not trigger on the keyboard layout?

For security reasons, browsers intercept certain system-level shortcuts such as Alt+F4, Ctrl+W, and Win-key related operations, so the keyboard layout cannot receive these events. In addition, when 7 or more keys are pressed simultaneously, an ordinary keyboard cannot recognize them all due to Key Rollover limits. The shortcut descriptions on the page come from a knowledge base and are unrelated to browser interception behavior — you can still learn their purposes through the keyboard diagram.

Do the Num / Caps / Scroll indicator lights on the keyboard diagram sync?

Yes. The page reads the on/off state of Caps Lock, Num Lock, and Scroll Lock through the browser's modifier key state interface. When you press the corresponding key, the indicator light in the top-right corner of the keyboard diagram lights up in real time, matching the indicator on your physical keyboard, making it easy to confirm the current input mode. This feature makes the keyboard layout not only a learning tool but also a status indicator panel for daily keyboard use.

How do I turn the key sound on or off?

There is a sound toggle button in the top-right corner of the keyboard layout, with a speaker icon. Click it to turn the key sound on or off. When enabled, each press of a key on the keyboard plays a short notification sound, helping you confirm that the key has been recognized. The sound is synthesized locally by the browser — no additional audio files are loaded, and no network requests are made.

How do I reset the test record and progress?

Click the "Reset" button in the top-right corner of the keyboard layout to clear all test records. After resetting, all green marks on tested keys disappear, and the tested count and progress bar at the top return to zero, letting you start a fresh round of key familiarization practice. The reset does not affect other page functions and does not erase your memory of the keyboard layout.

Why does a conflict warning appear when pressing multiple keys at once?

Due to hardware limitations, ordinary keyboards may not recognize all keys when 6 or more are pressed simultaneously — this is known as key rollover limitation. The keyboard layout displays a warning when you press more than 6 keys at once, informing you that some keyboards may not recognize all keys. This is normal behavior, not a page malfunction, and you can avoid it by reducing the number of keys pressed simultaneously.

Does the keyboard layout support touchscreen use on mobile?

Viewing and clicking are supported. Since mobile devices have no physical keyboard, the press-to-highlight feature cannot be triggered, but you can still click keys on the screen to view each key's function description, common shortcuts, and notes. The responsive layout of the keyboard diagram automatically adapts to narrow screens, making it easy to look up key knowledge on your phone. Whether on a computer or a phone, the keyboard layout provides a consistent key lookup experience.

Do the key knowledge in the keyboard diagram apply to macOS or Linux?

Mostly yes. This keyboard layout is based on the Windows 104-key ANSI layout. The vast majority of key knowledge — Ctrl, Shift, Alt, arrow keys, editing keys, and more — also applies to macOS and Linux. The differences are mainly in the Win key (which is Command on macOS) and some system-level shortcut bindings, which are easy to distinguish when learning. The basic logic of the keyboard layout is universal, and the keyboard diagram helps you quickly transfer existing knowledge.