UXML Preview renders a .uxml document in a VS Code webview. The extension reads and watches files; the uxml-preview core parses UXML and USS, lays it out with Yoga, and paints the result.
It draws five control types: VisualElement, Label, Button, Image, and ScrollView. Other controls become plain fallback boxes. Template and Instance are not rendered.
This is a viewer. It does not edit files, validate USS, reproduce every UI Toolkit control, or put diagnostics in VS Code's Problems panel.
| Command | Where it opens | Shortcut |
|---|---|---|
UXML Preview: Open Preview | Current editor column | Command Palette |
UXML Preview: Open Preview to the Side | Beside the source document | Ctrl+Shift+VCmd+Shift+V on macOS |
| Setting | Default | Meaning |
|---|---|---|
uxmlPreview.canvas.width | 1920 | Fixed root width in pixels. |
uxmlPreview.canvas.height | 1080 | Fixed root height in pixels. |
uxmlPreview.canvas.fitToPanel | false | Use the preview area's current size instead of the fixed size. |
uxmlPreview.projectRoot | empty | Unity project root for project paths and GUID references. Empty uses the workspace folder containing the file. |
uxmlPreview.states | {} | Pseudo-class states keyed by USS selector. This version has no selector input UI. |
The fixed 1920 by 1080 canvas is deliberate. A layout with 3 pixels of slack can flip after a 4-pixel size difference. A fixed root gives different readers the same layout input.
Install UXML Preview from the Visual Studio Marketplace inside VS Code, then open a UXML document. No Unity Editor process is required for the preview.
In VS Code 1.90 or later, open the Extensions view with Ctrl+Shift+X, or Cmd+Shift+X on macOS.
Search for UXML Preview for Unity UI Toolkit in the Visual Studio Marketplace.
Select the extension published by reuhomi and choose Install.
Open a .uxml file and press Ctrl+Shift+V, or Cmd+Shift+V on macOS. A preview opens beside the editor.
If the panel shows a canvas and a diagnostics summary, the extension, webview, and renderer have all started.
The controls are simple. These four ideas explain why the picture may differ from Unity and what the viewer is telling you.
| Role | An unsupported control becomes a plain box and produces an unsupported-control diagnostic. |
| Metaphor | A stage stand-in marks where the missing actor belongs. The metaphor stops at behavior: the box does not recreate the original control. |
| Watch | A zero-height fallback still receives an outline marker; overlapping markers at the same position share a count. |
| Role | A: Fixable covers file, path, setting, and malformed-input work. B: Waiting for support covers unsupported renderer features. C: Renderer differences from Unity covers version-dependent and known differences. |
| Metaphor | A triage desk sends each item to the person who can act. It is not a severity scale: C is not automatically worse than A. |
| Watch | Core text and host context can share one item. The header counts issues, not the number of displayed lines. |
| Role | The root size is an input to layout. The current size is always shown in the control bar. |
| Metaphor | A fixed ruler lets two readers compare the same measurement. The metaphor stops when Fit to panel is on: the root is re-laid out, not zoomed. |
| Watch | Three pixels of spare room can become a different layout after a four-pixel size change. |
| Role | uxmlPreview.projectRoot anchors Unity project paths. Asset references commonly carry both a path and a GUID; a moved file keeps the GUID in its .meta. |
| Metaphor | An address book tries the street address, then the stable identity. The metaphor stops at stylesheets: GUID fallback is for assets, not USS imports. |
| Watch | The GUID index is built only after a path miss and is reused while the panel lives. Library/PackageCache is not searched. |
Read from the top and stop at the first row that matches.
.uss file.asset-unresolved.unsupported-control.The control bar can apply hover, active, focus, and disabled to every element. Check those boxes before deciding that Unity and the preview disagree.
.uxml file that references this stylesheet with <Style src>.uxmlPreview.projectRoot, the written path, and the GUID.<projectRoot>/Packages is searched. Library/PackageCache is outside the current lookup scope.Group C always exposes three renderer differences: browser versus Unity text metrics, wrapping-container height whose Unity rule is not identified, and main-axis percentages under an unsized parent where Yoga versions differ.