Developer Documentation

Fubi stays out of your way — it renders in a Shadow DOM and only touches your page where it must. Here's what it adds, and what you can override.

CSS Variables

Fubi uses CSS variables for highlight colors so you can easily override them. If not the default values are used.

:root {
  --fubi-hover-default-color: #0ea5e9;     /* Default element highlight */
  --fubi-hover-error-color: #ef4444;       /* Error state highlight */
  --fubi-hover-invisible-color: #ea580c;   /* Hidden/zero-size elements */
  --fubi-hover-done-color: #22c55e;        /* Resolved/done elements */
  --fubi-hover-thread-color: #6366f1;      /* Elements with comment threads */
  --fubi-hover-not-allowed-color: #737373; /* Ignored elements */
  --fubi-hover-isolation-color: #6366f1;   /* Isolation mode outline */
}

:root {
  --fubi-hover-default-color: #0ea5e9;     /* Default element highlight */
  --fubi-hover-error-color: #ef4444;       /* Error state highlight */
  --fubi-hover-invisible-color: #ea580c;   /* Hidden/zero-size elements */
  --fubi-hover-done-color: #22c55e;        /* Resolved/done elements */
  --fubi-hover-thread-color: #6366f1;      /* Elements with comment threads */
  --fubi-hover-not-allowed-color: #737373; /* Ignored elements */
  --fubi-hover-isolation-color: #6366f1;   /* Isolation mode outline */
}

:root {
  --fubi-hover-default-color: #0ea5e9;     /* Default element highlight */
  --fubi-hover-error-color: #ef4444;       /* Error state highlight */
  --fubi-hover-invisible-color: #ea580c;   /* Hidden/zero-size elements */
  --fubi-hover-done-color: #22c55e;        /* Resolved/done elements */
  --fubi-hover-thread-color: #6366f1;      /* Elements with comment threads */
  --fubi-hover-not-allowed-color: #737373; /* Ignored elements */
  --fubi-hover-isolation-color: #6366f1;   /* Isolation mode outline */
}

Data Attributes

Use data attributes to mark elements that should be ignored by Fubi. Apply them to a single element or let them cascade to every child.

<!-- data-fubi-ignore: skips one element, children still selectable -->
<button data-fubi-ignore>Can't select this</button>

<nav>
  <a href="/" data-fubi-ignore>Home</a>   <!-- ignored -->
  <a href="/about">About</a>              <!-- still selectable -->
</nav>

<!-- data-fubi-ignore-all: skips element + all children, crosses shadow DOM -->
<nav data-fubi-ignore-all>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <div class="dropdown">
    <button>Menu</button>                 <!-- all children ignored too -->
  </div>
</nav>

<!-- data-fubi-ignore: skips one element, children still selectable -->
<button data-fubi-ignore>Can't select this</button>

<nav>
  <a href="/" data-fubi-ignore>Home</a>   <!-- ignored -->
  <a href="/about">About</a>              <!-- still selectable -->
</nav>

<!-- data-fubi-ignore-all: skips element + all children, crosses shadow DOM -->
<nav data-fubi-ignore-all>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <div class="dropdown">
    <button>Menu</button>                 <!-- all children ignored too -->
  </div>
</nav>

<button data-fubi-ignore>Can't select 
this</button>

<nav>
  <a href="/" data-fubi-ignore>Home</a>             
<!-- ignored -->
  <a href="/about">About</a>.              
<!-- still selectable -->
<

Stay up to date with news, updates, and new versions of Fubi.

We’re on

Need help? Contact us at

support@fubi.dev

Features

Pricing

Security

Docs

Live Demo

Get Started

Terms & Conditions

DPA

Cookie Policy