# Inspect results in the Design panel viewers

> Inspect Nodespell results in the Design panel: zoom, colour channels, pixel values, two-image comparison, preview resolution, text and fullscreen viewers.

Source: https://docs.nodespell.com/edit/viewers/ · Last updated: 2026-11-10

The Design panel viewers in Nodespell show the selected node's image, video or text so you can inspect it closely. Image and video viewers share the compositor viewer's tools: zoom and pan, channel isolation, display exposure, a colour readout and two-image comparison. Text has its own viewer with search, wrapping and Markdown.

## What does the Design panel show?

The Design panel follows your selection in the Graph. Open it from the panel menus, or right-click a node and choose **Open Design**.

| Selection                            | Viewer                                                                        |
| ------------------------------------ | ----------------------------------------------------------------------------- |
| An Image asset                       | Image viewer                                                                  |
| An image effect node                 | Image viewer with an **Input** / **Output** toggle                            |
| Any node with image or video outputs | Image or video viewer, with a tab for each output                             |
| A Video asset                        | Video viewer: the player plus channels, display adjustments, zoom and readout |
| A Text asset or text output          | Text viewer                                                                   |
| Two nodes that output images         | Image comparison                                                              |
| A compositor or a node inside one    | The compositor viewer, with timeline and colour controls                      |

Re-running a node or switching output tabs keeps your zoom, channel and adjustments.

## Zoom and pan

| Action         | How                                                                             |
| -------------- | ------------------------------------------------------------------------------- |
| Pan            | Scroll with two fingers on a trackpad, or drag with the middle mouse button     |
| Zoom           | Pinch on a trackpad, or hold `Cmd/Ctrl` and scroll; zoom centres on the pointer |
| Zoom in or out | `+` and `-`                                                                     |
| Fit            | `F` (in the video viewer, `0`)                                                  |
| Actual size    | `Shift+F` (in the video viewer, `1`)                                            |
| Zoom presets   | The zoom menu: **Fit**, **Actual size**, 25%, 50%, 75%, 150%, 200%, 400%        |

Fit never enlarges a picture past 100%. Shortcuts work when the viewer has focus; click the picture first.

### Keep framing between shots

The Design panel remembers your zoom and pan when you select another picture with the same aspect ratio, even at a different pixel size, so you can step through matching shots and look at the same detail. A picture with a different shape opens at Fit.

## Inspect channels, exposure and pixel values

- **Channels:** the channel menu shows **RGBA**, **RGB**, **Red**, **Green**, **Blue**, **Alpha**, **Luminance** or **Saturation**. Press `R`, `G`, `B` or `A` to view a single channel. Video has no alpha channel. The channel choice is shared by all viewers.
- **Display adjustments:** **Exposure**, **Gamma** and **Saturation** change only what you see. Drag a value, click to type, or double-click to reset.
- **Readout:** the strip under the picture shows the colour and position under the pointer. X and Y are in the picture's own pixels, with Y counted up from the bottom edge, as in a compositor. Readouts sample the unadjusted pixel.
- **Copy a colour:** right-click the picture and choose **Copy colour under cursor** as Hex, RGB, HSL or HSV.
- **Background:** right-click and choose **Viewer background**: **Black**, **White**, **Light checkerboard**, **Dark checkerboard** or **Custom…**. It shows behind transparent pixels and never affects exports.

On image effect nodes, press `I` or use **Input** / **Output** to flip between the node's input and its result.

## Change the preview resolution

For image effect nodes, **Preview resolution** in the viewer bar sets how detailed the live preview is: **Use preference** (your saved preview size), **1:1 · Full resolution**, or 1:2, 1:3, 1:4, 1:6 and 1:8. The choice applies to image-processing viewers until you refresh the app, and it does not change saved projects or rendered results. Use **1:1 · Full resolution** to check fine detail, such as noise or sharpening.

## Compare two images

1. Select two nodes that output images, such as an original and a graded version. The first one you select is A, the second is B.
2. The Design panel switches to a comparison. Choose a mode from the mode menu.
3. Press `X` or use **Swap A and B (X)** to swap the sides.

| Mode                             | Shows                                     |
| -------------------------------- | ----------------------------------------- |
| Horizontal swipe, Vertical swipe | A divider you drag across the picture     |
| Side by side, Stacked            | Both pictures next to or above each other |
| Flip                             | A and B in turn                           |
| Dissolve                         | A blend of the two                        |
| Difference                       | A heatmap of where they differ            |

Both pictures are fitted into one common frame without cropping, so pan, zoom and the readout line up. The readout shows both colours at the pointer and their largest channel difference. Channels and display adjustments apply to the comparison too.

To keep a comparison in the graph, use the **Compare Image**, **Compare Video** or **Compare Text** nodes, which show two connected inputs on the node with the same layouts.

## Read text outputs

| Control                   | What it does                                                     |
| ------------------------- | ---------------------------------------------------------------- |
| **Raw** / **Markdown**    | Shows text as written or rendered; `.md` files open as Markdown  |
| **Wrap** (`W`)            | Wraps long lines                                                 |
| **Lines** (`L`)           | Shows line numbers                                               |
| Text size (`-`, `+`, `0`) | 75% to 200%                                                      |
| **Find** (`Cmd/Ctrl+F`)   | Highlights matches; `Enter` and `Shift+Enter` step, `Esc` clears |
| **Copy all text**         | Copies everything, even when a long file is shortened            |

Wrap, line numbers and size are remembered between files. Very long text shows its first 50,000 lines, and Find stops counting at 5,000 matches.

## Open the fullscreen viewer

Select a node and press `Space`, or right-click it and choose **View Full Screen**. The fullscreen viewer shows the node's takes with **Compare (C)**, **Grid View (G)**, **Toggle info (I)** and **Close (Esc)**. EXR images get **Tone mapping** and **Exposure** controls for display. Its tools include **Crop**, which adds a Crop node when you apply. See [Takes](https://docs.nodespell.com/graph/takes/) for choosing results.

3D model results open in a fullscreen 3D viewer with **Reset Camera (H)**, material presets, **Download Model** and **Save Render**.

## Frequently asked questions

### Does viewer exposure change my image?

No. Exposure, gamma, saturation and channel views are display-only. Readouts and results use the real pixel values.

### Why does my image look soft in the viewer?

The preview may be running below full resolution. Set **Preview resolution** to **1:1 · Full resolution**, or zoom to **Actual size**.

### How do I pan without a middle mouse button?

Scroll with two fingers on a trackpad. Pinch or `Cmd/Ctrl`+scroll zooms.

### Why is Y measured from the bottom?

Nodespell follows compositing convention, where the origin is the bottom-left corner, so readouts match compositor coordinates.

## Related

- [Takes](https://docs.nodespell.com/graph/takes/): browse and choose results.
- [Color management](https://docs.nodespell.com/edit/color-management/): the compositor viewer's display and view.
- [Compositing](https://docs.nodespell.com/edit/compositing/): what the compositor viewer shows.
- [Transforms and crop](https://docs.nodespell.com/edit/transforms-and-crop/): on-image crop handles.
- [Panels](https://docs.nodespell.com/reference/panels/): every panel in the workspace.