Welcome to the ZenML Interactive Tutorial Extension ๐Ÿ‘‹

July 12, 2025 ยท View on GitHub

This VS Code extension provides an interactive, hands-on learning experience for ZenML - the open-source MLOps framework. Master ZenML fundamentals through 10 guided pipeline examples with step-by-step tutorials and one-click execution!

Welcome page screenshot

โœจ What You'll Learn

  • Pipeline Fundamentals - Create your first ZenML pipeline
  • Data Flow - Pass data between pipeline steps
  • Parameters - Make pipelines flexible with parameters
  • Organization - Tag and organize your pipeline runs
  • Tracking - Log metadata to record useful facts about runs
  • Visualizations - Create automatic & custom charts
  • Performance - Use caching and parallel processing
  • Reliability - Handle errors with retries and hooks
  • Configuration - Use YAML to separate configuration from code

10 Progressive Tutorials that build from basic concepts to advanced ZenML patterns.

Architecture

๐Ÿš€ Get Started

The fastest way to get started - no local setup required.

  1. Click Code โ–ถ Codespaces โ–ถ Create codespace onโ€ฏdevelop
  2. Wait ~2โ€ฏmin for setup (container, dependencies, extension)
  3. The extension will launch automatically

Local Setup with Extension from Marketplace

Prerequisites:

  • Python 3.8 or higher
  • VS Code

Steps:

  1. Set up Python virtual environment:

    python -m venv zenml-tutorial-env
    source zenml-tutorial-env/bin/activate  # On Windows: zenml-tutorial-env\Scripts\activate
    
  2. Install ZenML:

    pip install zenml
    
  3. Initialize ZenML:

    zenml init
    
  4. Start the ZenML server locally:

    zenml login --local
    
  5. Install the extension:

    • Install from the Marketplace or search for "ZenML Tutorial" in the Extensions Marketplace
  6. Launch the tutorial:

    • Open VS Code and the extension will launch automatically

๐Ÿ’ป Alternative: Local Setup with Dev Containers

Requirements:

Steps:

  1. Clone this repo & open in VSย Code
  2. Click Reopen in Container when prompted
  3. Extension starts automatically

๐ŸŽ“ Tutorial Structure

TutorialTopicSkills
1Hello WorldBasic pipeline creation
2Step I/OData flow between steps
3ParametersPipeline configuration
4TaggingRun organization
5MetadataLogging and tracking
6CachingPerformance optimization
7VisualizationsCharts and plots
8Fan-out/Fan-inParallel processing
9Retries & HooksError handling
10YAML ConfigConfiguration management

๐ŸŽฎ How to Use

  • Run pipelines via the โ€œRun Pipelineโ€ button
  • Navigate with Previous/Next buttons
  • Inspect output in the terminal and Dashboard link
  • Experiment by editing any example code

โš™๏ธ Extension Configuration

Auto-Open Tutorial

The tutorial homepage opens automatically when you start VS Code in the following scenarios:

  • On first install (always opens the first time you install the extension)
  • In GitHub Codespaces (when CODESPACES=true)
  • When tutorial is enabled (when ZENML_ENABLE_TUTORIAL=true)
  • When user setting is enabled (see configuration options below)

You can control the user preference behavior:

๐Ÿ”ง Quick Disable

When the welcome message appears, click "Don't Show Again" to disable auto-opening.

๐Ÿ”ง Settings UI

  1. Open VS Code Settings (Ctrl+, or Cmd+,)
  2. Search for "zenml"
  3. Toggle "Auto Open Tutorial" on/off

๐Ÿ”ง Settings JSON

Add to your VS Code settings to enable auto-open (disabled by default):

{
  "zenml.autoOpenTutorial": true
}

Note: You can always access the tutorial manually via the ZenML sidebar (book icon) or Command Palette (Ctrl+Shift+P โ†’ "ZenML: Open ZenML Tutorial Homepage").

๐Ÿ“– Manual Tutorial Access

If the tutorial doesn't open automatically, you can easily access it manually:

Method 1: Using the ZenML Tutorial Sidebar

  1. Look for the ZenML Tutorial icon (๐Ÿ“–) in the Activity Bar (left side of VS Code)
  2. Click on it to open the tutorial panel
  3. Click "Open Homepage" to start the tutorial

Tutorial Sidebar

Method 2: Using the Main Sidebar

  1. Open the main VS Code sidebar (Explorer view)
  2. Scroll down to find "ZenML Tutorial" in the extensions list
  3. Click on it to access the tutorial

Main Sidebar

Method 3: Using Command Palette

  1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
  2. Type "ZenML: Open ZenML Tutorial Homepage"
  3. Press Enter

Once opened, you'll see the welcome screen:

Tutorial Welcome Screen

Dashboard URL

Configure the ZenML dashboard URL for pipeline run links:

{
  "zenml.dashboardUrl": "http://localhost:8237"
}

๐Ÿ›Ÿ Getting Help