---
title: "\"Code Lens X-ray: see the line of code behind each line on screen\""
description: "X-ray in Bigshot's Code Lens replaces the text under a loupe with the source line that shows it, and draws how the page's components, lists and translation files connect. How it works, what it gets wrong, and what it gives a coding agent."
url: https://www.bigshot.pics/blog/code-lens-xray
---
# "Code Lens X-ray: see the line of code behind each line on screen"
*2026-10-22*
[Code Lens](https://www.bigshot.pics/docs/code-lens) labels what you select on screen with the
component, file and line that renders it. Labels tell you where to go.
They don't show you the code, or how the parts of a page fit together.
X-ray does. After a lens, press **X** or click **X-ray** on the result
card. A round loupe follows the pointer, and inside it each line of text
is drawn as the line of code it comes from, with its line number, in the
same place on screen. Click inside the loupe to open that line in your
editor.
The video is six real runs, one app each, written in Python, Swift, zsh,
Go, Rust and Ruby. Nothing in it is mocked up.
## What the loupe shows
Each line of text under the loupe is replaced by its source line, aligned
so the words in the code sit on the words they draw. Text that no
component in your Project claims stays faint, so you can tell what Lens
matched and what it didn't. The component at the centre of the loupe is
named under its rim.
Text is often kept in one file and shown by another. A line whose words
are kept in a data list or a translation file draws the line they are
kept on, so five cards from one `.map(` read as five different lines, not
the same render line five times. A click still opens the line that
renders it, which is the line you usually want to edit.
## The page's structure
The loupe also draws how the code connects:
- The page, and each component that renders others, is a frame.
- Each group of text a component shows is a box, with the component's
name, file and line on its edge.
- Each item of a list is its own numbered box, such as `2 of 3`, with the
entry it shows, such as `plans[1]`.
- Arrows show what renders what and which data and translation files each
component reads, labelled with the code that does it, such as
``, `TOOLS.map(` or `t("title")`, and its line.
- Parts of the page that are off screen show as tabs on the frame's edge.
A **Map** beside the selection lists the same tree as text, and each row
opens its file at the line.
None of this is worked out when you press X. When Bigshot builds a
Project's Code map, it also works out each page's tree: the page, the
components it renders in render order, and the data and translation files
they read, with the line of each use. Pages, layouts and, in stacks
without routes, top-level views are the roots. The trees are stored in
the Project's index on your Mac, so X-ray opens as soon as the lens does.
## What it gets wrong
The first version of X-ray, in Bigshot 1.7.5, missed a whole class of
components. On a pricing page that does
`plans.map((plan) => )`, the card's text
arrives through props. The matcher credited the text to `plans.ts`, where
the words are kept, and the card never got a box. The same happened to
the site header and the FAQ. X-ray drew the page frame and some data
lines, and not much else.
Bigshot 1.7.6 follows the data. A page that only maps a list into a child
hands the list on: the child reads it, X-ray opens where the child prints
the field, and the page stops reading it. A child that only uses the
entry for an attribute, such as an icon's `d={path}`, doesn't take the
list from its parent.
Text that is assembled in code is still hard. In a Java Swing test app, a
row like `Bed B · Basil and mint` is `name + " · " + crop`, so no single
string in the code holds it. Lens now claims a short line made of several
whole strings from one record, joined by separators, and X-ray lights each
field. That took the app's misses from 10 to 3, but Lens still finds only
6 of its 19 lines, because Swing has little component structure to follow.
We left Java out of the video for that reason.
## For coding agents
**Copy for Agent** on the result card includes the part of the page's
tree that is on screen: the components in render order, and the files
they read, with lines. Paste it into Claude Code or Codex along with your
request, and the agent starts at the files that render what you selected
instead of searching the repo for the text.
## Trying it
X-ray is part of Code Lens in Bigshot 1.7.5 and later. It is in the free
version, with one Project. Turn on the Code map for a Project, select
part of the screen with Lens, and press **X**. The
[Code Lens docs](https://www.bigshot.pics/docs/code-lens) cover the rest, and
[the benchmarks post](https://www.bigshot.pics/blog/code-lens-benchmarks) covers how accurate the
matching under it is.