Top Related Projects
🥢 A minimalist-friendly ~2.1KB routing for React and Preact
Declarative routing for React
Quick Overview
Itty Router is a lightweight, zero-dependency router for JavaScript projects, particularly suited for serverless and edge computing environments. It offers a simple and intuitive API for handling routing in applications, with a focus on minimalism and performance.
Pros
- Extremely lightweight (less than 400 bytes minified + gzipped)
- Zero dependencies, reducing potential security vulnerabilities
- Simple and intuitive API for easy integration
- Supports nested routers for modular code organization
Cons
- Limited built-in features compared to more comprehensive routing libraries
- May require additional middleware or plugins for advanced use cases
- Not as widely adopted as some other routing solutions
- Documentation could be more extensive for complex scenarios
Code Examples
Basic routing:
import { Router } from 'itty-router'
const router = Router()
router.get('/hello', () => new Response('Hello, World!'))
router.get('/user/:id', ({ params }) => new Response(`User ID: ${params.id}`))
router.all('*', () => new Response('Not Found', { status: 404 }))
// Handle requests
addEventListener('fetch', event => {
event.respondWith(router.handle(event.request))
})
Nested routers:
import { Router } from 'itty-router'
const router = Router()
const apiRouter = Router({ base: '/api' })
apiRouter.get('/users', () => new Response('List of users'))
apiRouter.post('/users', () => new Response('Create user'))
router.all('/api/*', apiRouter.handle)
// Handle requests
addEventListener('fetch', event => {
event.respondWith(router.handle(event.request))
})
Using middleware:
import { Router } from 'itty-router'
const router = Router()
const authMiddleware = (request) => {
if (!request.headers.get('Authorization')) {
return new Response('Unauthorized', { status: 401 })
}
}
router.get('/protected', authMiddleware, () => new Response('Protected content'))
// Handle requests
addEventListener('fetch', event => {
event.respondWith(router.handle(event.request))
})
Getting Started
-
Install the package:
npm install itty-router
-
Create a new router and define routes:
import { Router } from 'itty-router' const router = Router() router.get('/', () => new Response('Home page')) router.get('/about', () => new Response('About page')) // Handle requests addEventListener('fetch', event => { event.respondWith(router.handle(event.request)) })
-
Use the router in your serverless or edge computing environment (e.g., Cloudflare Workers, Deno Deploy, etc.).
Competitor Comparisons
Pros of Reach Router
- More comprehensive routing solution with built-in accessibility features
- Supports nested routing and relative navigation
- Offers a more React-centric API with hooks and components
Cons of Reach Router
- Larger bundle size and potentially more complex setup
- Less suitable for non-React or lightweight projects
- May have a steeper learning curve for beginners
Code Comparison
Reach Router:
import { Router, Link } from "@reach/router"
const App = () => (
<Router>
<Home path="/" />
<Dashboard path="dashboard" />
</Router>
)
Itty Router:
import { Router } from 'itty-router'
const router = Router()
router.get('/', () => new Response('Home'))
router.get('/dashboard', () => new Response('Dashboard'))
Reach Router provides a more declarative, component-based approach to routing, while Itty Router offers a simpler, functional style that's well-suited for serverless environments and lightweight applications. Reach Router is designed specifically for React applications, whereas Itty Router is more versatile and can be used in various JavaScript environments, including serverless functions and service workers.
🥢 A minimalist-friendly ~2.1KB routing for React and Preact
Pros of wouter
- Lightweight and minimalistic, with a smaller bundle size
- Supports both hash-based and memory-based routing
- Provides hooks for easy integration with React components
Cons of wouter
- Less feature-rich compared to itty-router
- May require additional libraries for more complex routing scenarios
- Limited documentation and community support
Code Comparison
wouter:
import { Route, Switch } from "wouter";
<Switch>
<Route path="/users/:id" component={UserProfile} />
<Route path="/about" component={About} />
</Switch>
itty-router:
import { Router } from 'itty-router'
const router = Router()
router.get('/users/:id', handleUserProfile)
router.get('/about', handleAbout)
Both libraries offer simple and intuitive routing solutions, but wouter is more React-focused, while itty-router is more versatile and can be used in various JavaScript environments. wouter's declarative approach may be more familiar to React developers, while itty-router's imperative style offers more flexibility for different use cases.
Declarative routing for React
Pros of React Router
- More comprehensive routing solution with advanced features like nested routes and route parameters
- Larger community and ecosystem, with extensive documentation and third-party integrations
- Designed specifically for React applications, offering seamless integration with React components
Cons of React Router
- Heavier and more complex, which may be overkill for simple routing needs
- Steeper learning curve, especially for beginners or small projects
- Tightly coupled with React, limiting its use in other frameworks or vanilla JavaScript
Code Comparison
React Router:
import { BrowserRouter, Route, Switch } from 'react-router-dom';
<BrowserRouter>
<Switch>
<Route path="/about" component={About} />
<Route path="/" exact component={Home} />
</Switch>
</BrowserRouter>
itty-router:
import { Router } from 'itty-router'
const router = Router()
router.get('/about', () => new Response('About Page'))
router.get('/', () => new Response('Home Page'))
React Router offers a more declarative approach with components, while itty-router uses a more traditional, functional routing style. itty-router is lighter and more flexible, making it suitable for various environments, including serverless and edge computing. However, it lacks some of the advanced features and React-specific optimizations that React Router provides.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
v5 Documentation | v4 -> v5 Migration Guide | Discord
An ultra-tiny API microrouter, for use when size matters (e.g. Cloudflare Workers).
Features
- Tiny. Routers from ~450 bytes to a ~970 bytes batteries-included version (~240-500x smaller than Express.js).
- TypeScript. Powerfully (and flexibly) typed for any environment.
- Route-parsing & query parsing.
- Middleware. Use ours or write your own.
- 100% Test Coverage. Bulletproof for production peace-of-mind.
- Designed specifically for serverless (but works anywhere).
- No assumptions. Return anything; pass in anything.
- Future-proof. HTTP methods not-yet-invented already work with it.
Example
import { AutoRouter } from 'itty-router' // ~1kB
const router = AutoRouter()
router
.get('/hello/:name', ({ name }) => `Hello, ${name}!`)
.get('/json', () => [1,2,3])
.get('/promises', () => Promise.resolve('foo'))
export default router
// that's it ^-^
Need Help?
Complete API documentation is available on itty.dev, or join our Discord channel to chat with community members for quick help!
Join the Discussion!
Have a question? Suggestion? Idea? Complaint? Want to send a gift basket? Join us on Discord!
A Special Thanks :heart:
As the community and contributor list has grown (and thus an individualized list here is no longer easily maintainable), I'd like to thank each and every one of you for making itty far greater than its humble origins. The robustness you see today, the careful consideration of every byte spent on features, the API choices, the code-golfing itself... are all thanks to the efforts and feedback from the community. I'd especially like to thank the core contributors and PR-authors, as well as the fantastic folks on the itty Discord group, for their tireless work refining this little beast and answering community questions.
Top Related Projects
🥢 A minimalist-friendly ~2.1KB routing for React and Preact
Declarative routing for React
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot