Search Preview Pane
A master detail search view with a hit list beside a live preview pane that shows the selected result body with every query match highlighted.
A master detail search view with a hit list beside a live preview pane that shows the selected result body with every query match highlighted.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Search Preview Pane is a master detail search result view: the hit list runs down the left with each result title, snippet, location, and match count, and a preview pane on the right shows the selected result body in full. Every query term is marked in both columns, so a search for payment retry lights up in titles, snippets, and the preview text alike. A header bar echoes the query and the result count, and the preview carries the result location, its update date, and an Open action.
Selecting a hit swaps the preview in place through a single selectedId piece of state, so users can scan several results without leaving the search. A small Highlighted component splits each string on the query pattern and wraps the odd segments in a mark, keeping the highlighting in sync with the term without any dangerous HTML.
Reach for this block behind a workspace search where the answer often lives inside a document rather than at its title, wired to your search index for the hits and to the document store for each preview body. Previewing in place lets users confirm relevance before opening the full page.
A natural flow around it on an Application Pro page:
Before
After
One strong use is workspace search across docs and tasks. Other master detail result views:
Tip: highlight inside the preview body, not just the title; a marked term in the surrounding sentence is what proves the match before a user commits to opening it.