Overview
Design mode is the primary building environment in the Model Playground. This is where you define your model’s structure, set initial values, and configure simulation parameters. All changes made in Design mode update the baseline configuration — the foundation that every scenario builds on.What You See
When you enter Design mode, the workspace arranges itself for model building:- Design Panel (left) — Full access to all parameter sliders organized by submodel
- Stock-Flow Diagram (center) — Fully expanded diagram editor with Flow, Causal, Params, and Loops tabs
- Code Editor (bottom) — Direct Python code editing with Pyodide execution
- Charts are hidden — Focus stays on model structure, not outputs
Design Panel
The Design Panel on the left gives you access to every parameter in your model: stocks’ initial values, flow rates, auxiliary parameters, and simulation settings.Parameter Organization
Parameters are grouped by submodel. Expand a section to see its parameters and adjust values using sliders or direct numeric entry.Active Parameters
Active Parameters
Parameters that are enabled and will affect the simulation. These appear with full sliders you can adjust.
Inactive Parameters
Inactive Parameters
Parameters that exist in the model but are currently deactivated. You can activate them to include them in your analysis.
Parameter Types
| Type | Description | Example |
|---|---|---|
| Stock Initial Values | Starting quantities for accumulations | Initial Population = 1000 |
| Flow Rates | Speed of change between stocks | Growth Rate = 0.05 |
| Auxiliary Parameters | Constants and coefficients | Carrying Capacity = 10000 |
| Simulation Settings | Time horizon, step size, method | dt = 0.25, time = 100 |
Stock-Flow Diagram
The diagram editor is fully visible in Design mode with all tabs available:Flow View
The standard stock-and-flow diagram showing accumulations and rates of change
Causal View
Causal loop diagram showing feedback relationships between variables
Params View
Parameter influence diagram showing how parameters connect to model behavior
Loops View
Identified feedback loops with reinforcing (R) and balancing (B) labels
Code Editor
For advanced users, the Code Editor provides direct access to the underlying Python model code. Models run in the browser using Pyodide — no server required.Key Features
- Syntax highlighting for Python
- Live execution via Pyodide (WebAssembly Python runtime)
- Inline errors shown directly in the editor
- Parameter sync — Code changes automatically update available sliders
Design Workflow
Review the model structure
Open Design mode and examine the stock-flow diagram to understand relationships between variables.
Set initial values
Use the Design Panel to configure starting values for all stocks. These define the system’s initial state.
Configure parameters
Adjust flow rates and auxiliary parameters to represent the system you’re modeling.
Design vs. Other Modes
| Design Mode | Calibrate Mode | Experiment Mode | |
|---|---|---|---|
| Purpose | Define model structure and baseline | Match model to real-world data | Explore what-if scenarios |
| Parameter changes affect | Baseline (all scenarios) | Baseline (all scenarios) | Current scenario only |
| Charts | Hidden | Visible | Visible |
| Stock-Flow Diagram | Fully expanded | Minimized | Available |
| Code Editor | Available | Hidden | Hidden |
Next Steps
Calibration
Fine-tune parameters to match real-world data
Playground Overview
See all playground modes and how they connect
Stock-Flow Diagrams
Learn more about building and reading stock-flow diagrams
Model Controls
Deep dive into parameter sliders and scenario management