A curated collection of 100+ self-contained HTML applications following the "local-first" philosophy. Every tool works completely offline, with no external dependencies, no build process, and no tracking.
https://kody-w.github.io/localFirstTools/index.html
- 🔒 Offline-First: Every application works completely offline
- 🎯 Zero Dependencies: No CDN links, no npm packages, no build process
- 📦 Self-Contained: Each HTML file is a complete application
- 🎨 Beautiful Gallery: Browse tools in a modern, animated gallery interface
- 🌐 3D Experience: Explore tools in an immersive 3D virtual gallery
- 💾 Data Privacy: All data stays local in your browser
- 📥 Import/Export: Full JSON import/export for data portability
- 🎮 100+ Tools: Games, creative tools, productivity apps, and more
Visit the live gallery: kody-w.github.io/localFirstTools
# Clone the repository
git clone https://github.com/kody-w/localFirstTools.git
cd localFirstTools
# Start a local server
python3 -m http.server 8000
# Open in browser
open http://localhost:8000Each HTML file can be opened directly in your browser without any server. Just download and double-click!
localFirstTools/
├── index.html # Main gallery launcher
├── vibe_gallery_config.json # Auto-generated app registry
├── tools-manifest.json # Simple tool listing
├── [100+ HTML apps] # Self-contained applications
├── vibe_gallery_updater.py # Gallery metadata extractor
├── update-tools-manifest.py # Manifest generator
└── CLAUDE.md # Developer guide
The gallery organizes applications into 9 thematic categories:
| Category | Description | Examples |
|---|---|---|
| 🎨 Visual Art | Interactive visual experiences and design tools | Drawing apps, SVG editors, color palettes |
| 🌌 3D & Immersive | Three-dimensional and WebGL experiences | 3D worlds, VR experiences, games |
| 🎵 Audio & Music | Sound synthesis and music creation | Drum machines, synthesizers, audio tools |
| 🎮 Games & Puzzles | Interactive games and playful experiences | Card games, arcade games, puzzles |
| 🤖 Experimental AI | AI-powered interfaces and demos | Chatbots, AI assistants, automation |
| 🛠️ Creative Tools | Productivity and creative utilities | Text editors, todo apps, converters |
| 🌀 Generative Art | Algorithmic art generation systems | Procedural art, fractals, patterns |
| ⚛️ Particle & Physics | Physics simulations and particle systems | Physics engines, particle effects |
| 📚 Educational | Learning resources and tutorials | Interactive tutorials, demos |
- Create a self-contained HTML file following the structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your App Name</title>
<meta name="description" content="Brief description">
<style>
/* All CSS inline here */
</style>
</head>
<body>
<!-- Your app UI -->
<script>
/* All JavaScript inline here */
</script>
</body>
</html>-
Save to the root directory with a descriptive name:
my-awesome-tool.html -
Update the gallery:
python3 vibe_gallery_updater.py- Refresh the gallery to see your new tool!
- ✅ Self-Contained: All CSS and JavaScript must be inline
- ✅ No External Dependencies: No CDN links, no npm packages
- ✅ Offline-First: Must work without internet connection
- ✅ Data Import/Export: Include JSON import/export functionality
- ✅ Responsive Design: Works on desktop and mobile devices
- ✅ Local Storage: Use browser localStorage for persistence
# Update gallery configuration (extracts metadata from all HTML files)
python3 vibe_gallery_updater.py
# Quick shell wrapper
./update-gallery.sh
# Update tools manifest
python3 update-tools-manifest.py
# Watch for changes and auto-update
python3 vibe_gallery_watcher.py
# Run once and exit
python3 vibe_gallery_watcher.py --once
# Organize files into categories
python3 vibe_gallery_organizer.py
# Preview mode (shows what would be organized)
python3 vibe_gallery_organizer.py --dry-runThe gallery automatically categorizes applications based on code analysis:
- Keywords Detection: Scans for technology-specific keywords (3D, canvas, audio, game, etc.)
- Metadata Extraction: Pulls title, description from HTML tags
- Complexity Analysis: Determines simple/intermediate/advanced based on file size and features
- Interaction Type: Identifies as game, drawing, visual, interactive, audio, or interface
Include relevant keywords in your HTML:
<!-- Keywords: 3d, canvas, animation, physics -->Or use specific technologies in your code:
- 3D/WebGL:
three.js,webgl,perspective - Canvas:
canvas,getContext - Audio:
webaudio,audiocontext - Game:
game,score,player,level - Interactive:
click,drag,touch - Generative:
random,generate,procedural
Every application in this collection adheres to these principles:
- Privacy by Design: No data leaves your browser
- Offline Functionality: Works without internet connection
- No External Dependencies: Self-contained and portable
- Data Ownership: You control your data through import/export
- No Build Process: Open in any browser, no compilation needed
The gallery uses a dual-config system:
vibe_gallery_config.json: Rich metadata with categories, tags, complexitytools-manifest.json: Simple file listing with timestamps
Both are auto-generated by scanning HTML files in the repository.
- ✅ Chrome/Edge (latest 2 versions)
- ✅ Firefox (latest 2 versions)
- ✅ Safari (latest 2 versions)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
Contributions are welcome! Here's how you can help:
- Add New Tools: Create self-contained HTML applications
- Improve Existing Tools: Enhance features, fix bugs, improve UX
- Documentation: Improve guides, add examples, create tutorials
- Testing: Report bugs, test on different browsers/devices
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-tool) - Follow the development principles (self-contained, offline-first, no dependencies)
- Test in multiple browsers
- Update the gallery (
python3 vibe_gallery_updater.py) - Commit your changes (
git commit -m 'Add amazing tool') - Push to the branch (
git push origin feature/amazing-tool) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with vanilla HTML, CSS, and JavaScript
- 3D gallery powered by Three.js (only external dependency in gallery)
- Inspired by the local-first software movement
- Gallery: kody-w.github.io/localFirstTools
- Repository: github.com/kody-w/localFirstTools
- Issues: github.com/kody-w/localFirstTools/issues
Made with ❤️ for the local-first community