How to handle authentication with Navaid?

Navaid doesn't have built-in authentication guards. You must manually check auth status in route handlers and redirect using route() or run(), adding custom logic for secure routes.

Navaid vs React Router: which is better for small projects?

For small projects where bundle size is critical, Navaid's 865 bytes is a clear win over React Router's larger footprint. However, React Router offers more features and better integration with React ecosystems.

How to implement nested routes in Navaid?

Navaid doesn't support nested routes directly. You can approximate them using wildcards or multiple router instances with base paths, but it's less intuitive than dedicated nested routing systems.

Can Navaid be used with server-side rendering?

Yes, via the run() method in Node.js, but it's primarily client-side. For SSR, you'll need to handle routing logic separately on the server, which may require additional setup.

Is Navaid suitable for large applications?

While minimal and fast, large apps might outgrow Navaid due to its lack of advanced features and tooling. It's best for small to medium projects where simplicity and size are top priorities.

How to programmatically navigate in Navaid?

Use the route() method for history-aware navigation (e.g., router.route('/path')) or run() for manual execution without history changes, as detailed in the API section for seamless updates.

Open-Awesome

navaid

MITJavaScriptv1.2.0

A tiny (865-byte) client-side router for the browser with support for named parameters, wildcards, and history integration.

GitHub

796 stars27 forks0 contributors

What is navaid?

Navaid is a lightweight client-side router for JavaScript applications running in the browser. It handles URL routing, parameter parsing, and history management, enabling single-page application navigation without full-fledged framework overhead. It solves the problem of adding routing functionality to projects where bundle size and simplicity are critical.

Target Audience

Developers building lightweight JavaScript applications, static sites, or small projects that need client-side routing without the bulk of larger frameworks.

Value Proposition

Developers choose Navaid for its minuscule footprint (865 bytes) and straightforward API, offering essential routing features without bloat. It's a pragmatic alternative to heavier routers when performance and minimalism are priorities.

Overview

A navigation aid (aka, router) for the browser in 850 bytes~!

Use Cases

Best For

Adding client-side routing to lightweight JavaScript projects
Building single-page applications with minimal bundle size
Creating static sites with dynamic navigation features
Prototyping applications that need basic routing quickly
Embedding routing in small widgets or components
Projects where every byte of JavaScript matters

Not Ideal For

Applications built with modern frameworks like React or Vue that have integrated routing solutions
Projects requiring complex routing features such as middleware, authentication guards, or code splitting
Large-scale teams that depend on extensive documentation, tutorials, and community support for troubleshooting

Pros & Cons

Pros

Extremely Lightweight

At 865 bytes gzipped, it adds negligible overhead, ideal for performance-sensitive projects where every byte counts, as highlighted in the README's size badges.

Flexible Pattern Matching

Supports static routes, named parameters, optional segments, and wildcards, allowing dynamic routing without bloat, as demonstrated in the API examples.

Seamless History Integration

Automatically binds to browser history events and intercepts anchor clicks for smooth navigation, making it feel like a single-page application with minimal setup.

Simple API

With straightforward methods like on(), run(), and listen(), it's easy to set up and manage routes, reducing the learning curve for basic routing needs.

Cons

Limited Feature Set

Lacks advanced routing capabilities such as route guards, lazy loading, or nested route configurations beyond wildcards, which may require manual implementation for complex apps.

No Framework Bindings

Does not provide out-of-the-box integration with popular frameworks, forcing developers to wire it up themselves, increasing setup complexity and potential for errors.

Basic Error Handling

404 handling is configurable but minimal, and async route handlers need explicit error management, leading to boilerplate code and less robustness in edge cases.

Frequently Asked Questions

Related Projects

wouter

🥢 A minimalist-friendly ~2.2KB routing for React and Preact

Stars7,853

Forks185

Last commit3 days ago

director

a tiny and isomorphic URL router for JavaScript

Stars5,574

Forks476

Last commit5 years ago

crossroads

JavaScript Routes

Stars1,438

Forks155

Last commit2 years ago

regexparam

A tiny (394B) utility that converts route patterns into RegExp. Limited alternative to `path-to-regexp` 🙇‍♂️

Stars597

Forks26