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 and analyse online data.

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

Syntax highlighting in the text editor

The extension ships TextMate grammars (the same mechanism the C/C++ and C# extensions use), so opening a TIA Portal export as text — right-click → Open source file, or Open With... → Text Editor — gives you full syntax highlighting:

Code folding — SCL and s7dcl sources get gutter fold markers (+/…) for whole blocks: IF/FOR/WHILE/REPEAT/CASE, REGION and NETWORK. The matcher is case-insensitive and ignores keywords inside comments and string literals.

Choosing which files are highlighted — the associations above are defaults; override them with the standard VS Code files.associations setting, e.g.:

"files.associations": {
    "*.db": "plain text",   // disable highlighting for .db
    "*.udt": "tia-s7db",    // highlight UDT sources like data blocks
    "*.awlsrc": "tia-scl"   // map your own extension to the SCL grammar
}

Customizing the colors — every token carries a documented TextMate scope (keyword.control.tia.scl, storage.type.tia.scl, comment.line.double-slash.tia.scl, support.constant.attribute.tia.scl, …); restyle any of them via editor.tokenColorCustomizations:

"editor.tokenColorCustomizations": {
    "textMateRules": [
        { "scope": "keyword.control.tia.scl", "settings": { "foreground": "#569CD6", "fontStyle": "bold" } },
        { "scope": "storage.type.tia.scl", "settings": { "foreground": "#4EC9B0" } }
    ]
}

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. Double-click a block file in the Explorer — by default it opens in the text editor; set tiaViewer.editor.openOnClick to preview to open the graphical viewer on click instead (or right-click a file / a PLC folder and pick a preview command)

Usage

Previewing a block (interactive webview)

Double-click (or single-click preview) a SimaticML XML block, a .s7dcl source document (the matching .s7res is picked up automatically), or a .scl / .db / .udt source in the VS Code Explorer to open it. What a click opens is controlled by the tiaViewer.editor.openOnClick setting: source (the default) opens the block source in the regular text editor, preview opens the graphical viewer. Alternatively, right-click the file and choose Graphical preview LAD/FBD. XML files that are not TIA Portal exports always open in the regular text editor, and for any supported file the other option stays available via right-click → Open source file / Graphical preview LAD/FBD (or Open With...).

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, GRAPH steps/transitions and interface variables).

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.

PLC Online (live values)

The navigator sidebar contains a collapsible PLC Online panel that connects the preview directly to a SIMATIC S7 CPU (S7-1500 / S7-1200 G2) through its built-in web server (JSON-RPC API — see .github/SimaticWebApi.md):

1. Expand PLC Online, enter the CPU address, a user and password (a user with read access configured in TIA User Management; the password is kept in memory only, never persisted).
2. Pick the read interval (ms) and the update mode — Every interval rewrites all values each cycle, Only on change updates the table only when a value actually changes.
3. Press Test connection to verify HTTPS reachability and the credentials without going online (the status line reports the result and the CPU operating mode, or a missing-permissions hint).
4. Press Go online. The status line shows the connection state and the CPU operating mode (run/stop). Press Go offline to disconnect and log out.

While online, opening a watch table from the tree shows a Monitor value column with live values of the watched tags, refreshed at the configured interval.

The same live monitoring works on data block pages (global DBs and instance DBs, including technology object instance DBs): the interface table gains a Monitor value column right after the variable name. Only variables with the Accessible from HMI/OPC UA attribute (ExternalAccessible) are monitored — the flag is inherited down the member tree, so expanding a struct, UDT or multi-instance FB reveals live values for its elements. Arrays of elementary types are monitored per element ("DB"."arr"[0]; arrays over 256 elements, arrays of Struct/UDT and whole structs cannot be read through the web API — use a watch table for those). The attribute flags shown in the expanded rows are filled in from the UDT/FB type export when the DB export omits them.

