FlowTyping is a premium, fluid, and highly customizable online typing simulation and IME learning environment. Built using Svelte 5, TypeScript, and TailwindCSS, it models a realistic mechanical keyboard typing experience and custom IME (Input Method Editor) composition.
- Taiwan Zhuyin (Bopomofo) Mode: Integrated custom phonetic engine supporting smart continuous sentence typing (composition buffer).
- Continuous Input: Type entire sentences continuously without early confirmation. Text is held in the composition buffer and rendered with a dashed underline.
- Enter to Commit: Confirm and commit the entire composition sentence by pressing
Enter. - Up to Select Candidates: Press
ArrowUpto open the candidate list for the character immediately to the left of the cursor. PressingEnteror a number key confirms/commits the selected candidate and closes the list, keeping the rest of the sentence uncommitted. - Cursor Navigation: Full support for moving the cursor inside the composition buffer using Left/Right arrows or mouse clicks to edit phonetic keys or select candidates.
- English (US QWERTY) Mode: A layout-independent typing capture system using physical keycodes (
e.code), ensuring correct English character input regardless of your local operating system's keyboard layout. Fully simulates physical CapsLock and Shift XOR logic.
- Dynamic Presets: Swap between beautifully crafted presets such as Cyber Cyan, Charcoal Dark, Charcoal Light, Retro Mechanical, Vintage Beige, Wood Grain, and Sakura Pink.
- Interactive RGB Lighting: Enable dynamic multi-color RGB borders and breathing glow backlights under keycaps.
- Adjustable Typography: Supports setting system scale and typing text area sizes dynamically from
6 ptto32 pt(obeying standard spacing guidelines). - Collapsible Options Panel: Personalization drawer with scroll overflow safety and a custom webkit scrollbar.
- Configure your own layout switching shortcut in the Advanced Settings menu (collapsible via arrow toggle).
- Select combinations of keys using checkboxes:
Ctrl,Space,Shift,Caps Lock,Tab,Alt,L-Ctrl,R-Ctrl,L-Shift, andR-Shift. - Supports smart modifier-only release (e.g. smart short Shift press check) and instant multi-key combinations (e.g.
Ctrl + SpaceorL-Ctrl + Tab) with automatic browser input suppression.
- Independent tab panels separating graphic Emojis from technical Symbols (Greek letters, mathematical operators, and special shapes).
- Auto CJK Spacing: Toggleable pangu.js integration in Advanced Settings. Automatically inserts correct spacing between Chinese and Western alphanumeric characters with smart cursor offset tracking.
- Word Counter: Real-time character/word tracker positioned at the bottom-left of the typing zone, with extra scroll bottom-padding to prevent layout overlap.
- Copy/Clear Buttons: Quick actions to copy typed text to clipboard or clear the input area.
- Bilingual UI & SVG Brand Assets: Full internationalization (i18n) support for both 繁體中文 and English, coupled with a crisp, custom SVG keycap logo serving as favicon and header brand identity.
- Frontend: Svelte 5 (utilizing reactive states)
- Language: TypeScript
- Styles: TailwindCSS with responsive glassmorphism and modern dark-mode aesthetics
- Bundler: Vite
- Zhuyin Parser: Custom state machine translating raw keyboard input to phonetics and candidate weights.
Make sure you have Node.js and pnpm installed on your system.
Clone the repository and install the dependencies:
pnpm installLaunch the local hot-reloading development server:
pnpm devOpen http://localhost:5173 in your browser.
To bundle the application for production deployment:
pnpm buildThe production bundle will be built in the dist/ directory.
Validate TypeScript and Svelte components for correctness:
pnpm checkThis project is open-source and available under the GNU General Public License v3.0.
-
Open Data Attribution / 開放資料來源標示：Zhuyin Mapping Database (
public/dict.json&src/engine/DEFAULT_DICT)Click to view license details / 點擊展開詳細聲明
- Source: Chinese National Standard (CNS11643)
- License: Open Government Data License v1.0
- Conversion: Extracted to
.cinby Zhao Weilun (bluebat) in 2007. - Attribution: Intellectual property belongs to the original government agency. Distributed under the Open Government Data License.
(繁體中文版)
- 資料來源：中華民國國家標準中文交換碼 (CNS11643)
- 授權條款：政府開放資料授權條款 - 第 1.0 版
- 格式轉換：由趙惟倫 (bluebat) 於 2007 年整理並轉換為
.cin格式。 - 版權聲明：原始資料之智慧財產權歸屬原提供機關，本專案依開放資料條款進行重製與散布。