Multi-Alphabet On-Screen Keyboard

I’m building a cross-platform typing tool and I need a custom on-screen keyboard that works smoothly on desktop, tablet, and mobile browsers. Its primary purpose is to let users type in the Mapalineda alphabet, with the flexibility to fall back to the more common Latin, Cyrillic, and Greek layouts whenever they’re needed.

Here’s the workflow I have in mind: when a user chooses a script, the corresponding key layout appears instantly; switching between scripts should feel as fast as changing tabs. All characters must be delivered as standard Unicode so the text can be copied into any document or web form without extra conversion.

Because this will run inside modern browsers, I’m expecting clean, lightweight JavaScript (ES6+), HTML5, and CSS3. A small React or Vue component would be fine too if that speeds development, but vanilla JS is perfectly acceptable. Touch and mouse input both have to register accurately, and the interface should resize gracefully from a phone screen up to a 4K monitor.

I’ll consider the work complete when:
• Every key in the Mapalineda layout types the correct Unicode code point.
• Users can toggle between the Mapalineda, Latin, Cyrillic, and Greek layouts with a single click or tap.
• The keyboard renders without visual glitches in Chrome, Firefox, Safari, and Edge on desktop, plus iOS and Android browsers.
• The source code is well-commented and delivered with a brief README explaining how to embed the keyboard on any webpage.

If you already have experience creating virtual keyboards—especially with non-standard scripts—let me know. I’m ready to get started right away and I’m responsive to questions as we fine-tune the exact key mapping for Mapalineda.