https://github.com/cdilga/ladder-logic-editor
https://github.com/cdilga/ladder-logic-editor
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/cdilga/ladder-logic-editor
- Owner: cdilga
- Created: 2026-01-12T03:58:14.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-01-12T04:02:48.000Z (5 months ago)
- Last Synced: 2026-01-12T13:27:05.318Z (5 months ago)
- Language: TypeScript
- Size: 271 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
━━┫ LADDER LOGIC EDITOR ┣━━
Transform Structured Text into visual ladder diagrams.
Simulate PLC logic in real-time. All in your browser.
⚡ Live Demo
•
📚 Documentation
•
Quick Start
•
Features
•
Architecture
Desktop
Mobile
---
## ⚡ What is this?
Write **IEC 61131-3 Structured Text** code. Watch it transform into **ladder diagrams** instantly. Run **live simulations** with scan cycle execution. Toggle inputs. Watch outputs change. Debug visually.
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ ST Code Ladder Diagram Variable Watch │
│ ┌──────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ IF A AND │ ──► │ ─┤A├─┤B├─(Y) │ ──► │ A: [TRUE ] │ │
│ │ B THEN │ │ │ │ B: [FALSE] │ │
│ │ Y := 1; │ │ Power flows │ │ Y: [FALSE] │ │
│ └──────────┘ └──────────────┘ └──────────────┘ │
│ │
│ Write code See it visualized Simulate & debug │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
```
## 🎯 Features
### 🔄 Real-Time Transformation
Write ST code and watch the ladder diagram update instantly. Full bidirectional sync keeps everything in harmony.
### ⏱️ Timer Function Blocks
**TON** (On-Delay), **TOF** (Off-Delay), **TP** (Pulse) — all IEC 61131-3 compliant with proper timing behavior.
### 🔢 Counter Function Blocks
**CTU** (Count Up), **CTD** (Count Down), **CTUD** (Up/Down) — complete with preset values and output flags.
### 📈 Edge Detection
**R_TRIG** (Rising Edge), **F_TRIG** (Falling Edge) — single-scan pulse generation for event-driven logic.
### ▶️ Live Simulation
Run your ladder logic with real scan cycle execution. Toggle inputs, watch outputs respond, observe timer elapsed times.
### 👁️ Variable Watch Panel
Monitor all variables in real-time. Click to toggle BOOLs. View timers and counters. Filter by type.
### Full IEC 61131-3 ST Support
```
┌────────────────────┬──────────────────────────────────────────────────────┐
│ Category │ Supported Elements │
├────────────────────┼──────────────────────────────────────────────────────┤
│ Boolean Logic │ AND, OR, XOR, NOT │
│ Comparisons │ =, <>, >, >=, <, <= │
│ Arithmetic │ +, -, *, /, MOD │
│ Control Flow │ IF/THEN/ELSIF/ELSE, CASE, FOR, WHILE, REPEAT │
│ Timers │ TON, TOF, TP │
│ Counters │ CTU, CTD, CTUD │
│ Edge Detectors │ R_TRIG, F_TRIG │
│ Data Types │ BOOL, INT, REAL, TIME │
│ Variable Sections │ VAR, VAR_INPUT, VAR_OUTPUT, VAR_IN_OUT │
└────────────────────┴──────────────────────────────────────────────────────┘
```
## 🚀 Quick Start
```bash
# Clone the repository
git clone https://github.com/cdilga/ladder-logic-editor.git
cd ladder-logic-editor
# Install dependencies
npm install
# Start development server
npm run dev
```
Open **http://localhost:5173** and start writing ST code!
## 📦 Example: Traffic Light Controller
```iecst
PROGRAM TrafficController
VAR_INPUT
START_BTN : BOOL; (* Start button *)
STOP_BTN : BOOL; (* Stop button *)
ESTOP : BOOL; (* Emergency stop *)
END_VAR
VAR_OUTPUT
N_RED : BOOL; (* North Red *)
N_YEL : BOOL; (* North Yellow *)
N_GRN : BOOL; (* North Green *)
END_VAR
VAR
Running : BOOL;
PhaseTimer : TON;
CurrentPhase : INT;
END_VAR
(* Start/Stop Logic *)
IF START_BTN AND NOT ESTOP THEN
Running := TRUE;
END_IF;
IF STOP_BTN OR ESTOP THEN
Running := FALSE;
END_IF;
(* Phase Timer - 3 second phases *)
PhaseTimer(IN := Running, PT := T#3s);
IF PhaseTimer.Q THEN
CurrentPhase := CurrentPhase + 1;
IF CurrentPhase > 2 THEN
CurrentPhase := 0;
END_IF;
END_IF;
(* Output Logic *)
N_GRN := Running AND CurrentPhase = 0;
N_YEL := Running AND CurrentPhase = 1;
N_RED := Running AND CurrentPhase = 2;
END_PROGRAM
```
## 🏗️ Architecture
```
┌─────────────────────────────────────┐
│ Transformation Pipeline │
└─────────────────────────────────────┘
│
┌──────────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ ST │ │ Lezer │ │ Ladder │ │ React │ │
│ │ Code │───►│ AST │───►│ IR │───►│ Flow │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │ │
│ "IF A THEN" Typed syntax Rungs, contacts Visual │
│ " Y := 1" tree nodes coils, branches diagram │
│ │
└──────────────────────────────────────────────────────────────────────┘
│
┌───────────────┴───────────────┐
│ │
┌───────▼───────┐ ┌───────▼───────┐
│ Interpreter │ │ Layout │
│ & Simulator │ │ Engine │
└───────────────┘ └───────────────┘
│ │
Scan cycle execution Node positioning
Timer/Counter state Edge routing
Variable updates Branch layout
```
### Key Transformations
| ST Expression | Ladder Representation |
|--------------|----------------------|
| `A AND B` | Series contacts: `─┤A├─┤B├─` |
| `A OR B` | Parallel branches |
| `NOT A` | Normally Closed: `─┤/A├─` |
| `X := expr;` | Input contacts → Output coil |
| `TON(IN:=x, PT:=T#5s)` | Timer function block |
| `CTU(CU:=x, PV:=10)` | Counter function block |
| `Count > 10` | Comparator block |
## 🛠️ Tech Stack
| Technology | Purpose |
|-----------|---------|
| **React 19** | UI framework with concurrent features |
| **TypeScript** | Type safety across the codebase |
| **Vite** | Fast builds and HMR |
| **React Flow** | Ladder diagram rendering |
| **CodeMirror 6** | ST code editor with syntax highlighting |
| **Lezer** | High-performance parser generator |
| **Zustand** | Lightweight state management |
## 📁 Project Structure
```
src/
├── components/
│ ├── ladder-editor/ # Ladder diagram canvas & nodes
│ │ └── nodes/ # Contact, Coil, Timer, Counter nodes
│ ├── st-editor/ # CodeMirror ST editor
│ ├── variable-watch/ # Real-time variable monitoring
│ └── layout/ # App layout components
├── transformer/
│ ├── ast/ # ST AST types & CST conversion
│ ├── ladder-ir/ # Intermediate representation
│ ├── layout/ # Diagram positioning algorithm
│ └── react-flow/ # IR to React Flow conversion
├── interpreter/
│ ├── program-runner.ts # Scan cycle execution
│ ├── expression-evaluator.ts
│ ├── statement-executor.ts
│ └── function-block-handler.ts
├── lang/
│ └── st.grammar # Lezer grammar for ST
└── store/
├── project-store.ts # Project state
└── simulation-store.ts # Simulation state & variables
```
## 🧪 Testing
```bash
# Run unit tests
npm test
# Run with watch mode
npm run test:watch
# Run E2E tests
npm run test:e2e
```
The project includes:
- **Unit tests** for parser, transformer, and interpreter
- **Property-based tests** for arithmetic and control flow
- **Compliance tests** for IEC 61131-3 conformance
- **Integration tests** for real-world PLC patterns
- **E2E tests** with Playwright
## 🌐 Deployment
Automatically deployed to **GitHub Pages** on every push to `main`.
**Live site:** https://lle.dilger.dev/
## 📚 Documentation
- [User Guide](https://lle.dilger.dev/#/docs) — Tutorials and getting started
- [IEC 61131-3 Reference](./specs/IEC_61131_3_REFERENCE.md) — Full standard specification
## 📄 License
MIT License — use freely for personal and commercial projects.
---
Built with ☕ and a passion for industrial automation