← All posts

Windows on the frontend

Search in the code editors — find anything in long rules

17 May 2026 · by JustZix Team

A CSS rule can grow to hundreds of lines. So can a JS snippet. Scrolling to find that one selector you need to tweak gets old fast. JustZix now puts a real search bar above every code editor — counter, highlighting, navigation arrows and keyboard shortcuts. Here's how it works.

Where the search bar appears

The search bar sits directly above the CodeMirror editor in three places:

• the CSS editor in a rule;
• the JS editor in a rule;
• the JS code editor for actions.

It's the same component everywhere, so once you learn it in one place you know it in all of them.

The basics: input and counter

The bar is a text input plus a search-icon button. Type a query and JustZix finds every occurrence in the current editor. A match counter shows your position as n / total — for example 3 / 12 means you're on the third of twelve matches. If there's nothing to find, the counter tells you that too.

Highlighting: active vs. the rest

Every match is highlighted so you can see the spread at a glance, and the two states are deliberately different:

The active match is also scrolled into view automatically — you never have to hunt for where you are. Move to the next match and the yellow highlight jumps with you, while the previous one drops back to blue.

Navigating between matches

When a search turns up more than one result, ▲ and ▼ arrows appear in the bar. Click ▼ for the next match, ▲ for the previous. The counter updates, the yellow highlight moves, the editor scrolls. With a single match the arrows aren't needed and stay out of your way.

Keyboard: the essentials

You rarely need the mouse. From inside the search field:

One detail worth knowing: Enter normally jumps to the next existing match — but if you changed the query text since the last search, Enter re-searches from scratch. So you can edit your query and just press Enter; you don't have to clear and retype.

Global shortcuts — search without leaving the editor

The most useful shortcuts work from inside the code editor, not just the search field:

The Ctrl+Alt+←/→ pair works both from the search field and from the code editor itself. That means you can run a search, click back into the code to edit, and still step through matches without taking your hands off the keyboard.

A typical workflow

1. You're editing a long CSS rule. Press Ctrl+Alt+F — focus jumps to the search field.
2. Type margin. The counter shows 1 / 8; eight matches glow blue, the first glows yellow and scrolls into view.
3. Press Enter a few times to step through, or Shift+Enter to back up.
4. Found the one you want. Click into the code, edit it.
5. Need the next one? Ctrl+Alt+→ — no need to return to the search field.
6. Done — Esc clears the field.

Editing invalidates the results — by design

Once you edit the code, the highlighted results no longer reflect the current text — so they're invalidated and you re-search. This is intentional: stale highlights pointing at moved or deleted text would be worse than no highlights. Just press Enter in the search field (or Ctrl+Alt+F then Enter) to run a fresh search against the updated code.

Why it matters for big rules

A universal rule that hides cookie banners, fixes layouts and patches a dozen sites can be long. In-editor search turns "scroll and squint" into "type and jump". It's a small feature you'll use constantly.

See also

• What's new in JustZix — code search alongside AI Helper and the rebuilt Output Console.
• All JustZix features — the full list of developer windows and editors.

Download JustZix — free, no account, Chrome 100+. Search bars above every code editor, ready to use.