TIA Viewer and web generator

Graphical viewer for Siemens TIA Portal PLC exports — renders LAD/FBD networks, SCL/STL sources, GRAPH sequential function charts, data blocks, PLC data types and tag tables as readable HTML directly inside VS Code or as standalone HTML files. TIA software web preview generator for rewiew software in the web browser.

Designed to cooperate with the TIA Portal Import extension, which produces the export folder structure this viewer understands (Program blocks, PLC data types, PLC tags) — but any TIA Portal XML/SD export dropped into your workspace works.

💡 Tip: Install the companion TIA Portal Import extension to connect VS Code directly to TIA Portal: export blocks, tag tables and UDTs straight into your workspace (TiaExport/...), then view them here with one right-click — no manual exporting, no intermediate tools. The two extensions are built to work together.

If this extension helps your TIA Portal workflow, you can support ongoing development with a voluntary PayPal donation.

Key Features

Built-in LAD / FBD / SCL / GRAPH viewer

HTML Previews (standalone files)

Requirements

No TIA Portal required. The viewer reads export files from disk only. Use the TIA Portal Import extension (or TIA Portal's built-in export) to produce the files.

Installation

1. Install the extension from VS Code Marketplace (or code --install-extension MariuszCzyrnek.tia-viewer)
2. Recommended: install the companion TIA Portal Import extension (code --install-extension MariuszCzyrnek.tia-import) to export PLC programs directly from TIA Portal into your workspace
3. Open a workspace containing TIA Portal exports (e.g. a TiaExport/Projects/... tree created by TIA Portal Import)
4. Right-click a block file or PLC folder in the Explorer and pick a preview command

Usage

Previewing a block (interactive webview)

1. In VS Code Explorer, right-click a SimaticML XML block, a .s7dcl source document (the matching .s7res is picked up automatically), or a .scl / .db / .udt source.
2. Choose Graphical preview LAD/FBD.

The viewer renders the block interface (resizable, collapsible columns), LAD rungs, FBD networks, syntax-highlighted SCL/STL and GRAPH sequence flowcharts — all following the active VS Code theme. Networks and the interface panel are collapsible (including Expand all / Collapse all), operand labels and call-box pins show comments as tooltips, and Ctrl+wheel zoom / pan / fit-width are available in the toolbar. In a GRAPH flowchart, clicking a transition opens a popup with its LAD/FBD logic network, clicking a step opens its action table, and hovering a step or a transition shows its comment.

Right-click inside the preview for Open block (on a call box) and Go to Source Line (on networks and parts).

Generating a standalone HTML preview file

1. Right-click one or more block sources (.xml / .s7dcl / .db / .scl / .udt).
2. Choose Generate HTML preview file.
3. The preview is written as <source-file>.preview.html next to the source; the notification offers an Open File button.

Generating a whole-PLC web preview

1. In VS Code Explorer, right-click the PLC folder (the one containing Program blocks / PLC data types / PLC tags).
2. Choose Generate Web Preview and pick the output folder in the dialog.
3. Open the generated index.html in a browser (the notification offers an Open Preview button).

Every block source under Program blocks and PLC data types is rendered into a mirror folder tree of standalone previews (with clickable cross-block navigation links), and every tag table under PLC tags gets a table page sorted by PLC address. The index.html navigator provides a collapsible sidebar tree mirroring the TIA folder structure, a block filter, expand/collapse all, a split view for comparing two blocks side by side and a dark/light theme toggle. The viewer CSS/JS is written once to _assets/ and shared by all pages, so the output stays compact even for large PLCs.

Supported input formats

Expected folder layout

The viewer works on any single file, but unlocks its full power (UDT expansion, tag tooltips, Open block navigation) when the exports follow the structure produced by TIA Portal Import:

<PLC folder>/
├── Program blocks/       # OB / FB / FC / DB exports
├── PLC data types/       # UDT exports
└── PLC tags/             # tag tables (.xlsx / .xml)

Sibling folders are located by walking up to 6 parent directories from the viewed file.

Commands

Architecture

┌─────────────────────────────────────────────────────────────┐
│                       VS Code Extension                     │
│                                                             │
│  Commands (preview / web preview / navigation)              │
│       │                                                     │
│  Services Layer: plcLogicViewer (webview panel)             │
│                  htmlPreview (standalone files, block links)│
│                  viewerBridge ── electron-edge-js ──┐       │
└─────────────────────────────────────────────────────┼───────┘
┌─────────────────────────────────────────────────────▼───────┐
│              TiaViewer .NET Library (C#, net48)             │
│                                                             │
│  Parsing/   SimaticML XML · S7 .s7dcl+.s7res · SCL · .db    │
│  Layout/    FBD · LAD network layout engines                │
│  Rendering/ BlockRenderer · StandaloneHtml · GraphSvg ·     │
│             SCL/STL highlighters · TagTableHtml · PlcIndex  │
│                                                             │
│  Entry point: TiaViewer.ViewerConnector.Invoke              │
│  Routes: Ping · ParseBlock · RenderBlock ·                  │
│          RenderStandaloneHtml · RenderPlcIndex ·            │
│          RenderTagTable · GetViewerAssets                   │
└─────────────────────────────────────────────────────────────┘

The viewer is implemented as a standalone .NET library, dotnet/TiaViewer/ (TiaViewer.dll), with no TIA Portal / Siemens dependencies and no NuGet packages. It dual-targets .NET Framework 4.8 (loaded in-process by the extension through edge-js) and .NET Standard 2.0 (for reuse in modern .NET applications).

The library parses SimaticML XML and S7 .s7dcl + .s7res sources into a shared block model (TiaViewer.Parsing), computes FBD/LAD network layouts (TiaViewer.Layout) and GRAPH sequence flowcharts (TiaViewer.Rendering.GraphSvgRenderer), and renders them to SVG/HTML strings (TiaViewer.Rendering), including complete standalone HTML documents with embedded styles and interactivity scripts.

Reusing the library in other add-ons:

• From Node.js / another VS Code extension — load TiaViewer.dll (net48 build) via edge-js and call TiaViewer.ViewerConnector.Invoke with one of the string-keyed routes:
  • ParseBlock — { fileName, text, siblings? } → the parsed block document (JSON),
  • RenderBlock — same + optional nonce → complete HTML document (nonce attributes emitted on <style>/<script> for CSP hosts),
  • RenderStandaloneHtml — same → standalone HTML document, no nonce; optional cssHref/jsHref link external viewer assets instead of embedding them,
  • RenderPlcIndex — { plcName, sourceDisplay?, previews[] } → navigator index.html / index.css / index.js for a whole-PLC web preview,
  • RenderTagTable — { filePath, fileName?, cssHref? } → standalone preview of a PLC tags export (.xlsx / SimaticML .xml),
  • GetViewerAssets — {} → the shared viewer CSS/JS bundle for external-asset previews.
• From a .NET application — reference the netstandard2.0 build and call the API directly: BlockSources.Parse(...) for parsing, BlockRenderer.RenderBlockContentHtml(...) for body markup, StandaloneHtml for a full document.

Documentation

• THIRD_PARTY_NOTICES.md — third-party components and redistribution notes
• CHANGELOG.md — release history

Third-Party Licensing & Redistribution

• This extension code is released under MIT.
• Third-party notices for the packaged npm components (electron-edge-js, edge-js, edge-cs) are listed in THIRD_PARTY_NOTICES.md.
• This package contains no Siemens components — it neither uses nor redistributes Siemens.Engineering.* assemblies, and no TIA Portal installation or license is required to view export files.

Known Issues & Limitations

• Windows only — the .NET viewer assembly is loaded through edge-js (net48, win32/x64 native binaries)
• Know-how protected blocks — protected blocks cannot be exported by TIA Portal, so there is nothing to view

Disclaimer of Liability

The extension is a development and documentation tool. It only reads files and never modifies engineering data.

The author is not liable for any direct or indirect damages, production downtime, data loss, or other consequences resulting from decisions made based on the rendered previews. Users are fully responsible for validating programs in TIA Portal before deployment to real machines, production lines, or safety-related systems.

Community — Share Your Scripts & Ideas

We encourage you to contribute! If you have created useful scripts, export samples, or improvements:

1. Fork the TiaViewer.VSExt repository on GitHub
2. Open a Pull Request — your contribution will help the entire TIA Portal + VS Code community

License

MIT — Copyright (c) 2026 Mariusz Czyrnek