Fruitback
Sign in Create a workspace

Open source · Cloud or self-hosted

Leave a note on the page. Find it in your tracker.

Your clients point. Your team fixes.

Create a workspace Host it yourself

The Cloud is free during the beta and runs in Europe. On a public site, visitors leave a note with no account.

staging.acme.dev/blends
  • Lands in
  • Linear
  • GitHub Issues
  • Your own endpoint
  • Your workspace

"The blue button, top right, on the other page." Never again.

Without

  • Screenshots in a chat thread, annotated in red
  • A list of remarks in an email, with no page or screen size
  • Someone copies each one into the tracker, by hand
  • The client asks again what has been fixed

With Fruitback

  • The note is pinned on the exact element, on the live page
  • Page, screen size and selector come with it, and the component when the build exposes it
  • It lands in Linear or GitHub Issues, or stays in your workspace
  • The pin takes the colour of the issue's status

How it works

Three moves. Nobody leaves the page.

  1. The Add button under the pointer, outlined in red with its selector and its component, while a bar at the bottom says Point at an element.

    1

    Point at the element

    Hover the page, or use the arrow keys and Enter. No need to describe where the problem is.

  2. The note typed in the box that opens under the element: The price should say per month, a name, and Send.

    2

    Write a note, send it

    It becomes an issue with what a developer needs, and a picture of the element when the site turns that on.

  3. The pin on the button, in the colour of In progress, and its thread open with a reply from the team.

    3

    Follow it up on the page

    Each pin takes the colour of its issue's status. Replies from your team show under the note.

  • NewJust sent
  • To doAccepted by the team
  • In progressBeing fixed
  • DoneFixed, ready to check
  • ClosedNot kept

The five stages and their colours. Each site can rename its statuses, recolour them, or add its own on top of these stages.

Product

Small on the page. Precise in the ticket.

The Fruitback popup under the browser toolbar on staging.acme.dev: on, notes go to Linear, Leave feedback, 2 fixes to check, 3 open notes, and Show all notes in a sidebar.

The full context, automatically

Page, screen size and CSS selector come with every note. The React component and its source file come too, when the build exposes them.

Pins that follow the ticket

Come back to the page and see what is new, in progress or done, right where it was reported.

Every note in a list

The notes of the page, filtered by stage. The extension's side panel shows the whole site, with the team's replies.

Guests and roles

Invite a client to the sites you choose. They sign in with an emailed link, comment and follow up, and never see your tracker.

Fits the host site

The site can set the colours. Light and dark follow the visitor's system, and the words their browser: English and French included.

Built for the people who review websites

Agencies and freelancers

Client review without the email back and forth

Send your client the staging link. They point at what to change, you get clean issues, they see what is done.

  • Clients invited to their own sites only
  • One workspace for all your client sites
  • Works even when you cannot add a script

Setup for this case

Install
Script on staging, or the extension
Who sees notes
Your team and invited guests
Destination
One per site
Product teams

QA on your own staging

Designers, PMs and QA review the staging site and file bugs where they see them.

  • Signed-in members, no anonymous notes
  • The reporter is verified, not typed
  • Status visible to the whole team on the page

Setup for this case

Install
Script, dormant for visitors
Who sees notes
Workspace members
Destination
Linear or GitHub Issues
Public sites

A "report a problem" button that means something

Let visitors flag a broken element on your live site, with the context your developers need to fix it.

  • Visitors stay anonymous, or type a name
  • Rate limited, so one caller cannot flood your tracker
  • Pins can stay hidden from visitors

Setup for this case

Install
Script on production
Who sees notes
Every visitor, or only your team
Destination
Any, or your workspace

The three modes behind these cases

Connectors

Your tracker stays the source of truth

Connect a tracker once for the whole workspace. Each site picks where its notes go. The status of a Linear or GitHub issue is read back each time the page loads.

  • LinearIssues in the team you pick
  • GitHub IssuesIssues in a repository, through a GitHub App
  • Your own endpointEach note posted to your HTTPS address, signed
  • Your workspaceNo tracker: notes kept in its PostgreSQL

Jira, GitLab, Trello and Notion are not available yet.

Statuses, set per site

Every tracker names its states its own way. Each one lands on one of five stages, and a site can rename, recolour or re-stage them. Linear, by default:

  • TriageNew
  • TodoTo do
  • In ProgressIn progress
  • DoneDone
  • CanceledClosed

