# Low-Code Viewer

> Low-Code Viewer, the Studio extension that renders coded C# workflows as a visual low-code canvas alongside the source code.

The Low-Code Viewer is a Studio extension that renders a coded workflow — a `.cs` file whose class derives from `CodedWorkflow` — as a visual, low-code workflow next to its source code, the way the classic RPA designer shows an automation.

It is aimed at developers who write coded workflows and want a clean, readable visual view of their automation without leaving the C# code.

:::note
The Low-Code Viewer is in Preview. It is distributed as a Visual Studio Code (VS Code) extension on the Open VSX marketplace and requires the latest Studio version. You can install it from the Extensions panel in Studio.
:::

![Coded workflow open in Studio with the Low-Code Viewer canvas and properties panel beside the code editor](https://dev-assets.cms.uipath.com/assets/images/studio/low-code-viewer-canvas-beside-code-7bb7a4d3.png)

## What the viewer does

The viewer provides two synchronized views of a coded workflow, keeps them in sync with the source code, and sources its activity palette from your project.

### Workflow view

A Studio-style tree that covers the whole file. Every method gets a section with its variables and a row per statement, with nested containers for `if`, `foreach`, `try`, and similar constructs.

![Low-Code Viewer Workflow view showing a coded workflow rendered as a tree of methods and statements](https://dev-assets.cms.uipath.com/assets/images/studio/low-code-viewer-workflow-view-10b34cd7.png)

### Graph view

A flow chart of the workflow's entry method — the method marked `[Workflow]`, or `Execute`. Conditions and switches become decision nodes that fan out per branch, loops get iterate and done edges, and calls to your own methods appear as single Invoke blocks. The graph mirrors the shape of your entry method.

![Low-Code Viewer Graph view showing the entry method as a flow chart with decision and Invoke nodes](https://dev-assets.cms.uipath.com/assets/images/studio/low-code-viewer-graph-view-8da318a9.png)

### Following the source both ways

Moving the cursor in the editor selects the matching block, and selecting a block jumps to its line. Property edits made in the panel are written back to the C# with minimal edits, so comments and formatting are preserved.

![Animation of selection following between the code editor and the canvas, with the properties panel showing the selected activity](https://dev-assets.cms.uipath.com/assets/images/studio/low-code-viewer-sync-c69f94ff.gif)

### The activity palette

When the viewer runs inside Studio, the set of activities — along with their property editors, display names, and icons — comes live from the packages your project references. In plain VS Code, without Studio, service calls still render as cards, but with generic labels and without rich property metadata.

## How the viewer reads your code

The canvas is built statement by statement. Each statement either maps to a dedicated block or falls back to a raw Code block. Consecutive unrecognized statements are merged into a single code block card, so a run of unsupported code collapses into one opaque box.

The viewer never rewrites code you did not touch: anything it does not recognize is shown verbatim in a Code block card and round-trips unchanged. Nothing you write is lost, but the more of your code that falls into code blocks, the less the canvas shows.

### Constructs rendered as blocks

| You write | You get |
| --- | --- |
| `system.GetAsset(...)`, `excel.ReadRange(...)`, other service calls | Activity card with icon, display name, editable properties, and typed output |
| `Log(...)`, `Delay(...)`, `throw ...` | Built-in activity cards (Log Message, Delay, Throw) |
| `var x = <expr>;`, `int x = 0;`, `x = <expr>;` | Assign card ("to variable" and "value") |
| `count++;`, `count += 5;` | Increment or Decrement card |
| `if` / `else if` / `else` | Branch container; decision diamond with true and false edges in the graph |
| `foreach`, `for`, `while`, `do ... while` | Loop container; loop node with an iterate back-edge in the graph |
| `try` / `catch` / `finally` | Try container with an error path |
| `switch` statement | Switch container with one Case arm per branch; in the graph, a decision with one labeled edge per case |
| `using (...) { }`, `lock (...) { }` | Scope frame |
| `return <expr>;`, `throw <expr>;` | Return row or Throw card; in the graph, both terminate the path |
| `MyHelper(...)` (method in the same file) | Invoke block; select it to open the helper |
| `Helpers.Method(...)` (class in another file) | Invoke block with cross-file navigation |
| `workflows.MyWorkflow(...)` | Invoke Workflow card with In and Out argument badges |
| `#region Name ... #endregion` | Named, collapsible group in both views |

### Constructs that fall back to a code block

| Construct | Why it limits the canvas |
| --- | --- |
| Lambdas at statement level (`rows.ForEach(r => ...)`) and logic inside lambdas | The lambda body is invisible to the canvas |
| Local functions (`void Helper() { ... }` inside a method) | The whole function body is swallowed into the code block |
| Declarations without an initializer (`string name;`) | Renders as one code block row |
| Multi-variable declarations (`int a = 1, b = 2;`) | Renders as one code block row |
| `using var x = ...;` (declaration form) | Renders as one code block row, and calls on `x` lose activity recognition |
| `arr[i] = value;`, `total *= 2;`, `msg += suffix;` | Renders as one code block row |

To keep as much of your workflow on the canvas as possible, see [Writing canvas-friendly coded workflows](https://docs.uipath.com/studio/standalone/latest/user-guide/writing-canvas-friendly-coded-workflows).

## Related content

* [Writing canvas-friendly coded workflows](https://docs.uipath.com/studio/standalone/latest/user-guide/writing-canvas-friendly-coded-workflows)
* [Coded automations introduction](https://docs.uipath.com/studio/standalone/latest/user-guide/coded-automations-introduction)
* [Best practices](https://docs.uipath.com/studio/standalone/latest/user-guide/coded-automations-best-practices)