FB pages monitor the data of a picked instance instead: an Instance selector in the toolbar lists the block's instance DBs and multi-instance paths, the interface table gains the same Monitor value column (paths relative to the picked instance) and network operand labels get live values next to them. On GRAPH function blocks the flowchart itself goes online too: every active step is highlighted green (the step's X flag — in simultaneous branches several steps are active at once), and a transition popup shows the transition's criteria bits — the CRIT value (hex + decimal) plus a TRUE (green) / FALSE (blue) state under every condition operand, decoded from the single polled CRIT value (bit N = N-th condition operand; the operand variables themselves are not read). The same online view is available in the VS Code graphical preview panel (PLC Online panel on the right side of the preview — it closes automatically when you click outside it).

Prerequisites on the PLC/TIA side: the web server must be enabled on the CPU, CORS must be allowed in the web server settings, and — because S7 CPUs use a self-signed certificate by default — open https://<cpu-address>/ in the browser once and accept the certificate exception before going online.

Online trend chart

While online, right-click any monitored variable row on a data block page and choose Add to chart to open a live trend in the split view (uPlot-based, up to 10 series, BOOL charted as 0/1). The menu also lets you assign the series to an existing Y axis or create a New Y axis for it (up to 5 axes; extras stack on the right with their own scale, and disappear when their last series is removed). The chart records a timestamped sample on every poll and keeps a ring buffer trimmed to the Max recording time from the Trend panel in the navigator sidebar (default 10 min — retention only; the panel also has an Open chart button); in the VS Code preview the same setting sits under a settings gear on the chart toolbar and is remembered across sessions. The visible time window auto-scrolls with the live edge and is set independently on the chart toolbar (default 30 s, clamped to the retention); pan back with ◀ ▶ to freeze it (recording continues) and press Follow to re-attach. Drag-select a range on the chart to zoom into it (the window field shows the dragged span); double-click returns to live follow. Hover the chart for cursor values in the legend; click a legend label to hide/show a series (ctrl-click isolates it). The toolbar also offers pause (redraws only), clear, CSV export and saving/loading the chart configuration as JSON.

Copilot tools (PLC online)

While a preview panel is online, GitHub Copilot (agent mode / chat participants) can access the PLC through the extension's language model tools — they reuse the panel's online session and never ask for credentials:

The Accessible/Writable attributes are verified against the exported block sources in the workspace (found anywhere — Program blocks, Units/<unit>, Technology objects or loose PLC folders) with the same inheritance rules as the interface table. This enables agentic workflows such as PID tuning: Copilot records the controller's setpoint / process value / output into the trend, reads the step response, writes adjusted parameters and repeats — you only go online once and confirm the writes. Writes are confirmed per call unless you enable tiaViewer.lmTools.autoConfirmPlcWrites (use only in safe setups — writing to a running PLC affects the controlled process).

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

Settings

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
• LICENSE.md / TERMS.md / PRIVACY.md — license agreement, terms of sale, privacy policy
• CHANGELOG.md — release history

Third-Party Licensing & Redistribution

• This extension is proprietary commercial software licensed under the End User License Agreement. Versions 1.1.104 and earlier were released under the MIT License and remain MIT-licensed; version 2.0.0 and later are not.
• Redistribution of the extension package by anyone other than the Visual Studio Marketplace and the Open VSX Registry is not permitted.
• Third-party notices for the packaged npm components (electron-edge-js, edge-js, edge-cs) are listed in THIRD_PARTY_NOTICES.md; those components keep their own (open-source) licenses.
• 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.

These terms are binding as section 14 of the End User License Agreement.

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

By submitting a contribution you confirm that it is your own work and you grant CmSoft a perpetual, worldwide, royalty-free right to use, modify and distribute it as part of this product. Contributions are published under the terms of the EULA; the extension's own source code is not open source.

License

Proprietary commercial software — see the End User License Agreement. Copyright © 2026 CmSoft. All rights reserved.

CmSoft — Kornatka 23, 32-410 Dobczyce, Poland · NIP (VAT-ID) PL 894-253-07-59 · office@cmsoft.com.pl · www.cmsoft.com.pl

Versions 1.1.104 and earlier were published under the MIT License. That grant is irrevocable for those versions and is reproduced in section 20 of LICENSE.md. It does not apply to version 2.0.0 or later.