neotoc/README.md

Ultra-smooth table of contents UI generator for your docs and blogs.

<a href="https://neotoc.vercel.app" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ashutoshbw/neotoc/refs/heads/main/.github/assets/readme-banner-dark.png">
    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ashutoshbw/neotoc/refs/heads/main/.github/assets/readme-banner-light.png">
    <img alt="Neotoc" src="https://raw.githubusercontent.com/ashutoshbw/neotoc/refs/heads/main/.github/assets/readme-banner-light.png">
  </picture>
</a>

<p align="center">
  <p align="center">
    Ultra-smooth table of contents generator for your docs and blogs.
    <br/>
    <b><a href="https://neotoc.vercel.app/" target="_blank">Documentation</a></b> | <b><a href="https://codepen.io/ashutoshbw/pen/Jojvvbp" target="_blank">CodePen</a></b>
  </p>
</p>

<div align="center">
  <img src="https://img.shields.io/npm/v/neotoc?style=flat-square" alt="npm version">
  <img src="https://img.shields.io/github/license/ashutoshbw/neotoc?style=flat-square" alt="GitHub license">
  <img src="https://img.shields.io/npm/dm/neotoc?style=flat-square" alt="npm monthly downloads">
  <img src="https://data.jsdelivr.com/v1/package/npm/neotoc/badge" alt="">
  <img src="https://img.shields.io/bundlephobia/minzip/neotoc?style=flat-square" alt="bundle size">
  <img src="https://img.shields.io/github/stars/ashutoshbw/neotoc?style=flat-square" alt="GitHub Repo stars">
</div>

<br/>

## 🪄 Features

- **Ultra-smooth**: It accurately highlights exactly where you are on the page, resulting in an ultra-smooth user experience.
- **Auto-scroll**: Neotoc keeps itself in sync with your scroll, so you never have to hunt for your position.
- **Foldable**: Easily fold and unfold nested sections.
- **Opinionated**: Neotoc focuses on a single DOM structure and convention of style, so it stays efficient and free of bloat.
- **Ready-made styles**: Get styled easily with carefully crafted base styles and color schemes.
- **Framework-agnostic**: Neotoc is not tied to any particular library or framework, freeing you to use it anywhere DOM exists.
- **Zero dependencies**: Built entirely from scratch, with no external dependencies.
- **Browser support**: Works smoothly across all modern and popular web browsers.
- **Lightweight**: The JavaScript bundle is 4.2KB, with ready-made CSS bundle weighing about 2.1KB (both minified and gzipped).
- **Accessible**: Accessible with keyboards, touchscreens and screen readers.

## 📖 Documentation

For documentation, visit [neotoc.vercel.app](https://neotoc.vercel.app/).

## 🤝 Contributing

Interested in contributing? Get started by reading [CONTRIBUTING.md](https://github.com/ashutoshbw/neotoc/blob/main/CONTRIBUTING.md).

## 📄 License

The Neotoc is licensed under the [MIT License](https://github.com/ashutoshbw/neotoc/blob/main/LICENSE).

## 🏅 Acknowledgments

The TOC tree view is inspired by GitHub’s file tree interface.