HSM Kit

HSM Kit - Professional Online Encryption Toolkit

🔐 Professional encryption & key management tools, 100% client-side, secure & reliable

English | 简体中文 | 日本語 | 한국어 | Deutsch | Français

---

📖 Introduction

HSM Kit is a professional online encryption toolkit designed for developers, testers, and security engineers in finance, payment, and security domains. It provides 44+ tools covering HSM key management, payment security, PKI certificates, and cryptographic algorithms, all running entirely in the browser.

Core Values

• Security First - 100% client-side computation, keys and sensitive data never leave your device
• Professional & Complete - 44+ tools covering HSM key management, payment security, PKI certificates, and cryptographic algorithms
• Ready to Use - Open browser and start working, supports PWA installation, works on Mac/Windows/Linux/mobile
• Open Source - Code is publicly auditable, meets financial industry compliance requirements

---

✨ Features

---

🛠️ Tool Modules

🔐 Encryption/Decryption Tools (5)

🔑 Key Management Tools (8)

🔐 PKI Tools (2)

💳 Payment Security Tools (21)

🧰 General Tools (9)

---

📚 Knowledge Base

HSM Kit includes a built-in knowledge base (/guides/) with 42 in-depth technical articles in each of English and Chinese, covering encryption algorithms, payment security, HSM key management, and more. Articles are cross-linked and directly connected to corresponding tools.

Knowledge Base Features

• 📝 Markdown Rendering - Code blocks, tables, internal links
• 🔗 Tool Integration - Direct links to related tools and articles
• 🌍 Bilingual - English and Chinese, 43 articles each, fully translated
• 📖 Table of Contents - Right-side TOC navigation with scroll highlighting
• 🔍 Search - Full-text search across articles

---

📁 Project Structure

hsmkit/

├── public/ # Static assets │ ├── favicon.svg # Website logo │ ├── favicon-*.png # PWA icons (48/192/512) │ ├── apple-touch-icon.png # iOS icon │ ├── sitemap.xml # Sitemap (144 URLs with hreflang) │ ├── robots.txt # Crawler instructions │ ├── _headers # HTTP headers (Cloudflare) │ └── _redirects # SPA route redirects │ ├── scripts/ # Build scripts │ ├── generate-favicon-png.js # Favicon generation │ ├── generate-guide-og.js # Per-guide social image generation │ ├── prerender-guides.js # Static guide-page generation │ ├── check-tool-pages.js # Production page smoke checks │ └── update-sitemap-lastmod.js # Guide/tool sitemap maintenance │ ├── src/ │ ├── components/ # Reusable components │ │ ├── cipher/ # Encryption tool components │ │ ├── common/ # Common components │ │ │ ├── PageLayout.tsx # Page layout + Schema.org │ │ │ ├── ToolPage.tsx # Tool page factory │ │ │ ├── SEO.tsx # SEO meta tags + prerender │ │ │ ├── ResultCard.tsx # Result display (aria-live) │ │ │ ├── ErrorCard.tsx # Error display (role="alert") │ │ │ ├── LengthIndicator.tsx # Shared input length/format states │ │ │ ├── ExampleButton.tsx # Context-preserving example loading │ │ │ ├── ErrorBoundary.tsx # Error boundary │ │ │ ├── ReloadPrompt.tsx # PWA update prompt (dark mode) │ │ │ └── ... │ │ ├── generic/ # General tool components │ │ ├── keys/ # Key management components │ │ ├── payment/ # Payment tool components │ │ └── pki/ # PKI tool components │ │ │ ├── hooks/ # Custom hooks │ │ ├── useLanguage.tsx # Multi-language switching │ │ ├── useTheme.tsx # Theme switching │ │ ├── useToolForm.ts # Tool form hook │ │ ├── useRecentTools.ts # Recent tools and local favorites │ │ └── ... │ │ │ ├── data/ # Tool metadata and examples │ │ ├── examples.ts # Non-production example values │ │ ├── toolRelations.ts # Related-tool workflow graph │ │ └── toolGuidesMap.ts # Tool-to-guide links │ │ │ ├── locales/ # Translations (6 languages) │ │ ├── en/ # English │ │ ├── zh/ # Chinese │ │ ├── ja/ # Japanese │ │ ├── ko/ # Korean │ │ ├── de/ # German │ │ └── fr/ # French │ │ │ ├── utils/ # Utility functions │ │ ├── analytics.ts # Privacy-safe tool action events │ │ ├── crypto.ts # Core crypto utilities │ │ ├── crypto.test.ts # Crypto unit tests │ │ ├── hex.ts # Hex utilities │ │ ├── hex.test.ts # Hex unit tests │ │ ├── logger.ts # Production-safe logger │ │ └── ... │ │ │ ├── App.tsx # Root component + routes │ ├── routeConfig.ts # Route configuration │ ├── routes.tsx # Lazy-loaded page components │ └── main.tsx # Entry point │ ├── vitest.config.ts # Test configuration ├── vite.config.ts # Build configuration ├── tsconfig.json # TypeScript config (strict mode) └── package.json # Dependencies

---

🚀 Quick Start

Online

Visit https://hsmkit.com to use all tools directly.

PWA Install

After visiting the website, your browser will prompt "Install HSM Kit". Click to install to desktop.

Local Development

# Clone repository

git clone https://github.com/hsm-kit/hsmkit.git cd hsmkit

Install dependencies

npm install

Start development server

npm run dev

Visit http://localhost:5173

Build for Production

# Build (includes sitemap update + Puppeteer prerender + PWA Service Worker)

npm run build

Preview production build

npm run preview

When a release changes tool-page functionality, refresh only the 44 tool-page dates without rewriting homepage, legal, or guide dates:

`bas