Skip to content

Repository files navigation

🐘 Mastodon Thread Tree

A tiny static web app that turns a Mastodon post URL into a clear, readable reply tree — so you can actually follow who answered whom in long, deeply nested conversations.

Live: https://nobsagile.github.io/mastodon-thread/

image

Usage

  • Open the site and paste a post URL, or
  • Link directly with a query param: https://nobsagile.github.io/mastodon-thread/?url=https://mastodon.social/@nobsagile/116923194127241157

Accepts the usual Mastodon link shapes (/@user/<id>, /users/<user>/statuses/<id>, /web/statuses/<id>).

Userscript: Thread sidebar in the Mastodon web UI

Want the thread tree right inside Mastodon, without copy-pasting URLs? Install the userscript. It adds a small tree button to every post's action bar — click it and the thread opens as a reply tree in a side drawer.

image image

Install

  1. Install a userscript manager: Violentmonkey or Tampermonkey. On Chromium browsers (Chrome, Vivaldi, Edge, Brave) you must enable Developer mode on the extensions page (and, on newer versions, toggle Allow user scripts on the manager's details page) — otherwise userscripts won't run.
  2. Install the script: mastodon-thread-sidebar.user.js (the manager will pick it up automatically).
  3. Reload your Mastodon instance.

Notes

  • Works on any standard Mastodon web instance — the script only activates when it detects the Mastodon web app, so it stays idle everywhere else.
  • Uses the timestamp permalink of each post, so it also resolves threads on remote instances correctly.
  • Drawer width and side are configurable at the top of the script (PANEL_WIDTH).

How it works

  • Uses the public Mastodon API (/api/v1/statuses/:id + /…/context) — no login, no server, no build step.
  • Rebuilds the tree client-side from each post's in_reply_to_id.
  • The /context endpoint returns only ~60 descendants per request, so the app progressively re-fetches context for any post whose replies_count exceeds the replies already loaded, until the tree is complete (with a safety cap + "Load more" button for very large threads).

Features

  • Nested indentation with connecting lines
  • Collapse / expand any subtree
  • Avatars, custom emojis, and media attachments
  • Original poster and the pasted post are highlighted
  • Full ancestor chain shown when you paste a mid-thread reply

Limitations

  • Only public posts are visible (the API can't see followers-only/DM replies).
  • Replies that federated to other servers but never reached the queried instance won't appear.

Development

Pure HTML/CSS/JS. To run locally:

python3 -m http.server
# then open http://localhost:8000/?url=<mastodon post url>

DOMPurify (in vendor/) sanitizes post HTML.

About

Render a Mastodon thread as a readable reply tree

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages