Component reference

Attributes, render modes, and CSS variables for each OP web component

Last modified 2026-05-01

Table of content
  1. Shared attributes
  2. The server attribute
  3. Render modes
  4. CSS custom properties
  5. <octo-thorpe>
  6. <octo-backlinks>
  7. <octo-multipass>
  8. <octo-multipass-loader>
  9. <octo-badge>

The following web components are hosted by the octothorp.es server, and are not core features of OP. Different OP Servers and apps may decide to host different components, or none at all.

Shared attributes

Most query components (<octo-thorpe>, <octo-backlinks>) accept the same set of filter attributes.

The server attribute

OP is a distributed protocol — there's more than one server. The server attribute tells a component which OP server to query. By default it uses the origin of the URL the component was loaded from, so a component served from https://myserver.example.com/components/octo-thorpe.js will query https://myserver.example.com. Override it explicitly if you need to point at a different server:

<octo-thorpe o="your-tag" server="https://your-op-server.example.com" autoload></octo-thorpe>
Attribute Description Default
server OP server to query Origin of the script's URL
o Object filter — terms or URLs, comma-separated
s Subject filter — domains, comma-separated
noto Exclude these objects
nots Exclude these subjects
match Match mode: exact, fuzzy, fuzzy-o, fuzzy-s, very-fuzzy
limit Max results 10
offset Result offset for pagination 0
when Date filter: recent, after-DATE, before-DATE, between-DATE-and-DATE
autoload Fetch on mount (boolean attribute) false
render Display mode: list, cards, compact, count compact

Render modes

Mode Output
list Bulleted list with title, description, and date
cards Image grid
compact Closed term opening to a list of links, like the classic tags.js
count Just the number — for inline use

CSS custom properties

All query components share the same CSS variables, set on the element or a parent:

octo-thorpe {
  --octo-font: system-ui, sans-serif;
  --octo-primary: #3c7efb;
  --octo-background: #ffffff;
  --octo-text: #333333;
  --octo-border: #e0e0e0;
  --octo-error: #d32f2f;
  --octo-spacing: 1rem;
  --octo-radius: 4px;
}

<octo-thorpe>

Shows pages tagged with a given octothorpe term.

API: GET /get/pages/thorped

<script type="module" src="https://octothorp.es/components/octo-thorpe.js"></script>
<octo-thorpe o="your-tag" autoload></octo-thorpe>
<octo-thorpe o="one-tag,another,athird" render="cards" autoload></octo-thorpe>

Accepts all shared attributes.

Upgrading from tags.js? The element name and text-content syntax (<octo-thorpe>term</octo-thorpe>) still work with the new component. Switching is a one-line script change. The o attribute is available if you want render modes, filtering, or multiple terms. tags.js continues to work for sites that haven't migrated.

<octo-backlinks>

Shows pages that link to a given URL. Defaults to the current page if o is omitted.

API: GET /get/pages/linked

<script type="module" src="https://octothorp.es/components/octo-backlinks.js"></script>
<octo-backlinks autoload></octo-backlinks>

Accepts all shared attributes, plus:

Attribute Description Default
emptyMessage Text shown when no results "No links found to this page"

<octo-multipass>

Accepts a MultiPass JSON object and displays results with metadata.

<script type="module" src="https://octothorp.es/components/octo-multipass.js"></script>
<octo-multipass multipass='{"what":"pages","by":"thorped","o":"your-tag"}' autoload></octo-multipass>
Attribute Description
multipass MultiPass JSON string or object
autoload Fetch on mount
render list, cards, compact, or count

<octo-multipass-loader>

File drop zone for MultiPass objects. Accepts GIF or JSON drops and renders results.

<script type="module" src="https://octothorp.es/components/octo-multipass-loader.js"></script>
<octo-multipass-loader></octo-multipass-loader>

Pre-load a GIF — skip the drop zone and render results from a MultiPass GIF directly:

<octo-multipass-loader gif="https://yoursite.com/my-multipass.gif" render="list"></octo-multipass-loader>

Render into an external element — useful if you want the loader and results in separate parts of the page:

<octo-multipass-loader target="#results"></octo-multipass-loader>
<div id="results"></div>
Attribute Description Default
render Display mode for results: list, cards, compact list
placeholder Upload prompt text "Drop MultiPass JSON or GIF here"
gif URL to a MultiPass GIF — skips the drop zone and loads directly
target CSS selector for an external element to render results into

<octo-badge>

Renders a clickable 88×31 badge that triggers indexing of the current page on mount.

<script type="module" src="https://octothorp.es/components/octo-badge.js"></script>
<octo-badge></octo-badge>
Attribute Description Default
server OP server URL https://octothorp.es
uri Page URL to index Current page URL
as Harmonizer ID or URL "default"