A userscript that adds additional features for route planning on Komoot.com.
A userscript for Komoot.com that adds additional features for route planning.
[!WARNING] This is currently an experimental project or proof-of-concept. It may contain bugs or incomplete features, and is not intended for production use. Breaking changes may be made at any time. Consider more stable alternatives for critical applications.
Using Komoot for route planning? This script may help. It runs in your browser and adds additional features to the site to help you plan your next adventure.
 |
|---|
| Komoot's route list page with Komodo - v1.0.0 |
[!CAUTION] For security reasons, I do not recommend running scripts from the internet unless you understand what they are doing. If you are not a developer, I recommend reading the comments in the code and/or asking a LLM like ChatGPT or Claude to explain it to you.
I recommend using this script with a userscript manager because it will keep the script up-to-date and run it automatically when you visit the appropriate page. If you don't want to do that, you can also run it manually.
A userscript manager is a browser extension that allows you to organize and run scripts on websites. If you don't already have one, I would recommend Violentmonkey, Tampermonkey, ScriptCat, or Greasemonkey. For more choices, see this comparison table.
You can then click the button below to install the latest version of the script directly from this repo:
or install it from GreasyFork:
Note that the latest version may include breaking changes from time to time. You can choose to install a specific version of the script instead on the releases page.
[!NOTE] This only works once. If the page gets reloaded or you navigate away and come back, you will have to run the script again. If you want to run the script automatically, I suggest using a userscript manager.
Alternatively, you can run the script by going to a supported page, copying the code in dist/komodo.user.js, and pasting it into your browser's devtools console. The following pages are supported:
All UI elements added to the Komoot website have a lizard icon (🦎) in the top right corner so they can be easily identified.
Tags can be added to a route by including a specially formatted label in the route name using the Komoot website or app as usual. There is currently no visual editor for tags.
Each tag must be in the format [tagName:tagValue] and adhere to the following formatting rules:
[status:WIP] My Route [direction:north])
[status:WIP] is different from [status:wip])[a:b], [a: b], and [ a : b ] are all equivalent)[Start Point:Home])[, ], and : are not allowed in tag names and values because they are used to delimit tags. Emojis, spaces, and all other characters are allowed (ex. [🚗:💨] is valid)For example, setting a route name to [status:WIP] My Route [Start_Point:Home] [direction:north] will add the following tags to the route:
This script uses the tags found in the route list to populate the filter controls.
By default, Komoot only loads a handful of routes at a time, so if you notice that some tag names/values are missing from the filter controls, click the Load All Routes button to force load the entire list of routes. This may take a few seconds to complete.
On the route list page, you can filter routes by tag. A group of checkboxes will be added to the Filter by section for each tag name.
By default, nothing will be filtered out of the list. Click a checkbox once to only show routes with that value. Click the checkbox a second time to exclude any routes with that value. You can click once more to reset the checkbox.
You can filter by multiple tag names/values at the same time. By include/exclude checking all checkboxes in a tag name group, you can effectively filter routes by the presence of that tag name. For example, exclude checking all checkboxes for the status tag name will show you routes that you haven't assigned a status.
It is also possible to search through tags using the search box, because the built-in Komoot search feature still uses the original route titles. This means keyword order is important while searching, and because keywords you enter may unexpectedly match tags, you may want to name them accordingly to avoid this. For example, you could search for [status: to get all routes with tag name status.
This script adds various classes, ids, data attributes, and CSS variables to the elements it creates or modifies. You can use these to further customize the appearance of the UI using custom CSS styles.
In general, elements added to the page will have a class added that starts with komodo-. Data attributes like data-komodo-tag-name and data-komodo-tag-value are added to pill elements and filter controls which can be used to target specific elements. You can inspect these elements using your browser's developer tools or refer to the following files for more details on the attributes added:
Tags pills have multiple children so that you can style the name, value, and separator separately. This is handy because you can use an easy to type tag name like loc, but use CSS to replace the original value with something more readable like Location or even an emoji like 📍. You can even hide parts of the tag completely to save space if you wish.
To add custom CSS to pages, you can use a user style manager like Stylus.
For example, you could use the following CSS to change the background color and add an emoji to all pills with the name status and the value wip:
.komodo-pill[data-komodo-tag-name='status'][data-komodo-tag-value='WIP'] {
background: orange;
& > div::before {
content: '🚧 ';
font-size: x-small;
}
}
 |
|---|
| Custom pills on the route list page - v0.1.0 |
For a more complete example, see [examples/custom-styles-for-komodo.user.css]. These are similar to the styles I am actually using:
 |
|---|
| Kitchen sink styles ([examples/custom-styles-for-komodo.user.css]) on the route list page - v1.0.0 |
Some browsers prevent you from pasting code in the console because it could be malicious. This is called Paste Protection and you can read more about it on the Chrome for Developers Blog.
If this happens, follow the instructions in the console to re-enable pasting, and then try again. For Chrome, the following steps should work:
See this video for a visual walkthrough.
Uncaught SyntaxError: Unexpected identifier error when running the scriptMake sure that you select the entire file with Ctrl + A when copying it. If part of the script is cut off, it won't work.
If you encounter any problems with the script, feel free to create an issue.
Pull requests, bug reports, translations, and other kinds of contributions are greatly appreciated. By contributing code, you agree to license your contributions under the terms of the [LICENSE].
This project is written in TypeScript and uses Vite and vite-plugin-monkey to bundle the code into a single file that can be installed as a userscript.
We use Bun for package management. You can use another package manager if you want, but you'll have to replace refererences to bun or bunx in the following places:
package.json.husky/*.github/workflows/*The Conventional Commits specification is used for commit messages. These conventions are enforced using Commitlint via Husky pre-commit hooks.
Commitizen is set up as well, so you can use bun commit to commit changes using an interactive prompt instead of git commit.
Biome is used for linting and formatting.
Semantic Release is used to automate the release process.
To work on the project locally, first clone the repository and run bun install to install the dependencies.
To build the script, run bun run build. This will create a dist folder with the compiled script.
To run the script in development mode, run bun run dev. This will start a development server that will watch for changes and rebuild the script automatically.
This project is licensed under the MIT License. See [LICENSE] for details.
The project logo is from the Fluent Emoji collection, licensed under the MIT License.
This project is not affiliated with or endorsed by Komoot in any way.
Find this project useful? Sponsoring me will help me cover costs and commit more time to open-source.
If you can't donate but still want to contribute, don't worry. There are many other ways to help out, like:
I appreciate the support!
[examples/custom-styles-for-komodo.user.css]: examples/custom-styles-for-komodo.user.css [LICENSE]: LICENSE
