---
title: "Deploy thumb-gen"
description: "๐จ Free online thumbnail generator for videos, Lottie, images & text. "
category: "Other"
url: https://railway.com/deploy/iV-Ljt
---
# Deploy thumb-gen
๐จ Free online thumbnail generator for videos, Lottie, images & text.
**[Deploy thumb-gen on Railway](https://railway.com/template/iV-Ljt)**
- **Creator:** Malith Rukshan's Projects
- **Category:** Other
- **Total deploys:** 2
## Template content
### thumb-gen
- **Source:** Malith-Rukshan/thumb-gen
- **Start command:** `npm run start`
- **Health check:** /health
- **Public domain:** Yes
## Documentation
ThumbGen
[](https://vuejs.org/)
[](https://www.typescriptlang.org/)
[](https://hub.docker.com/)
โจ Generate beautiful thumbnails from videos, animations, images, and text โ all in your browser! ๐
- A modern, privacy-first thumbnail generation tool with zero server dependencies -
Powered by Canvas API and modern web technologies ใ
## โจ Features
- ๐ฌ **Video Thumbnail Generator** - Extract perfect frames from MP4, WebM, and OGG videos
- ๐จ **Lottie/TGS Thumbnail Generator** - Generate thumbnails from Lottie animations and Telegram stickers
- ๐ **Base64 Image Converter** - Create tiny placeholders for progressive loading
- โ๏ธ **Text Thumbnail Generator** - Design custom text-based thumbnails with fonts and backgrounds
- ๐ก๏ธ **Watermark Tool** - Add text or image watermarks with batch processing
- ๐ **100% Private** - All processing happens in your browser, no data uploaded
- ๐ **Zero Dependencies** - No registration, no login, no tracking
- ๐ฑ **Responsive Design** - Works perfectly on desktop and mobile
- ๐ฏ **Batch Processing** - Process multiple files at once with ZIP export
- ๐ **PWA Ready** - Works offline after first visit
## ๐ ๏ธ Tools Overview
### Video Thumbnail Generator
Extract frames from video files with precise control:
- **Supported formats**: MP4, WebM, OGG
- **Frame selection**: Seekbar navigation with frame-by-frame control
- **Batch capture**: Capture multiple frames and export as ZIP
- **Custom sizing**: Adjustable output dimensions and quality
- **Perfect for**: YouTube thumbnails, video previews, course materials
### Lottie/TGS Thumbnail Generator
Generate static images from animated content:
- **Supported formats**: Lottie JSON, TGS stickers
- **Frame extraction**: Pick any frame from the animation
- **High quality**: Vector-based rendering for crisp output
- **Perfect for**: Animation portfolios, sticker previews, UI documentation
### Base64 Image Converter
Create ultra-light image placeholders:
- **Tiny sizes**: 2px to 32px preview generation
- **Progressive loading**: Smooth transition effects
- **Code generation**: HTML, CSS, React, Vue snippets
- **Size optimization**: See exact byte savings
- **Perfect for**: Website performance, blur-up effects, email templates
### Text Thumbnail Generator
Design custom text-based graphics:
- **Canvas control**: Custom dimensions with social media presets
- **Typography**: Multiple fonts, sizes, weights, and effects
- **Backgrounds**: Solid colors, gradients, or custom images
- **Text effects**: Shadows, strokes, and positioning controls
- **Perfect for**: Social media posts, blog headers, quote cards
### Watermark Tool
Protect and brand your images:
- **Dual support**: Text and image watermarks
- **Positioning**: 9 preset positions plus custom placement
- **Styling**: Opacity, rotation, and size controls
- **Batch processing**: Watermark multiple images at once
- **Perfect for**: Photography protection, brand placement, content marking
## ๐ Quick Start
### Online Usage
Visit [thumb-gen.malith.dev](https://thumb-gen.malith.dev) and start generating thumbnails immediately!
## ๐ฆ Deployment Options
### ๐ One-Click Deployments
Deploy instantly to popular platforms:
[](https://vercel.com/new/clone?repository-url=https://github.com/Malith-Rukshan/thumb-gen)
[](https://app.netlify.com/start/deploy?repository=https://github.com/Malith-Rukshan/thumb-gen)
[](https://railway.app/template/ThumbGen)
[](https://render.com/deploy?repo=https://github.com/Malith-Rukshan/thumb-gen)
### ๐ณ Docker
Run ThumbGen in a container:
```bash
# Pull and run
docker pull malithrukshan/thumb-gen
docker run -p 3000:3000 malithrukshan/thumb-gen
```
Visit http://localhost:3000
#### Docker Compose
Create a `docker-compose.yml` file:
```yaml
version: '3.8'
services:
thumb-gen:
image: malithrukshan/thumb-gen
ports:
- "3000:3000"
environment:
- NODE_ENV=production
restart: unless-stopped
```
Run with:
```bash
docker-compose up -d
```
#### Building Docker Image Locally
```bash
# Build the image
docker build -t thumb-gen .
# Run the container
docker run -p 3000:3000 thumb-gen
```
### Local Development
#### Prerequisites
- [Bun](https://bun.sh/) (recommended) or Node.js 18+
- Git
#### Setup
1. **Clone the repository**
```bash
git clone https://github.com/Malith-Rukshan/thumb-gen.git
cd thumb-gen
```
2. **Install dependencies**
```bash
bun install
```
3. **Start development server**
```bash
bun run dev
```
4. **Open your browser**
```
Visit http://localhost:3000
```
#### Available Scripts
```bash
# Development
bun run dev # Start development server
bun run build # Build for production
bun run preview # Preview production build
# Testing
bun run test # Run tests in watch mode
bun run test:run # Run tests once
bun run test:ui # Run tests with UI
bun run test:coverage # Run tests with coverage
# Code Quality
bun run lint # Lint and fix code
bun run format # Format code with Prettier
bun run type-check # Check TypeScript types
```
### โ๏ธ Platform-Specific Deployment
#### Vercel
```bash
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prod
```
#### Netlify
```bash
# Install Netlify CLI
npm i -g netlify-cli
# Deploy
netlify deploy --prod --dir=dist
```
#### Heroku
```bash
# Install Heroku CLI and login
git push heroku main
```
## ๐งช Testing
ThumbGen includes comprehensive test coverage:
```bash
# Run all tests
bun run test
# Run tests with coverage
bun run test:coverage
# Run tests with UI
bun run test:ui
```
## ๐ Use Cases
- **Content Creation**: Generate thumbnails for YouTube videos, blog posts, and social media
- **Web Development**: Create base64 placeholders for better loading experiences
- **Design Workflows**: Quickly prototype text-based graphics and layouts
- **Brand Protection**: Add watermarks to images for copyright protection
- **Educational Content**: Extract frames from video tutorials and presentations
- **Marketing Materials**: Design eye-catching graphics for campaigns
## ๐ง Technology Stack
- **Framework**: Vue.js 3 with Composition API
- **Language**: TypeScript for type safety
- **Styling**: Tailwind CSS 4 for modern UI
- **Routing**: Vue Router 4 for SPA navigation
- **State Management**: Pinia for reactive state
- **Build Tool**: Vite for fast development and building
- **Testing**: Vitest with Vue Test Utils
- **Package Manager**: Bun for fast dependency management
## ๐ API Reference
### Canvas Utilities
```typescript
// Create a canvas element
const canvas = createCanvas(width, height)
// Resize an image
const resizedCanvas = await resizeImage(image, newWidth, newHeight)
// Generate base64 preview
const base64 = await generateBase64Preview(canvas, quality)
```
### File Helpers
```typescript
// Format file size
const size = formatFileSize(bytes) // "1.5 MB"
// Format duration
const duration = formatDuration(seconds) // "2:05"
// Validate image file
const isValid = validateImageFile(file) // boolean
```
## ๐ค Contributing
Contributions are welcome! Please follow these steps:
1. **Fork the repository**
2. **Create a feature branch**
```bash
git checkout -b feature/amazing-feature
```
3. **Make your changes**
4. **Add tests** for new functionality
5. **Run the test suite**
```bash
bun run test
bun run lint
bun run type-check
```
6. **Commit your changes**
```bash
git commit -m 'Add amazing feature'
```
7. **Push to your branch**
```bash
git push origin feature/amazing-feature
```
8. **Open a Pull Request**
### Development Guidelines
- Write tests for new features
- Follow the existing code style
- Use TypeScript for type safety
- Add JSDoc comments for complex functions
- Update documentation for API changes
## ๐ License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## ๐ง Acknowledgements
- Built with [Vue.js](https://vuejs.org/) and [TypeScript](https://www.typescriptlang.org/)
- Styled with [Tailwind CSS](https://tailwindcss.com/)
- Icons by [Lucide](https://lucide.dev/)
- Animations powered by [Lottie Web](https://github.com/airbnb/lottie-web)
- File compression with [JSZip](https://stuk.github.io/jszip/)
## ๐ Support
If you found ThumbGen helpful, please:
- โญ **Star this repository** on GitHub
- ๐ **Report bugs** via GitHub Issues
- ๐ก **Suggest features** via GitHub Discussions
- ๐ค **Contribute** by opening Pull Requests
## ๐ฌ Contact
- **Email**: [hello@malith.dev](mailto:hello@malith.dev)
- **GitHub**: [Malith-Rukshan](https://github.com/Malith-Rukshan)
- **Live Demo**: [thumb-gen.malith.dev](https://thumb-gen.malith.dev)
---
## Similar templates
- [Rocky Linux](https://railway.com/deploy/rocky-linux) โ Hosted Rocky Linux 9 workspace with SSH and persistent storage. ๐
- [Foundry Virtual Tabletop](https://railway.com/deploy/X5tR6G) โ A Self-Hosted & Modern Roleplaying Platform
- [Letta Code Remote](https://railway.com/deploy/letta-code-remote) โ Run a Letta Code agent 24/7. No inbound ports, just deploy.
Open this page in a browser: https://railway.com/deploy/iV-Ljt