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 repo now includes two frame-pattern tools that treat raw JSON pulled from the public repo as globally accessible state:
dynamics365-frame-machine.html— the Dynamics 365 proof, now living here as a portable frame machine with GitHub raw overlays from the public repo, liquid fork dimensions, import/export backups, and a lockstep twin console.hacker-news-simulator.html— a repaired Hacker News simulator that now runs as a frame machine overdata/content/hacker-news-posts.json, with fork-aware liquid dimensions and bundle backup and reimport flows.
These pages are not just demos. They treat the raw files as the canonical medium, which means the state stays publicly available in the repo, forks can export a bundle, change it locally, and import it back without losing the business logic flow carried by the frames. That backup and reimport loop is part of the frame contract, not an afterthought.
The 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