A curated collection of useful web-based tools and applications built with modern web technologies.
Transform your text into beautiful long images perfect for social media posts and mobile reading.
Key Features:
- Text to PNG image conversion with smart justification
- Advanced annotation system with zoom controls
- History management with localStorage
- Support for CJK (Chinese/Japanese/Korean) and English text
- Dark/Light mode themes
Technologies: Vanilla HTML/CSS/JS, Bootstrap 5, Canvas API
🚀 Try Text2LongImage | 📖 Documentation
A high-performance classic Snake game implementation using Rust and WebAssembly.
Key Features:
- Near-native performance with Rust + WebAssembly
- Smooth gameplay with responsive controls
- Classic snake mechanics in modern web format
- Cross-platform browser compatibility
Technologies: Rust, WebAssembly (WASM), HTML5 Canvas
🎮 Play Snake Game | 📖 Documentation
Visit the Project Gallery to explore all tools with visual previews and direct access.
Each project can be accessed directly:
- Text2LongImage:
/text2longimage/index.html - Snake Game: External link to dedicated repository
This collection showcases various modern web technologies:
- Frontend Frameworks: Vanilla JS, Bootstrap 5
- Programming Languages: JavaScript, Rust
- Web APIs: Canvas API, localStorage, Clipboard API
- Build Tools: WebAssembly (wasm-pack)
- Styling: CSS3, Responsive Design
- Performance: WebAssembly for game logic
webtools/
├── index.html # Main gallery page
├── README.md # This documentation
├── favicon.ico # Site favicon
├── images/ # Shared assets
│ ├── github-mark.png
│ └── github-mark-white.png
├── text2longimage/ # Text to image converter
│ ├── index.html
│ ├── style.css
│ ├── text2longimage.js
│ └── README.md
└── snake_game/ # Snake game project
├── snake_game.png
└── README.md
- Utility: Solve real-world problems with practical tools
- Performance: Leverage modern web technologies for optimal speed
- Accessibility: Ensure tools work across devices and browsers
- Open Source: Share knowledge and enable community contributions
- Learning: Demonstrate various web development techniques
All tools are tested and optimized for:
- ✅ Chrome/Chromium (recommended)
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- 📱 Modern mobile browsers
We welcome contributions to improve existing tools or add new ones!
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-tool) - Commit your changes (
git commit -m 'Add amazing new tool') - Push to the branch (
git push origin feature/amazing-tool) - Open a Pull Request
When adding a new tool:
- Include comprehensive documentation (README.md)
- Follow consistent project structure
- Ensure mobile responsiveness
- Add to the main gallery page
- Include demo screenshots
| Tool | Primary Function | Technology | Status |
|---|---|---|---|
| Text2LongImage | Text → Image | Canvas API, localStorage | ✅ Active |
| Snake Game | Gaming | Rust + WASM | ✅ Active |
- Live Demo: charrywu.github.io/webtools
- Source Code: github.com/CharryWu/webtools
- Author: Charry Wu's Tech Notes
- Snake Game Repository: github.com/CharryWu/snake_game
This project is open source and available under standard open source terms. Each tool may have its own specific licensing terms - check individual project directories for details.
Created by Charry Wu • Powered by Modern Web Technologies • Built for the Community