SME Router

SME Router is a lightweight client-side routing library for single-page applications that implements the Express route style, letting developers define routes with a familiar (req, res, next) signature and render HTML into a view container.

What is SME Router?

SME Router is a JavaScript library distributed as the sme-router npm package and hosted on GitHub under the SME-FE organization. It takes a DOM element ID as its constructor argument and a set of route definitions, then handles client-side navigation by rendering HTML strings or redirecting to other routes. The library is authored by hwen, released under the MIT License, and can be installed with npm i --save sme-router or loaded directly from https://unpkg.com/sme-router via a script tag. It is designed for SPAs that do not rely on a heavy framework router.

Key Features

• Express-style routing API — Routes are defined with router.route('/path', handler), where the handler receives req, res, and next parameters just like Express middleware.
• Built-in render and redirect — Use res.render(htmlString) to inject content into the router-view element, or res.redirect('/path') to change the current route.
• Wildcard fallback — A '*' route catches all unmatched paths, commonly used to redirect users to a default page.
• Works without a bundler — A simple <script src="https://unpkg.com/sme-router"></script> include enables the router in plain HTML projects.
• Documentation and demo — Official docs are available in both English and Chinese, with a live demo at https://sme-fe.github.io/sme-router/.
• Developer tooling — The repo includes npm scripts for a dev server (npm run dev, defaulting to http://localhost:8080/), tests (npm run test via Karma), and linting (npm run lint).

Who is it for?

• Front-end developers building SPAs — Those who want a minimal router with an Express-like API can integrate sme-router into vanilla JavaScript projects without framework-specific routing dependencies.
• Teams familiar with Express — Developers coming from a Node.js/Express background can apply the same route-handling mental model on the client side.
• Students and hobbyists — The small API surface and the included HTML-string rendering make it a practical tool for understanding the fundamentals of client-side routing.

What can you do with it?

• Quickly scaffold a simple SPA — Create a router instance bound to a router-view div, define an /index route that renders a hello-world message, and add a wildcard route that redirects unmatched URLs.
• Implement redirect logic — Use res.redirect('/index') inside fallback routes to send users to a home page whenever they hit an undefined path.
• Run and test locally — After cloning the repository, run npm i then npm run dev to launch the demo on port 8080, or npm run test to execute the Karma test suite.

How does it work?

SME Router works by creating a router instance with the ID of the container element, then registering route patterns that match the current URL. When a route matches, its handler receives req and res; calling res.render writes the provided HTML string into the container, while res.redirect navigates to another route and triggers the corresponding handler. A wildcard route can be placed at the end to handle any unregistered path.

FAQ

Is SME Router free to use?

Yes, the library is open source and released under the MIT License, so it can be freely used, modified, and distributed, including in commercial projects.

How do I install sme-router?

You can install it with npm by running npm i --save sme-router. If you are not using a bundler, you can include it directly in your HTML with a script tag pointing to https://unpkg.com/sme-router.

Does SME Router require a framework?

No, it is framework-agnostic and works with plain JavaScript. The only requirement is a DOM element where the router will render its output.

What is the Express route style?

It mimics Express by giving each route handler a req, res, and next parameter. Instead of building HTTP responses, res.render takes an HTML string to display in the view, and res.redirect navigates to another route.