Or your own endpoint

Fruitback posts each note as signed JSON, and keeps it too: your team sets its status in Fruitback.

POST https://hooks.acme.dev/fruitback
X-Fruitback-Signature: sha256=…
{
  "version": 2,
  "event": "note.created",
  "site": { "id": "site_81c2…", "origin": "https://staging.acme.dev" },
  "identifier": "FB-12",
  "note": {
    "text": "Hard to see until you hover it.",
    "page": { "url": "https://staging.acme.dev/blends" },
    "anchor": { "selector": "div.card:nth-child(2) > button.add" },
    "source": {
      "component": "AddToCart",
      "file": "src/components/Card.tsx",
      "line": 42
    },
    "viewport": { "width": 1440, "height": 900 },
    "reporter": { "name": "Camille" }
  }
}

The whole contract

Pricing

Same product. You choose who runs it.

Cloud

Quickest

We run the server in Europe. You sign in, connect your tracker and add a site.

Free during the beta

Create a workspace
  • Linear, GitHub Issues and your own endpoint
  • Sign-in with email, Google or GitHub
  • Client guests, invited to the sites you choose
  • Updates included

Self-hosted

Open source

One compose file on your server: the worker, its PostgreSQL and the console.

Free MIT and AGPL-3.0

Read the install guide
  • Every connector, with your own keys
  • Notes in your own PostgreSQL, or in your tracker
  • Same console, same extension
  • Images for amd64 and arm64

Self-hosted, in three commands

$ curl -fsSLO https://raw.githubusercontent.com/sakuga-software/fruitback/main/docker-compose.yml
$ curl -fsSL https://raw.githubusercontent.com/sakuga-software/fruitback/main/.env.example -o .env
$ docker compose up -d --wait

Fill the five lines .env names before the last one. The images are not public on ghcr.io yet: log in with a token to pull them, as the install guide shows.

Your clients' sites, treated with care

Isolated from the page

The widget lives in its own shadow root. It does not restyle the site, and the site's styles stay out.

Clear about data

Notes land in your tracker or stay in your workspace. Tracker keys are stored encrypted, and the Cloud runs in Europe. Every field, listed.

Accessible

Usable with the keyboard alone, and checked with axe in light and dark.

Open source

Read every line on GitHub. The widget is MIT; the server, the console and the extension are AGPL-3.0.

Questions

Do my clients need an account?

Not on a public site: a visitor leaves a note with no account, and can add a name. On a site only your team reads, invite the client as a guest: they sign in with a link sent by email.

What if I cannot add a script to the client's site?

Use the browser extension, for Chrome and Firefox. It adds Fruitback for the people who switch it on, and nothing changes on the site. It is in beta, on the Chrome Web Store for Chrome and Edge, and on addons.mozilla.org for Firefox. In another browser you load it by hand, as the reviewer's guide shows.

Which trackers are supported?

Linear and GitHub Issues, plus any HTTPS endpoint of yours. A site with no tracker keeps its notes in the workspace. Jira, GitLab, Trello and Notion are not available yet.

Where is my data stored?

In your tracker, or in the PostgreSQL of the instance: in Europe for the Cloud, on your server when you host it. Tracker keys are stored encrypted. What the widget collects lists every field.

Does it slow the site down?

The script loads with defer, after the page is parsed, and draws in its own shadow root. The build fails if it grows past 150 kB gzipped.

The guides

   
Choose a mode Public, private and team: what the site ships in each, and who may read the pins. Start here.
Install the widget Two lines on a site with no build step, and what each option does.
Run Fruitback yourself From an empty folder to a first pin, then backups, upgrades and every environment variable.
Review with the extension The reviewer’s side: the browser extension, a rule per site, and pairing.
Translate the widget The words a host can replace, and the catalogs the bundle carries.
REST connector The request the Cloud posts for each note, its signature, and what happens when you do not answer.
Connect an AI agent Claude Code or a cloud agent reads, replies and sets a status with a key, and what it cannot stop.
What the widget collects Every field a note carries, where it goes, how long it stays, and how to delete it.
Architecture What the parts are, and the designs that were dropped.

The code

The source is on GitHub, under the MIT licence for the five published packages and AGPL-3.0-only for the worker, the console and the browser extension. The decisions folder holds the per-ticket histories: the measurements, the first versions that failed, and the reviews that caught them.

Get the first note on your staging site this afternoon

Create a workspace Host it yourself