Logomaker: Portable, Offline Logos with Self-Managed Fonts Library (An Experiment in ✨ Vibe Coding ✨ and Human-Computer Interaction)

Logomaker is a free, open-source, zero-dependency client-side logo generator featuring ~400 fonts, dynamic effects, and versatile export options. Designed for portability and offering an offline-first option, it leverages an optimized build process with intelligent font loading, allowing users to easily manage a large font library, in any type of web service. Released for desktop as an Electron app.

This project is more than just a tool; it's a Human+AI collaborative coding experiment developed by Manic Agency. Over 90% of the codebase originated from AI (LLMs like GPT-4, Claude 3, Gemini families) guided by technical prompt engineering and refined through an iterative collaborative development and testing process, or ✨ vibe coding ✨.

Every single function was written by a LLM using their respective web UIs (no CLI or API), testing how each organization implements conversational memory and meta-analysis to give appropriate responses, and what their limitations were.

See the Technical Deep Dive.

---

---

✨ Features Overview

• 🔤 Extensive Font Library: ~400 fonts available by default. Dynamically loaded online (chunked w/ IndexedDB caching) or fully embedded for offline use, with font licensing support. See fontmanager.md.
• 🎬 Full Vector Animation Support: Apply subtle animations (Pulse, Bounce, Glitch, etc.). Control speed. Included directly in SVG exports via embedded CSS!
• 📦 Pro Export Options:
  • SVG: Clean, scalable vectors. Reliably embeds fonts (via Base64 @font-face data URLs extracted from loaded data) & CSS animations. Ideal for web/editing.
  • PNG: High-quality raster images with optional transparency. Control resolution.
  • Frames (ZIP): Animation sequence as individual PNG frames + HTML preview (Note: Captures static render, not CSS animation over time).
• 🔗 Shareable URLs: Generate unique links capturing your exact design state (feature may depend on deployment environment).

🚀 Getting Started

Choose the version that best suits your needs:

1. Live Demo (Online - Optimized Build) ⚡

The fastest way to get started online. Experience the web-optimized version with dynamic font loading and reliable SVG export.

➡️ Try Logomaker Online Now!

• Uses the optimized deploy build (dist/github-pages).
• Loads a small index.json (~100KB) initially.
• Fetches font data chunks (*.json, now containing both URL and Base64 data) on demand as you select fonts. Chunks are cached in IndexedDB.
• Supports SVG font embedding.

2. Download Offline (~100mb app, all fonts data included) 📦

• Built for desktop using Electron / electron-builder
• Releases are automatically done for each OS through GH actions (also written by the LLMs)
• Download for your machine here.

From conception, this was designed as a lightweight client-side application. While it requires Node.js and npm for the development environment and build. Fonts are stored in fonts/ (managed via Git LFS), with various build options dictating how these assets are processed and served.

🛠️ Local Development

Prerequisites

• Git
• Git LFS (Initialize before cloning or pull after cloning)
• Node.js (v18+ recommended)

Usage

