HappyFormatter is a modern, privacy-focused web application for formatting and minifying code across 26+ programming languages and formatting engines. All processing happens entirely in your browser using WebAssembly modules, ensuring your code never leaves your device.
- 26+ Programming Languages: Comprehensive support for popular languages and formats
- Multiple Formatter Engines: Choose between different formatters like Prettier, Biome, Ruff, and Mago for optimal results
- Zero Data Transmission: All formatting and minification happens client-side via WebAssembly
- Advanced Code Editor: Powered by CodeMirror 6 with syntax highlighting, autocomplete, and bracket matching
- Multiple Editor Themes: 16+ editor themes including Dracula, Nord, Material, One Dark, and more
- Keyboard Shortcuts: Quick formatting with
Ctrl+Shift+Fand minification withCtrl+Shift+M - Responsive Design: Fully responsive interface optimized for desktop and mobile devices
- Accessibility: Built with ARIA labels, keyboard navigation, and screen reader support
- Fast Performance: Optimized WebAssembly modules for near-instant formatting
Web Technologies
- JavaScript (with minification) - Alternative: Biome formatter
- TypeScript (with minification) - Alternative: Biome formatter
- HTML
- CSS (with minification)
- SCSS (with minification)
- JSON (with minification)
- XML (with minification)
- YAML
Programming Languages
- Python - Alternative: Ruff formatter
- Go
- Rust
- C
- C++
- C#
- Java
- Dart
- Lua
- Zig
- PHP - Alternative: Mago formatter
Markup & Data Formats
- Markdown
- SQL
- Protocol Buffers (.proto)
HappyFormatter now supports multiple formatter engines for optimal code formatting:
- Biome: Fast JavaScript/TypeScript formatter with excellent performance
- Ruff: Extremely fast Python formatter/linter written in Rust
- Mago: Modern PHP formatter with advanced code style capabilities
- Prettier: Default formatter for JavaScript, TypeScript, JSON, and PHP
The following languages support code minification:
- JavaScript
- TypeScript
- CSS
- SCSS
- JSON
- HTML
- XML
- Node.js: Version 18 or higher
- Package Manager: pnpm (recommended) or npm
- Clone the repository:
git clone https://github.com/yourusername/happyformatter.git
cd happyformatter- Install dependencies:
pnpm install- Start the development server:
pnpm dev- Open http://localhost:4321 in your browser.
# Build the application
pnpm build
# Preview the production build locally
pnpm preview
# Deploy to Cloudflare Pages
pnpm deploy# Development
pnpm dev # Start development server
pnpm build # Build for production
pnpm preview # Preview production build
# Code Quality
pnpm typecheck # TypeScript type checking
pnpm check # Astro configuration checking
pnpm format # Format code with dprint
# Deployment
pnpm deploy # Deploy to Cloudflare Pagessrc/
├── components/
│ ├── playground/ # Main formatting interface components
│ ├── ui/ # Reusable UI components (buttons, dropdowns, etc.)
│ ├── layout/ # Layout components (header, footer, head)
│ ├── info/ # Feature description sections
│ └── faq/ # FAQ components
├── handlers/
│ ├── formatters/ # Language-specific formatter implementations
│ ├── minifiers/ # Language-specific minifier implementations
│ ├── utils/ # Utility functions for handlers
│ └── interface.ts # Abstract base classes for formatters/minifiers
├── lib/
│ ├── languages.ts # Language configuration and metadata
│ ├── languageLoader.ts # Dynamic language extension loading
│ ├── initialCode.ts # Default code examples per language
│ ├── shiki-config.ts # Syntax highlighting configuration
│ └── utils.ts # General utility functions
├── icons/ # SVG icon components
├── pages/ # Astro route pages
└── styles/ # Global CSS styles
public/
└── images/
└── og.png # Open Graph image (1200x630 PNG)
- Framework: Astro 5.16.5 (Static Site Generation)
- Frontend: React 19.0.3 with TypeScript 5.9.3
- Styling: Tailwind CSS v4.1.18
- Code Editor: CodeMirror 6 with Shiki syntax highlighting
- State Management: Zustand
- Formatters:
@wasm-fmt/*packages for C/C++, Dart, Go, Lua, Python, SQL, Web, YAML, Zig- Biome (
@wasm-fmt/biome_fmt) for JavaScript/TypeScript - Ruff (
@wasm-fmt/ruff_fmt) for Python - Mago (
@wasm-fmt/mago_fmt) for PHP - Prettier for JavaScript, TypeScript, JSON, PHP
- dprint for Markdown
- xml-formatter for XML
- Minifiers:
@swc/wasm-webfor JavaScript/TypeScriptlightningcss-wasmfor CSS/SCSS@minify-html/wasmfor HTML
- Deployment: Cloudflare Pages with edge optimization
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes and test thoroughly
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
To add support for a new programming language:
- Create a formatter class in
src/handlers/formatters/[language].tsextending theFormatterbase class - Create a minifier class in
src/handlers/minifiers/[language].ts(if minification is supported) extending theMinifierbase class - Add the language configuration to
src/lib/languages.ts - Add CodeMirror language support via
@codemirror/lang-*packages - Add a default code sample in
src/lib/initialCode.ts - Update the formatter/minifier index in
src/handlers/index.ts - Create a language-specific page route if needed
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
- Built with Astro - The web framework for content-driven websites
- CodeMirror - The code editor component
- WebAssembly formatters and minifiers from the open-source community
- All contributors and users of HappyFormatter
HappyFormatter - Format your code, keep it private.