A lightweight, zero-dependency web application that lets you drag and drop a folder of code files, auto-exclude unwanted files (node_modules, .git, .next, .venv, etc.), select specific files, and combine them into a single markdown file with optional AI prompt templates. Built with pure HTML, CSS, and JavaScript — no frameworks, no build tools.
🔗 Live Demo: file-combiner.netlify.app
- Drag-and-Drop Upload — Drop a folder or click to browse
- Smart Auto-Exclude — Automatically filters out
node_modules,.git,.next,.venv,__pycache__,dist,build, lock files, binaries, images, and 70+ other patterns - Exclude Presets — Choose from None, Minimal, Standard, or Aggressive exclusion levels
- Custom Exclude Patterns — Add/remove your own patterns (supports wildcards like
*.log) - Max File Size Filter — Skip files larger than a configurable limit (50KB–10MB)
- File Selection — Select all, none, code files only, or filter by type (components, styles, config)
- Search — Real-time search bar to find files instantly
- Markdown Generation — Combine files into markdown with optional fenced code blocks and language-specific syntax highlighting
- Folder Tree View — Optionally include a visual folder structure in the output
- Minification — Strip comments and whitespace from code output
- AI Prompt Templates — 10 pre-built prompts (debug, refactor, explain, optimize, review, test, document, security, architecture, convert)
- Custom Prompts — Add your own prompt or project context template
- Copy to Clipboard — One-click copy using modern Clipboard API
- Download — Export as
.mdor.txt
- Token Counter — Estimates token count for AI model compatibility
- Token Limit Selector — Presets for GPT-3.5 (4K/16K), GPT-4 (8K), GPT-4 Turbo (128K), Claude 3.5 (200K), Gemini 1.5 (1M)
- Token Progress Bar — Visual indicator with safe/warning/danger states
- Language Breakdown — Bar chart showing file type distribution across your project
- Dark/Light Theme — Toggle with persistent preference
- File Preview — Click the 👁️ icon to preview any file before combining
- Toast Notifications — Non-intrusive feedback for all actions
- Responsive Design — Mobile-first layout that works on all screen sizes
- Accessibility — ARIA attributes and keyboard navigation
- Persistent Settings — Theme, exclude patterns, and max size saved to localStorage
- Zero Dependencies — Pure HTML/CSS/JS, no frameworks or build tools
- Transparency — See exactly which files were excluded and why
- Expandable Details — Collapsible list showing excluded file paths and reasons
| Category | Patterns |
|---|---|
| Package Managers | node_modules, package-lock.json, yarn.lock, pnpm-lock.yaml |
| Build Output | dist, build, out, .next, .nuxt, .svelte-kit, .output |
| Version Control | .git |
| Python | .venv, venv, __pycache__, *.pyc |
| Cache | .cache, .turbo |
| System | .DS_Store, Thumbs.db |
| Logs | *.log, *.lock |
| Test Coverage | coverage, .nyc_output |
| Environment | .env, .env.local |
The Aggressive preset adds 70+ more patterns including images, fonts, binaries, IDE folders, and compiled files.
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure with ARIA accessibility |
| CSS3 | CSS variables, dark mode, responsive design, custom animations |
| JavaScript (ES6+) | File processing, UI interactions, markdown generation |
| Netlify | Static site hosting with continuous deployment |
Zero external dependencies — no React, no Tailwind, no GSAP, no build step.
- A modern web browser (Chrome, Firefox, Edge, Safari)
- Git for version control
- A Netlify account for deployment (optional)
git clone https://github.com/Manan-49/file-combiner.git
cd file-combinerJust open index.html in your browser, or use a local server:
# Using Python
python -m http.server 8000
# Using Node.js
npx serve .
# Using VS Code
# Install "Live Server" extension and click "Go Live"- Push to GitHub
- Connect the repository on Netlify
- Set publish directory to
.(root) - Deploy — no build command needed
file-combiner/
├── index.html # Main HTML structure
├── script.js # All application logic
├── styles.css # Styles with CSS variables & dark mode
├── netlify.toml # Netlify deployment config
└── README.md # This file
- Drop a folder onto the drop zone (or click to browse)
- Configure exclusions — Choose a preset or add custom patterns
- Select files — Use Select All, Code Files, or pick individually
- Search & filter — Find specific files by name or type
- Preview — Click 👁️ to view file contents before combining
- Set options — Toggle code blocks, folder tree, minification
- Combine — Click "🔗 Combine Files" to generate output
- Add AI context — Apply a prompt template or project context
- Check tokens — Select your AI model and verify token count
- Export — Copy to clipboard or download as
.md/.txt
- ✅ Auto-exclude patterns (70+ for node_modules, .git, .next, .venv, etc.)
- ✅ Configurable exclude UI with presets (None/Minimal/Standard/Aggressive)
- ✅ Custom exclude patterns with wildcard support
- ✅ Max file size filter
- ✅ Excluded files transparency panel
- ✅ Real-time file search
- ✅ Dark/Light theme toggle
- ✅ File preview modal
- ✅ Language breakdown chart
- ✅ Token limit selector (GPT-3.5/4/Claude/Gemini)
- ✅ Token progress bar with warnings
- ✅ Folder tree view in output
- ✅ Download as .txt
- ✅ Toast notifications
- ✅ localStorage persistence
- ✅ Modern Clipboard API
- ✅ Removed GSAP dependency (zero dependencies)
- ✅ Bug fixes (event handling, proper reset, accessibility)
- Initial release with drag-and-drop, file selection, code blocks, and AI prompts
- Fork the repository
- Create a feature branch:
git checkout -b feature/my-feature - Commit changes:
git commit -m "Add my feature" - Push to branch:
git push origin feature/my-feature - Open a Pull Request
This project is open source and available under the MIT License.
Manan — GitHub