Developer Guide

Welcome to the SimNet developer documentation. SimNet is a pure front-end network simulator template that lets developers build interactive network-related learning content on top of Vue 3, VitePress, and a Rust/WASM engine.

Who is this for?

• Developers who want to contribute code — whether to fix bugs, add features, or improve the UI
• Technical readers who want to understand how the system works — to learn how the WASM engine drives the simulation
• Content creators who want to build custom scenarios on top of the template — to design their own network situations for learners

What you will learn

Section	Content
Architecture	Tech stack overview, component hierarchy, data flow, directory layout, theming system, and challenge framework
Extending the Template	Build a new scenario from scratch — directory structure, config YAML format, device setup, event system, and Flag verification
Build Runtime Compatibility	Supported Node versions, system wasm-pack requirement, canonical verification command set, and the VitePress fallback procedure
Production Deployment	Operator runbook: environment prerequisites, secret provisioning, build artifacts, deployment modes (dev preview / Docker), health check, and rollback procedure

Quick Start

# 1. Clone the project
git clone https://github.com/<org>/network-sim.git
cd network-sim

# 2. Install dependencies
pnpm install

# 3. Build the WASM engine (requires Rust + wasm-pack)
pnpm wasm:build

# 4. Start the dev server
pnpm dev

Once the dev server is running, open http://localhost:5173/challenges/01-ethernet-basics/ to see the first example scenario in action.

Prerequisites

Tool	Minimum Version	Purpose
Node.js	18+	Front-end build toolchain
pnpm	10+	Package manager
Rust	1.75+	Compiles simnet-engine
wasm-pack	0.12+	Compiles Rust to WebAssembly

Project Structure at a Glance

network-sim/
├── .vitepress/        # VitePress config and custom theme
│   └── theme/         # Vue components, composables, CSS
├── docs/              # Content pages (Markdown + example scenarios)
│   ├── challenges/    # Example scenario directory
│   └── dev/           # Developer documentation (what you are reading)
├── simnet-engine/     # Rust WASM engine
│   └── crates/        # Rust workspace crates
├── tests/             # Test files
└── package.json       # Front-end dependencies and scripts

Ready to go? Start with the Architecture to dive into the whole system.