🎨 Awesome Static Tools

A curated collection of the best JavaScript libraries, CSS tricks, and interactive features for building beautiful, performant personal websites and blogs with 11ty (or any JAMstack framework).

---

🚀 Deploy to Netlify

This will clone the repo to your account, set build to npm run build and publish _site/.

---

📖 Table of Contents

• 🎨 Awesome Static Tools
  • 📖 Table of Contents
  • ✨ Features
  • 🚀 Quick Start
    • Installation Methods
  • 📚 Categories
    • ✍️ Text Highlighting & Annotations
      • Rough Notation
      • Mark.js
    • 📝 Footnotes & Sidenotes
      • Littlefoot.js
      • Tufte CSS
    • 🎯 Interactive Elements
      • Tippy.js
    • 🔍 Search
    • 💬 Comments
    • ⚡ Interactivity (Forms & Toggles)
    • 🎬 Scroll Effects
      • AOS (Animate On Scroll)
      • Reading Progress Bar
    • 🔤 Typography
      • Typetura
      • Reading Time Estimator
    • 🖼️ Images & Media
      • medium-zoom
    • 💻 Code & Diagrams

---

✨ Features

This repository collects the best-in-class JavaScript libraries and CSS techniques specifically curated for:

• 📝 Personal blogs & writing sites
• 🎓 Documentation sites
• 📰 Digital publications
• 🌐 Static sites (JAMstack)
• 🔌 11ty (Eleventy) projects (with specific integration guides!)

All libraries are:

• ✅ Lightweight & performant
• ✅ Mobile-friendly & accessible
• ✅ Framework-agnostic (works with vanilla JS)
• ✅ Well-documented with examples
• ✅ Actively maintained

---

🚀 Quick Start

1. Browse the categories below to find features you want
2. Read the docs/ for detailed implementation guides
3. Run the Eleventy site locally to explore working demos:

   npm install
   npm run serve
   # Open http://localhost:8080/
   

