Accurately encode and decode data between Base32 (RFC 4648), Crockford's Base32, and Hexadecimal. Perfect for developers needing efficient, web-based data conversion.
AI Generation Prompt
Technical Specification: Universal Base32 and Hex Encoding Utility
1. Overview
This application is a high-performance, client-side encoding and decoding tool. It allows users to convert between Hexadecimal, RFC 4648 Base32, and Douglas Crockford’s Base32. The interface is optimized for developers who need to quickly sanitize or transform data formats without external dependencies.
2. Core Features
- Multi-Mode Conversion: Toggle between Hex, Standard Base32, Crockford Base32, and Plain Text.
- Real-time Processing: Calculations trigger on input (with debounce) for seamless "type-and-convert" workflow.
- Error Detection: Visual highlighting for illegal characters (e.g., using 'O' in Standard Base32 or 'G' in Hex).
- One-Click Copy: Copy output to clipboard with a subtle "success" animation.
- Checksum Verification: Option to toggle Crockford checksum calculation for validation purposes.
3. UI Layout Specification
- Header: A clean, centered title section with a short tagline. No navigation or complex menus.
- Main Tool Area: A two-column grid layout (stacked on mobile).
- Input Section: Contains a dropdown for the Source Format and a large
<textarea>. - Output Section: Contains a dropdown for the Target Format and a read-only
<textarea>.
- Input Section: Contains a dropdown for the Source Format and a large
- Controls: A centrally located "Swap" button to flip inputs and outputs quickly.
- Feedback Modal: A non-blocking, custom-styled notification overlay for copy success or validation errors (do not use
alert()).
4. Visual Design & Aesthetic
- Color Palette:
- Background:
#F8FAFC(Slate 50) - Cards/Panels:
#FFFFFF(Pure White) - Primary Action:
#2563EB(Blue 600) - Text:
#1E293B(Slate 800) - Borders/Dividers:
#E2E8F0(Slate 200)
- Background:
- Styling Directives:
- Use generous padding and subtle drop shadows (
shadow-sm) for card elements. - Rounded corners (
rounded-lg) on all input fields and buttons. - Use a monospace font (e.g., 'Fira Code', 'Courier New') for the textareas to ensure accurate character alignment.
- Transitions: All button interactions must include
transition-all duration-200to provide a premium feel.
- Use generous padding and subtle drop shadows (
5. Developer Constraints & Implementation Notes
- No Persistence: The app must NOT use
localStorage,sessionStorage, or cookies. Maintain state using simple variables within the execution scope. - Sandboxed Compatibility: Ensure all scripts run inside a single
<script>block at the end of the<body>. Avoid usingeval()or dangerous DOM manipulation. - External Assets: Fetch Tailwind CSS via CDN. Keep the file count strictly to one (everything inline).
- Performance: Use event delegation for input handling. Implement a 300ms debounce function on keypress events to prevent excessive CPU usage on large strings.
- Security: Ensure the code is strictly client-side. No API keys or external server requests are required.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is the difference between Standard Base32 and Crockford's Base32?
Standard Base32 (defined in RFC 4648) uses a specific character set (A-Z, 2-7) and requires padding with the '=' character to align data. It is primarily designed for data storage and transmission where a compact, binary-safe representation is needed, focusing on compatibility across different systems. Douglas Crockford's Base32, by contrast, is designed specifically for human readability and error reduction. It excludes characters that might be confused with numbers, such as I, L, O, and 1, to prevent transcription errors. It also supports optional checksums, making it more robust for systems that involve human-input, like serial numbers or identifiers.
Is this conversion tool secure for sensitive data?
This application is built as a client-side utility, meaning all data processing happens locally within your web browser. No data is ever transmitted to a server, stored in a database, or processed on the backend, ensuring that your inputs remain entirely private and secure. Because the application does not utilize cookies, local storage, or server-side persistence, there is no risk of your data being cached or retrieved by third parties after you close the tab. This makes it a secure choice for developers handling configuration snippets or non-sensitive internal identifiers.
How do I handle errors during the decoding process?
If you are attempting to decode a string that contains invalid characters for the selected encoding format, the application will trigger a visual validation alert within the interface. It will pinpoint the location of the error and provide a descriptive message explaining which characters are disallowed in the chosen schema. For instance, if you attempt to decode a hex string containing the letter 'G' as Base32, the validator will immediately flag the illegal character. This real-time feedback loop allows you to quickly adjust your input data without needing to reload the page or restart the conversion process.
Why does this tool use a 'single file' architecture?
The single-file architecture is designed for maximum portability and compatibility within restricted environments, such as sandboxed iframes or offline corporate networks. By consolidating all HTML, CSS, and JavaScript into one document, we eliminate dependencies on external build tools, package managers, or complex server configurations. This approach ensures that the tool remains lightweight, loads instantly, and runs reliably in any standard web browser. It simplifies deployment significantly, as you only need a single file to host the functionality on any static file server or development environment.
