Reviews

The review layer pins comments to the page. Wrap any content — a design, a dashboard, a form, a product page — and reviewers click anything to start a thread on it. Pins are tied to elements, not to screen positions, so they follow the content as it reflows, scrolls and zooms, and land in the right place on another screen size.

Replies, @mentions of your own people, editing and deleting your own comments, resolve and reopen, and a list of every thread with filters and search. Nothing is stored or sent: threads go in, and every change comes out as plain JSON for your page to save — and your page can refuse any change before it happens.

A landing page under review

Three people reviewing a launch page. Press Comment (or Ctrl + Alt + M), then click anything; type @ to mention someone. The list beside it filters by open, resolved, yours and mentioning you.

New this spring Meet Aurora Smart lighting that learns your day.

Starter£9a month, one room

Home£29a month, every room

BusinessTalk to usfor offices and shops

“We forgot the light switches were there.” — a family in Leeds

Prices include VAT. Cancel any time. Lights sold separately.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-review-layer id="rl-launch" panel style="inline-size: 100%">
  <div class="rl-page">
    <div class="rl-hero" data-review-anchor="hero">
      <span class="rl-kicker">New this spring</span>
      <strong class="rl-title">Meet Aurora</strong>
      <span>Smart lighting that learns your day.</span>
    </div>
    <div class="rl-plans">
      <article class="rl-plan" data-review-anchor="plan-starter"><strong>Starter</strong><span class="rl-price">£9</span><span>a month, one room</span></article>
      <article class="rl-plan is-featured" data-review-anchor="plan-home"><strong>Home</strong><span class="rl-price">£29</span><span>a month, every room</span></article>
      <article class="rl-plan" data-review-anchor="plan-business"><strong>Business</strong><span class="rl-price">Talk to us</span><span>for offices and shops</span></article>
    </div>
    <blockquote class="rl-quote" data-review-anchor="quote">&ldquo;We forgot the light switches were there.&rdquo; &mdash; a family in Leeds</blockquote>
    <p class="rl-legal" id="rl-legal">Prices include VAT. Cancel any time. Lights sold separately.</p>
  </div>
</bmx-review-layer>

Pins that follow the content

A sales dashboard with a chart, under review. Make the dashboard narrower: the tiles wrap and the chart redraws, and every pin stays on the tile or the chart it was left on.

Full width

Narrow

Revenue£184,200+12% on September

Orders2,941+4%

Returns3.1%-0.4 points

Average basket£62.63+£3.10

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-review-layer id="rl-dash" style="inline-size: 100%; max-inline-size: 100%">
  <div class="rl-dash" id="rl-dash-box">
    <div class="rl-tiles">
      <div class="rl-tile" data-review-anchor="revenue"><span>Revenue</span><strong>£184,200</strong><em>+12% on September</em></div>
      <div class="rl-tile" data-review-anchor="orders"><span>Orders</span><strong>2,941</strong><em>+4%</em></div>
      <div class="rl-tile" data-review-anchor="returns"><span>Returns</span><strong>3.1%</strong><em>-0.4 points</em></div>
      <div class="rl-tile" data-review-anchor="basket"><span>Average basket</span><strong>£62.63</strong><em>+£3.10</em></div>
    </div>
    <bmx-chart id="rl-chart" type="column" label="Revenue by week" format="currency:GBP" data-review-anchor="chart" style="inline-size: 100%; --bmx-chart-height: 14rem"></bmx-chart>
  </div>
</bmx-review-layer>

Sign-off, with your rules

A contract summary going to a client. Switch person: everyone may comment, but your page refuses to let anyone but the account lead resolve a thread, and once the lead signs off the review is read only. The lead is also a moderator, who can edit or delete anyone's comment.

Reviewing as

Sign off

Services agreement - summary

Term: Twelve months from 1 November 2026, renewing yearly.
Fees: £4,800 a month, invoiced monthly in advance.
Service levels: 99.9% a month; credits of 5% for each tenth below.
Notice: Ninety days, in writing, before renewal.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-review-layer id="rl-contract" panel style="inline-size: 100%">
  <div class="rl-contract">
    <h3>Services agreement - summary</h3>
    <dl>
      <dt>Term</dt><dd id="rl-term">Twelve months from 1 November 2026, renewing yearly.</dd>
      <dt>Fees</dt><dd id="rl-fees">£4,800 a month, invoiced monthly in advance.</dd>
      <dt>Service levels</dt><dd id="rl-sla">99.9% a month; credits of 5% for each tenth below.</dd>
      <dt>Notice</dt><dd id="rl-notice">Ninety days, in writing, before renewal.</dd>
    </dl>
  </div>
</bmx-review-layer>

Threads in, JSON out

Your page keeps the threads, wherever it keeps its own data. Load another reviewer's threads to merge them in, then export everything as JSON; mentions tell your page whom to notify.

Merge in Bo's review

Export as JSON

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-review-layer id="rl-form" style="inline-size: 100%">
  <form class="rl-signup" id="rl-signup">
    <h3>Create your account</h3>
    <label>Work email <input type="email" id="rl-email" placeholder="you@company.com" /></label>
    <label>Password <input type="password" id="rl-pass" /></label>
    <p class="rl-hint" id="rl-pass-hint">At least 12 characters, with a number.</p>
    <span class="rl-cta" id="rl-cta">Start free trial</span>
  </form>
</bmx-review-layer>