Skip to content
Cratis Cratis Cratis

Lens (browser extension)

Tools

Your Arc app, inspectable in the browser

You’re testing an Arc app in the browser and you want to fire a command with a specific payload, or check what a query returns for a different tenant — without writing a throwaway page. Lens is a browser extension that does exactly that: it detects the running Arc app in your current tab, lets you browse its commands and queries by namespace, run them with a structured form, and switch the active user and tenant on the fly.

What it does

Section titled “What it does”

Lens opens as a popup with four tabs. When the current tab is a running Arc application, it detects it automatically and lights up the command and query browsers.

Commands

Browse the app’s commands by namespace and execute them with a schema-driven form; see the formatted result or validation errors.

 Queries

Browse queries by namespace and perform them, with results shown in a data table — no scratch UI needed.

 Context

Choose the active user and tenant for this browser profile; Lens applies them as request headers when it calls the app.

 Settings

Manage users and tenants by hand, or sync them straight from the connected Arc app, and set the tenant header name.

Under the hood it’s a Manifest V3 extension built with React, Vite, and PrimeReact — the same UI stack as Components — and it talks to the Arc backend’s introspection endpoints to discover the command and query catalog.

Install it (side-load)

Section titled “Install it (side-load)”

Until Lens reaches the stores, build it from source and load it unpacked. The source is at github.com/Cratis/Lens.

  1. Clone the repo, then from the Source folder install and build:

    Terminal window
    cd Source
    yarn
    yarn build

    This produces Source/dist/ (including manifest.json).

  2. Open chrome://extensions, enable Developer mode, choose Load unpacked, and select the Source/dist folder. Lens appears as Lens – Cratis Developer Tools.

  3. Navigate to your running Arc app, open the Lens popup once so it detects the app, then open its settings, confirm the Tenant Header Name, and save.

For an active edit loop, run yarn dev to rebuild on change, and reload the extension from chrome://extensions after each rebuild.

Where to go next

Section titled “Where to go next”
Queries in Arc

What Lens is browsing — how Arc exposes queries and observable queries over your read models.

 VS Code extension (Narrator)

The editor-side companion — explore the Chronicle event store from VS Code.