Virtual PC Keyboard

This is a browser-based keyboard simulator. It renders the standard US ANSI 104-key PC layout and detects real physical keyboard presses, showing each key's live state, lock indicators and modifier status.

Virtual keys simulate keyboard behaviour inside this webpage only: characters are inserted into the typing area above, navigation keys move the caret, and Backspace/Delete edit text — all handled by the app itself.

Browser security note: web pages cannot synthesize trusted operating-system keyboard events. Clicking a virtual key will never trigger OS-level shortcuts (like Win+L or Ctrl+Alt+Del), and some browser shortcuts remain out of reach. The simulator updates its own visual and internal state correctly in every case instead — it never claims to control your operating system.

Two real PC layouts, one physical keyboard: English (US) — the US ANSI 104-key layout — and العربية (Arabic 101), the standard Microsoft Arabic (101) layout (KLID 00000401). Switching layout never moves or mirrors a key: the same physical positions simply produce different characters, exactly like an Arabic PC keyboard. The physical key code (event.code) is resolved through the active layout, so pressing the position of Q gives ض in Arabic and Shift + Q gives َ (Fatha).

Arabic Shift layer: Arabic has no upper case, so Shift produces the Arabic 101 diacritics, letter forms and punctuation — ً ُ ٌ ِ ٍ ْ ّ (combining marks inserted as real Unicode), ligatures لا لأ لإ لآ, letters أ إ آ ؤ ئ ى ة ء, and symbols such as ، ؛ ؟ ÷ × ـ ‘ ’. Caps Lock never alters Arabic letters; it keeps its real lock state. Keycaps show the character the current layer will type, so pressing Shift changes the legends immediately.

Two presentation modes, one engine: Full renders the complete 104-key PC keyboard; Compact renders a smaller everyday typing layout (Esc, number row, letters, backspace, tab, caps, enter, both shifts, ctrl/alt/win, space and arrows) with an Fn layer that exposes F1–F12, Insert/Delete/Home/End/Page Up/Page Down, Print Screen/Scroll Lock/Pause and the whole numeric keypad. Nothing is lost: hidden keys are still understood by the engine, only the presentation changes. Keyboard mode and keyboard size are independent settings, and both survive a switch — as do your text, caret, language, modifiers and the floating window.

Compact is not a scaled-down full keyboard: the keypad, navigation cluster, Ins/Home/PgUp block and the function row are genuinely removed from the visible set (they live in the Fn layer), which makes it far more practical on phones, portrait tablets and in the Picture-in-Picture window. Compact keys stay at a usable size instead of being shrunk.

Floating keyboard: the same keyboard can be detached into a Document Picture-in-Picture window that stays on top of the page — same layout, same key definitions, same modifier and lock state, same settings. Where the browser lacks that API an in-page floating panel is provided instead and labelled as a fallback.

System-wide typing limitation: a browser page — including a floating window — types only inside its own web document (the typing area above). Web pages cannot synthesize trusted native keyboard events, so virtual keys cannot type into Microsoft Word, Notepad, Acrobat or any other external Windows application, and this simulator never claims otherwise. Every activation is normalised through one internal Virtual Key pipeline (virtual key down / virtual key up, carrying code, key value, modifiers, locks, repeat and source) kept separate from the interface, so a future host could subscribe to it — but no external bridge, native companion or installer exists or is needed: everything stays inside this one HTML file.

