---
title: HF Thumbnail Crafter
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: static
pinned: false
license: mit
---

# HF Thumbnail Crafter

A web-based thumbnail creator for HuggingFace users. Create quick, professional thumbnails with pre-made layouts and visual assets (Huggys).

## Features

- **4 Pre-designed Layouts**: Serious Collab, Fun Collab, Sandwich, and Docs layouts
- **44+ Huggy Mascot Assets**: Loaded directly from HuggingFace dataset
- **Custom Text Editing**: Support for Inter & IBM Plex Mono fonts with bold/italic styling
- **Image Upload**: Drag-and-drop support for local images (PNG, JPG, WebP)
- **Layer Management**: Use `[` and `]` keyboard shortcuts to reorder objects
- **Smart Canvas Tools**:
  - Multi-select with drag-to-select box or Shift+Click
  - Arrow key movement (1px or 10px with Shift)
  - Shift-constrained drag (horizontal/vertical lock)
  - Smart snapping to canvas center lines
- **Export**: High-quality PNG export with custom filename
- **Undo/Redo**: Full history support (Ctrl+Z / Ctrl+Shift+Z)

## Usage

1. **Select a Layout**: Click the Layout button in the sidebar to choose from 4 pre-designed templates
2. **Customize**:
   - Add Huggys from the Huggy menu
   - Upload your own images
   - Edit text directly on canvas (double-click)
   - Adjust colors using the background selector
3. **Arrange Objects**:
   - Drag to reposition
   - Use `[` and `]` keys to change layer order
   - Transform with scaling and rotation
4. **Export**: Click the export button and download your thumbnail as PNG

## Keyboard Shortcuts

- **`T`**: Activate text creation mode
- **`Delete/Backspace`**: Delete selected objects
- **`Ctrl+Z`**: Undo
- **`Ctrl+Shift+Z`**: Redo
- **`Ctrl+D`**: Duplicate selected objects
- **`Arrow Keys`**: Move selection 1px (hold Shift for 10px)
- **`[`**: Send backward (decrease layer order)
- **`]`**: Bring forward (increase layer order)
- **`Shift + Drag`**: Constrain to horizontal/vertical axis

## Canvas Sizes

- **1200×675**: Default size (X/Twitter)
- **1200×627**: LinkedIn size
- **1160×580**: HuggingFace custom size

## Tech Stack

- **Frontend**: React 18 + TypeScript
- **Build Tool**: Vite
- **Canvas**: react-konva + Konva.js
- **Styling**: Tailwind CSS
- **Icons**: Custom Figma-exported SVGs
- **Fonts**: Inter, IBM Plex Mono, Bison Bold

## Development

```bash
# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npx vite build
```

## License

MIT

---

🤖 Built with [Claude Code](https://claude.com/claude-code)