# 1. Clone the repository
git clone [https://github.com/manicinc/logomaker.git](https://github.com/manicinc/logomaker.git)
cd logomaker

# 2. Pull Git LFS files (the fonts) - CRITICAL STEP
git lfs pull

# 3. Install development dependencies (http-server, chokidar)
npm install

# 4. Run Development Server (Builds 'deploy' target, Watches, Serves @ http://localhost:3000)
#    Supports SVG Embedding via Hybrid Chunks
npm run dev
# (After initial build, edit code, save, then manually refresh browser)
# (Press Ctrl+C to stop)

# 5. Run Production Preview (Builds 'deploy' target, Serves @ http://localhost:3001 - No Watch)
npm run preview
# (Press Ctrl+C to stop)

# 6. Manual Builds (Output to ./dist/ folder)
npm run build          # Build deploy target (default) -> ./dist/github-pages/
npm run build:deploy   # Build deploy target -> ./dist/github-pages/
npm run build:portable # Build portable target -> ./dist/portable/ (directory)

See development.md for more info on development mode.

See release.md for more info on the release process for potential Electron app packaging.

🛠️ Building the Project

Logomaker offers two primary build targets managed by node scripts/build.js:

1. deploy (Default): Creates a web-optimized build in ./dist/github-pages/. Uses font chunking (with hybrid URL+Base64 data) for balanced performance and full SVG embedding support. Ideal for web hosting. Run with npm run build:deploy or npm run build.
2. portable: Creates a self-contained build in ./dist/portable/. Embeds all font data using Base64 in inline-fonts-data.js for complete offline use. Ideal for local file usage or packaging (e.g., Electron). Run with npm run build:portable.

The repository is set up to automatically build and deploy the deploy target to GitHub Pages via the .github/workflows/deploy-gh-pages.yml. The live GitHub Pages files reside in the gh-pages branch: https://github.com/manicinc/logomaker/tree/gh-pages.

The project uses a lightweight Node.js build process with no external bundling dependencies like Webpack or Rollup. See build.md for details.

🤔 Performance & Loading: Optimized vs. Portable

Logomaker employs distinct loading strategies tailored for different use cases:

Optimized (deploy) Version (dist/github-pages / Live Demo):

• Mechanism: Uses Hybrid Font Chunking. fontManager.js loads a small index.json (~100KB) containing font metadata. When a font is needed, its specific data chunk (a-f.json, g-m.json, etc., containing both URLs and Base64 data) is fetched from the ./font-chunks/ directory. Downloaded chunks are cached in IndexedDB. @font-face rules are injected dynamically, preferring the URL for efficient browser rendering. SVG export uses the Base64 data from the loaded chunk for reliable embedding.
• Pros: ✅ Fast initial page load. ✅ Reliable SVG font embedding. ✅ Browser display uses efficient URL-based loading. ✅ Persistent chunk caching via IndexedDB.
• Cons: ⚠️ Requires a web server. ⚠️ Needs network access for uncached chunks/font files. ⚠️ Chunk files (*.json) are significantly larger than URL-only versions due to included Base64 data.

Portable Version (dist/portable):

• Mechanism: Embeds all font data (Base64 encoded) directly into inline-fonts-data.js. fontManager.js detects this embedded data (window._INLINE_FONTS_DATA) and uses it directly for both browser display and SVG embedding.
• Pros: ✅ Works completely offline. ✅ Self-contained directory. ✅ Reliable SVG font embedding.
• Cons: ⚠️ Very slow initial load and high memory usage due to the large (~50-100MB+) embedded data script.

The build script (node scripts/build.js) handles generating the correct assets for each mode.

Random Styles

The Randomize Style feature intelligently generates combinations for rapid exploration and inspiration (press the R key to use it). Core text is preserved while other settings are guided by weighted probabilities favoring common styles. It incorporates coherence rules to prevent visual clashes and employs intelligent value generation (HSL color theming, proportional sizing) for usable starting points.

The "Vibe Coding" Experiment

Logomaker's development was a deliberate exploration of Human+AI Collaborative Coding, termed "Vibe Coding".

• Process: Involved defining requirements, then using technically-guided prompt engineering with LLMs (GPT-4, Claude 3, Gemini) to generate initial code structures, functions, and UI elements. This was followed by rigorous human testing, debugging, refactoring, and integration. AI provided drafts; human expertise provided architecture, validation, and robustness.
• Goal: To investigate accelerating development via AI collaboration while producing a complex, functional application. It highlights AI's strength in generation and exploration, alongside the essential human role in ensuring quality and coherence.
• Architecture: See architecture.md for a component breakdown and more on the Human+AI model.

⚠️ Known Limitations & Future Ideas

• CSS ➡️ Export Fidelity: Complex CSS effects may render differently or be simplified in SVG/PNG exports compared to the live browser preview.
• HTML2Canvas.js issue with text gradients: See niklasvh/html2canvas#2366.
• GIF support is limited to separate PNGs that must be combined later (can add a separate library for this as an optional dep)

❤️ Support & Connect

Find Logomaker useful or intriguing? Consider supporting its development and future experiments!

Connect with Manic Agency: (Experimental Design & Development: AR/VR, AI/ML/GenAI, Crypto, Game Design) https://manic.agency

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.