• Hold one virtual modifier with one finger and tap a letter with another finger for combos (multi-touch supported).
• Long-press letters, digits, Backspace or arrows to auto-repeat.
• Small numbers when Num Lock is off? Those are secondary legends, not a rendering fault: with Num Lock off the key's active legend becomes the navigation symbol (Home, ↑, PgUp, …) and the digit is kept small in the corner so the key can still be identified — the same dual printing a real keypad has. They sit in the corner because that is where every secondary legend sits on this board, and they can be withdrawn for a cleaner look with 2nd labels: hidden.
• Num Lock: with Num Lock on the keypad types digits; with Num Lock off it switches to the standard navigation mapping — 7 Home · 8 ↑ · 9 PgUp · 4 ← · 6 → · 1 End · 2 ↓ · 3 PgDn · 0 Ins · . Del — with the digit kept as a small corner legend. The inverted-T arrow cluster always keeps ↑ on the top row and ↓ on the bottom row.
• Typing into Word, Notepad or another application — the honest workflow. This keyboard types into its own editor, and it can place that text on the system clipboard. Browsers do not permit a normal HTML page to generate trusted keyboard input directly inside arbitrary external desktop applications, so the final paste is always performed by you: 1 type with the on-screen keys → 2 press Copy → 3 switch to Word (or any app) → 4 press Ctrl+V. Copy selection copies only the highlighted part, Copy all takes everything, Plain text skips rich formatting, and Save .txt / Save .html write local UTF-8 files (the .txt is a UTF-8 export with a BOM for broad compatibility with Windows applications; the .html is self-contained and uses dir="auto" so each paragraph keeps its own direction). Arabic, diacritics, mixed scripts and line breaks are copied exactly as typed — nothing is normalised, stripped or reordered.
• Enable Diagnostics to inspect event.code, event.key, modifiers, repeat state and timestamps.
• Zoom with the Size controls; the keyboard pans horizontally on small screens without shrinking the rest of the page.
• Compact at a glance: Esc · number row · Backspace · Tab · Q–P with brackets · Caps · A–L with punctuation · Enter · Z–M with punctuation · both Shifts · Ctrl/Win/Alt/Space/AltGr · PgUp and PgDn in the right-hand column (Del · PgUp · PgDn · →) · a true inverted-T arrow cluster — ↑ sits directly above ↓, with ← ↓ → on the bottom row · Fn for F1–F12, Insert, Delete, Home, End, Print Screen, Scroll Lock, Pause and the whole numeric keypad. Enter and both Shifts are narrower in Compact than in Full — that is what makes room for PgUp/PgDn and keeps the arrows on the same column. Switching modes keeps your text, caret, language, locks, size, theme and the floating keyboard intact.
• App-level function keys: F1 Help · F2 Diagnostics · F3 Sound · F5 Reset keyboard · F11 Fullscreen. Other function keys update keyboard state and the "last key" readout only.
• Keyboard layout and interface language are separate settings. The Keyboard layout control (and Alt+Shift) changes only which characters the keys type — menus, buttons, help text and page direction stay as they are. Use the Interface language control when you want the interface itself in Arabic (or back to English).
• Live clipboard — the closest thing to “auto-paste”: press Live clipboard and everything you type is mirrored to the system clipboard as you go (no Copy click needed); then switch to Word and press Ctrl+V. A small banner reminds you of those two steps and disappears once you leave the page. Exactly one part cannot be automated: the paste itself — a page may not send input into another application, so that keystroke must be yours. If the browser refuses clipboard access, live mode switches itself off and tells you.
• Function keys F1–F12: F1 opens Help · F2 toggles Diagnostics · F3 toggles sound · F5 resets the keyboard state · F11 toggles fullscreen. The rest update key state and read-outs only. That is expected, not a fault — the usual duties of those keys (reload, find, address bar, developer tools, menu bar) belong to browser chrome or the operating system, and a page is not permitted to perform them; browsers often do not even deliver F12 to a page. The keycap tooltip spells out any difference: "physical: … · here: …".
• Alt+Shift switches the layout — press and hold both together (either order) to toggle between English (US) and العربية (Arabic 101), exactly like the PC language chord. It fires once per hold, works with the on-screen Alt/Shift keys too, and can be turned off with the Alt+Shift control if your operating system already claims that chord. Ctrl+Shift is deliberately left alone so editing chords such as Ctrl+Shift+Z keep working.
• Function row: Esc and F1–F12 keep their classic 4-4-4 grouping (wider gap after Esc, group gaps after F4 and after F8). Print Screen / Scroll Lock / Pause sit directly above Insert / Home / Page Up with the familiar void above the navigation cluster — the real 104-key arrangement, where the F-keys deliberately stop short of Backspace so the system cluster can sit over the navigation keys. The alignment is measured live and shown in Diagnostics (sys nav, fn void).
• Floating keyboard: use the Floating keyboard control to detach this exact keyboard into a Document Picture-in-Picture window (or an in-page fallback panel where that API is unavailable). It shares this page’s layout, state and settings.
• Keys that have focus inside the keyboard can be navigated with the arrow keys and activated with Enter or Space; Escape returns focus to the typing area.