---
title: "Code Lens"
description: "Code Lens shows which code in the Active Project renders a part of the screen. Select an area and each component Bigshot finds gets a label with its file and line. Click a label to open that line in your editor."
url: https://www.bigshot.pics/docs/code-lens
---
# Code Lens

Code Lens shows which code in the Active Project renders a part of the
screen. Select an area and each component Bigshot finds gets a label with
its file and line. Click a label to open that line in your editor.

## What it needs

- A Licence.
- A [Project](https://www.bigshot.pics/docs/projects) whose folder holds the source of the app on
  screen, set as the Active Project.
- The Project's Code map turned on. Project setup offers it as **Map the
  code for Code Lens**; later, turn on **Match screenshots to code** in the
  Project's Code map card in Settings › Projects.

## It only knows your own code

Code Lens matches what is on screen against the Code map, and the Code map
is built from the source files in your Project's folder. It can only point
at code Bigshot has indexed.

- It works on apps you have the source for: your web app in a browser,
  your Mac app, your iPhone app in the Simulator, your script in a
  terminal.
- It cannot show the source of someone else's website or app, or of
  anything whose code is not in the Active Project. There is nothing to
  match against, so it says **Nothing here matches** rather than guess.
- With more than one Project, switch to the Project for the app on screen
  first. Code Lens only searches the Active Project.

## Using Code Lens

1. Press **⌃⌥L**, press **L** with the pointer on the island, or click
   **Lens** in the island's stack.
2. Drag over the part of the screen you want to look up.
3. Bigshot reads the text in that area and matches it to the Code map.
   Each component it finds gets a label with its file and line, and the
   text it matched is outlined in the same colour.

Click a label to open the file at that line in your editor. Esc, a click
elsewhere, a scroll or switching apps closes it.

## The result card

A card under the selection sums up the match:

- **Components**: how many components were confirmed, each with a label
  on screen.
- **Likely**: with the image model installed, up to three more components
  that look like the area and render, or are rendered by, a confirmed one.
- **% of the text**: how much of the text read in the area was found in
  the code.
- **Page**: the route and file of the page the area belongs to, or
  **Shared, on N pages** when the components appear on several.

**Copy for Agent** puts the matches, with their files and lines, on the
clipboard as Markdown, ready to paste into Claude Code or Codex.

## Text kept somewhere else

Text often lives in one file and is shown by another: a translation file,
a JSON or YAML data file, a content file, a string table or a helper. A
label opens the code that puts the text on screen, such as the component
that calls `t("checkout.title")`, not the line in the translation file.

Right-click a label for **Open Text in…**, which opens the file and line
where the text is kept. Hover a label to see both places.

## When nothing matches

**Nothing here matches** followed by the Project's name means no line of
text in the area was found in the code. Common reasons:

- The app on screen is not this Project's code, or the Active Project is a
  different one.
- The Code map is still being built, or is off for this Project.
- The text comes from a database, an API or a user, not from the source.
- The area has no text. Install the image model (below) to match icons,
  images and charts.

## What the Code map reads

The Code map reads most source languages, templates, layouts and text
resources, including:

- TypeScript and JavaScript (JSX and TSX), Vue, Svelte and Astro
- Swift (SwiftUI and AppKit), storyboards and XIBs, Kotlin, Java, Dart,
  C#, XAML, Go, Rust, Ruby, PHP, Python, Elixir, C and C++, and shell
  scripts
- HTML and server templates such as ERB, Blade, Jinja, Twig, Handlebars,
  Liquid and Razor
- Markdown and MDX
- Translation and data files: JSON, YAML, TOML, `.po`, `.strings`,
  `.xcstrings`, ARB, `.resx`, XLIFF and Android string resources

It skips dependencies, build output and generated files, such as
`node_modules/`, `dist/`, `build/`, `Pods/`, `DerivedData/`, minified
files and lock files, and Markdown at the root of the repo (README, plans,
agent instructions), which quotes UI text but never renders it.

## Keeping the map current

The Code map is built on this Mac, in the background, when you turn it on.
It is a snapshot of the code at that time. After larger changes, click
**Index Again** in the Project's Code map card. When an update to Bigshot
changes how maps are built, older maps are built again in the background
after launch, and Code Lens answers from the old map until the new one is in.

**Test…** in the same card picks one of the Project's screenshots and
shows which components the map finds in it.

## Matching on looks

Code Lens matches on text out of the box. With the optional image model it
also matches on what things look like, so it finds icons, images and charts.
The model runs on this Mac. It is a 390 MB download, about 630 MB on disk
once prepared, and **Remove** in Settings › General deletes it. A Code map
built without it is indexed again when it is installed. See
[Settings](https://www.bigshot.pics/docs/settings#code-map).

## Choosing the editor

Labels open in the editor set under **Code editor** in Settings › General:
Cursor, VS Code, Zed, Xcode, or the default app for the file. It starts as
the first one installed.

## Privacy

The Code map, the text recognition and the image model run on this Mac.
Screenshots and code are never uploaded. The area you select is read in
memory and discarded; nothing is saved.