This repository has been archived by the owner. It is now read-only.
[Deprecated] Navigation and routing helpers for single page applications in Elm
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.vscode Rename makeMatcher to makeResolver Sep 8, 2016
docs Add Order matters Sep 17, 2016
src Remove unnecessary address arg Oct 26, 2016
tests Add test for makeResolver Sep 9, 2016
.editorconfig Improve documentation Sep 8, 2016
.gitignore Update gitignore May 26, 2016
Makefile Change signature of makeMatcher Sep 8, 2016
elm-package.json Bump version Oct 26, 2016 Add The MIT License Sep 9, 2016
package.json Update license in package.json Sep 9, 2016 Merge branch 'master' of Nov 14, 2016

Hop: Navigation and routing helpers for Elm SPAs

Build Status

alt Hop

With the release of Elm 0.18 the official libraries Navigation and UrlParser have become a lot more robust and useful. They now integrate a lot of the functionality that Hop used to provide for previous versions of Elm. For example UrlParser now has parseHash and parsePath. Because of this I'm not convinced that Hop needs to be upgraded to Elm 0.18. I'll wait and see if this library could provide value in 0.18.

Hop is a helper library meant to be used with:

  • Navigation v1 for listening to location changes in the browser and pushing changes to it.
  • UrlParser v1 for constructing routes and parsing URLs.

What Hop provides

On top of these two packages above, Hop helps with:

  • Abstracting the differences between push or hash routing
  • Providing helpers for working with the query string
  • Encode / Decode the location path
  • Encode / Decode the query string

Getting Started

Please see this example app. It explains how to wire everything in the comments.


Building routes

Nesting routes

Matching routes


Reverse routing



Testing Hop

More docs

Upgrade guide 5 to 6

Upgrade guide 4 to 5

Upgrade guide 3 to 4

Upgrade guide 2.1 to 3.0

Version 5 documentation

Version 4 documentation

Version 3 documentation

Version 2 documentation

Hash routing

A proper url should have the query before the hash e.g. ?keyword=Ja#/users/1, but when using hash routing, query parameters are appended after the hash path e.g. #/users/1?keyword=Ja. This is done for aesthetics and so the router is fully controlled by the hash fragment.


See examples/basic and examples/full folders. To run the example apps:

  • Clone this repo
  • Go to example folder
  • Follow the readme in that folder