4. Visit demo routes like /, /demo/, and /demos/* (listed below)

Installation Methods

Most libraries can be installed via:

NPM/Yarn:

npm install library-name
# or
yarn add library-name

CDN (for quick prototyping):

<script src="https://unpkg.com/library-name"></script>

Direct Download: Visit the library's GitHub repository and download the latest release.

---

📚 Categories

✍️ Text Highlighting & Annotations

Rough Notation

Hand-drawn style annotations with a sketchy, human feel.

• Size: 3.8kb gzipped
• Website: https://roughnotation.com/
• GitHub: https://github.com/rough-stuff/rough-notation
• npm: npm install rough-notation
• Styles: Underline, box, circle, highlight, strike-through, bracket
• Integration: View Guide

import { annotate } from 'rough-notation';
const element = document.querySelector('#myElement');
const annotation = annotate(element, { type: 'highlight', color: 'yellow' });
annotation.show();

Mark.js

Programmatic text highlighting and search term marking.

• Website: https://markjs.io/
• GitHub: https://github.com/julkue/mark.js
• npm: npm install mark.js
• Features: Diacritics support, separate word search, custom synonyms
• Integration: View Guide

---

📝 Footnotes & Sidenotes

Littlefoot.js

Converts footnotes to interactive popovers (no jQuery required!).

• Website: https://littlefoot.js.org/
• GitHub: https://github.com/goblindegook/littlefoot
• npm: npm install littlefoot
• CDN:

  <link rel="stylesheet" href="https://unpkg.com/littlefoot/dist/littlefoot.css" />
  <script src="https://unpkg.com/littlefoot/dist/littlefoot.js"></script>
  

• Integration: View Guide

Tufte CSS

Beautiful sidenote styling inspired by Edward Tufte's work.

• Website: https://edwardtufte.github.io/tufte-css/
• GitHub: https://github.com/edwardtufte/tufte-css
• Type: Pure CSS (no JavaScript!)
• Features: Sidenotes, margin notes, elegant typography
• Integration: View Guide

---

🎯 Interactive Elements

Tippy.js

Highly customizable tooltips, popovers, and dropdowns.

• Website: https://atomiks.github.io/tippyjs/
• GitHub: https://github.com/atomiks/tippyjs
• npm: npm install tippy.js
• Features:
  • Multiple themes & animations
  • Interactive content
  • HTML support
  • Follow cursor
  • Singleton instances
• Integration: View Guide

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

tippy('#myButton', {
  content: 'I'm a tooltip!',
  theme: 'light',
  animation: 'scale'
});

ez-tip (Alternative to Tippy.js)

A zero-dependency tooltip helper that relies on CSS custom properties for styling.

• GitHub: https://github.com/graphieros/ez-tip
• Features: No dependencies, style via CSS variables
• Integration: View Guide

PhotoSwipe (Gallery/Lightbox)

Zero-dependency, touch-friendly image gallery for mobile and desktop.

• Website: https://photoswipe.com/
• GitHub: https://github.com/photoswipe/photoswipe
• Features: Touch gestures, high performance, customizable UI
• Integration: View Guide

Eleventy Image (Build-Time Optimization)

Official Eleventy plugin for responsive, next-gen images (WebP/AVIF) at build time.

• Website: https://www.11ty.dev/docs/plugins/image/
• GitHub: https://github.com/11ty/eleventy-img
• npm: npm install @11ty/eleventy-img
• Integration: View Guide

---

🎬 Scroll Effects

AOS (Animate On Scroll)

Animate elements as you scroll.

• Website: https://michalsnik.github.io/aos/
• GitHub: https://github.com/michalsnik/aos
• npm: npm install aos
• CDN:

  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  

• Animations: Fade, flip, zoom, slide
• Integration: View Guide

<div data-aos="fade-up" data-aos-duration="1000">
  Content that fades up!
</div>

Reading Progress Bar

Visual indicator of reading progress.

• Pure CSS + JS Implementation: View Guide
• Libraries:
  • scrollProgress.js
  • DIY: Tutorial

Sal.js (Scroll Animation Library)

Performance-focused, tiny (<3kb) scroll animation library in vanilla JS. Great minimal alternative to AOS for simple reveals.

• GitHub: https://github.com/mciastek/sal
• Features: Small, no dependencies, easy to use
• Integration: View Guide

Scroll-Out

Zero-dependency utility that exposes scroll position/direction as CSS variables for CSS-driven effects.

• GitHub: https://github.com/scroll-out/scroll-out
• Features: CSS variables for scroll progress, flexible
• Integration: View Guide

---

🔤 Typography

Typetura

Fluid, responsive typography with keyframe-based scaling.

• Website: https://typetura.scottkellum.com/
• GitHub: https://github.com/Typetura/Typetura
• Features:
  • Curve interpolation
  • Variable font support
  • Container queries
  • No JavaScript required (CSS-only!)
• Integration: View Guide

Lettering.js

Fine-grained control over typography by wrapping letters/words/lines in spans.

• Website: http://letteringjs.com/
• GitHub: https://github.com/letteringjs/lettering.js
• Features: Advanced typographic styling and animation
• Integration: View Guide

Reading Time Estimator

Display estimated reading time.

• npm packages:
  • reading-time (most popular)
  • reading-time-estimator (i18n support)
  • @iamtraction/read-time
• DIY: Simple Tutorial

import readingTime from 'reading-time';
const stats = readingTime(text);
// Output: { text: '1 min read', minutes: 1, time: 60000, words: 200 }

---

🖼️ Images & Media

medium-zoom

Medium-style image zoom effect.

• Demo: https://medium-zoom.francoischalifour.com/
• GitHub: https://github.com/francoischalifour/medium-zoom
• npm: npm install medium-zoom
• Size: Lightweight & framework agnostic
• Integration: View Guide

import mediumZoom from 'medium-zoom';
mediumZoom('[data-zoomable]', {
  margin: 24,
  background: '#000',
  scrollOffset: 0
});

---

💻 Code & Diagrams

Prism.js

Elegant syntax highlighting for code blocks.

• Website: https://prismjs.com/
• GitHub: https://github.com/PrismJS/prism
• npm: npm install prismjs
• Size: 2KB core (languages ~300-500 bytes each)
• Languages: 300+
• Plugins: Line numbers, copy-to-clipboard, etc.
• Integration: View Guide

Mermaid.js

Diagrams and flowcharts from text.

• Website: https://mermaid.js.org/
• GitHub: https://github.com/mermaid-js/mermaid
• Live Editor: https://mermaid.live/
• npm: npm install mermaid
• Diagram Types: Flowcharts, sequence, Gantt, class diagrams, more
• Integration: View Guide

graph TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Do Something]
    B -->|No| D[Do Somethin