Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Tari OotleNew to Visual Studio Code? Get it now.
Tari Ootle

Tari Ootle

Tari Labs LLC

|
6 installs
| (0) | Free
Improves the Tari experience
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Tari VS Code Extension

🎯 The core VS Code extension for visual Tari blockchain development

This is the main extension package that provides VS Code integration for the Tari blockchain ecosystem. It delivers a comprehensive development environment with visual transaction building, intelligent code completion, and seamless network connectivity.

✨ Core Features

🎨 Visual Transaction Builder

Transform complex blockchain operations into intuitive drag-and-drop workflows:

  • Custom .tari File Editor: Dedicated editor for transaction flow definitions
  • ReactFlow Integration: Professional graph-based interface for building transactions
  • Real-time Validation: Live error checking and cycle detection
  • Code Generation: Automatic conversion from visual flows to executable code

🔧 Development Tools

  • Activity Bar Integration: Dedicated Tari view in VS Code's activity bar
  • Command Palette: Quick access to all Tari operations via Ctrl+Shift+P
  • IntelliSense Support: Smart completion for Tari APIs and patterns
  • Syntax Highlighting: Beautiful syntax coloring for .tari files

⚙️ Configuration & Connectivity

  • Wallet Integration: Direct connection to Tari wallet daemon
  • Network Selection: Switch between testnet and mainnet environments
  • Transaction Fees: Configurable fee settings for optimal performance
  • Custom Endpoints: Support for private Tari network connections

🏗️ Architecture

The extension follows VS Code's best practices with a clean separation of concerns:

Extension Core (packages/tari-extension/)
├── 🎯 extension.ts           # Extension activation & lifecycle
├── 📁 main-view/             # Activity bar webview provider
├── 📁 flow-view/             # Custom .tari file editor
├── 📁 doc-providers/         # Virtual document providers
├── 📁 format/                # Code formatting utilities
└── 📁 theme.ts               # Theme detection & synchronization

🔄 Communication Architecture

graph TB
    subgraph "🖥️ VS Code Environment"
        VSCodeAPI[VS Code Extension API]
        ExtensionHost[Extension Host Process]
        WebviewContext[Webview Sandbox]
    end

    subgraph "🎯 Extension Core Components"
        ExtensionEntry[extension.ts<br/>Entry Point]
        MainView[main-view/<br/>Activity Bar]
        FlowView[flow-view/<br/>Custom Editor]
        DocProviders[doc-providers/<br/>Virtual Documents]
        ThemeSync[theme.ts<br/>Theme Detection]
    end

    subgraph "🌐 React Interface"
        ReactComponents[React Components]
        QueryBuilder[Visual Query Builder]
        JSONParser[JSON Outline Parser]
    end

    subgraph "🔗 External Integration"
        TariNetwork[Tari Network]
        WalletDaemon[Wallet Daemon]
    end

    VSCodeAPI --> ExtensionHost
    ExtensionHost --> ExtensionEntry
    ExtensionEntry --> MainView
    ExtensionEntry --> FlowView
    ExtensionEntry --> DocProviders
    ExtensionEntry --> ThemeSync

    MainView --> WebviewContext
    FlowView --> WebviewContext
    WebviewContext --> ReactComponents
    ReactComponents --> QueryBuilder
    ReactComponents --> JSONParser

    ExtensionEntry --> TariNetwork
    TariNetwork --> WalletDaemon

    classDef vscode fill:#845ef7,stroke:#7048e8,color:#fff
    classDef extension fill:#ff6b6b,stroke:#c92a2a,color:#fff
    classDef react fill:#4dabf7,stroke:#1c7ed6,color:#fff
    classDef network fill:#51cf66,stroke:#37b24d,color:#fff

    class VSCodeAPI,ExtensionHost,WebviewContext vscode
    class ExtensionEntry,MainView,FlowView,DocProviders,ThemeSync extension
    class ReactComponents,QueryBuilder,JSONParser react
    class TariNetwork,WalletDaemon network

Key Integration Points:

  • 🔧 Extension Host: Runs in Node.js context with full VS Code API access and system integration
  • 🌐 Webview Context: Secure sandbox for React components with CSP-compliant message passing
  • 📝 Custom Editor Provider: Handles .tari file editing with full VS Code integration and real-time validation
  • 📄 Document Providers: Virtual documents for displaying generated code, JSON, and formatted output

🚀 Getting Started

Installation from Marketplace

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for "Tari VS Code Extension"
  4. Click Install

Manual execution (Development)

  1. Clone the repository:

    git clone https://github.com/tari-project/tari-vscode-nocode-extension.git
    cd tari-vscode-nocode-extension
    
  2. Install dependencies:

    proto use
    pnpm install
    
  3. Build the extension:

    moon tari-extension:build
    
  4. Launch extension:

    cd packages/tari-extension
    code .
    
    • Go to "Run and Debug" panel (Ctrl/Cmd + Shift + D)
    • Select "Run Extension" configuration
    • Press F5 to launch Extension Development Host

🎯 Usage Guide

Creating Your First Transaction

  1. Create a new file: my-transaction.tari
  2. Open the visual editor: File opens automatically in Tari Flow Editor
  3. Build your transaction: Drag nodes from the palette to create your flow
  4. Connect parameters: Link node outputs to inputs
  5. Validate & execute: Use the command palette to validate and run

Working with .tari Files

File Structure:

{
  "version": "1.0",
  "nodes": [
    {
      "id": "start",
      "type": "CallNode",
      "position": { "x": 100, "y": 100 },
      "data": {
        "type": "GenericNodeType.CallNode",
        "output": { "type": "String", "name": "result" }
      }
    }
  ],
  "edges": [
    {
      "id": "start-end",
      "source": "start",
      "target": "end",
      "sourceHandle": "exit",
      "targetHandle": "entry"
    }
  ]
}

Available Commands

Access via Command Palette (Ctrl+Shift+P):

  • Tari: Create New Transaction - Create a new .tari file
  • Tari: Validate Transaction - Check current transaction for errors
  • Tari: Execute Transaction - Run the transaction on the network
  • Tari: Export to Code - Generate executable code from visual flow
  • Tari: Configure Network - Set up wallet and network connections

⚙️ Configuration

Configure the extension via VS Code settings:

{
  "tari.walletDaemonAddress": "http://localhost:18143",
  "tari.network": "testnet",
  "tari.defaultTransactionFee": "100",
  "tari.enableAutoValidation": true,
  "tari.showGridInEditor": true
}

Configuration Options:

  • walletDaemonAddress: URL of your Tari wallet daemon
  • network: Target network (testnet/mainnet)
  • defaultTransactionFee: Default fee for transactions
  • enableAutoValidation: Auto-validate transactions on save
  • showGridInEditor: Display grid in visual editor

🧪 Testing & Development

Local Development

  1. Open extension workspace:

    cd packages/tari-extension
    code .
    
  2. Launch Extension Development Host:

    • Press F5 or go to Run and Debug
    • Select "Run Extension" configuration
    • New VS Code window opens with extension loaded
  3. Make changes and reload:

    • Edit source files
    • Reload Extension Development Host (Ctrl+R)

Testing Features

  • Create test .tari files in the Extension Development Host
  • Test command palette commands
  • Verify webview functionality with React DevTools
  • Check message passing between extension and webviews

🔌 Extension Points

The extension provides several integration points for other extensions:

Commands

  • tari.createTransaction - Programmatically create new transactions
  • tari.validateTransaction - Validate transaction from other extensions
  • tari.executeTransaction - Execute transactions programmatically

Events

  • tari.onTransactionCreated - Fired when new transaction is created
  • tari.onTransactionValidated - Fired after validation completes
  • tari.onTransactionExecuted - Fired after successful execution

🛠️ Dependencies

Core Dependencies

  • vscode: VS Code Extension API
  • tari-extension-common: Shared utilities and types
  • tari-extension-query-builder-webview: Visual editor components

Development Dependencies

  • TypeScript: Type-safe development
  • ESLint: Code quality enforcement
  • Prettier: Code formatting
  • @vscode/test-electron: Extension testing framework

📋 Extension Manifest

Key extension configuration from package.json:

{
  "contributes": {
    "customEditors": [
      {
        "viewType": "tari.flowEditor",
        "displayName": "Tari Flow Editor",
        "selector": [{ "filenamePattern": "*.tari" }]
      }
    ],
    "views": {
      "explorer": [
        {
          "id": "tariMainView",
          "name": "Tari",
          "when": "tari.enabled"
        }
      ]
    },
    "commands": [
      {
        "command": "tari.createTransaction",
        "title": "Create New Transaction",
        "category": "Tari"
      }
    ]
  }
}

🚀 Publishing

The extension is automatically published via GitHub Actions:

  1. Version bump: Update version in package.json
  2. Create release: Push git tag v1.0.0
  3. Automatic publishing: GitHub Actions builds and publishes to marketplace

🤝 Contributing

This extension is part of a larger monorepo. See the main project README and Developer Guide for comprehensive development instructions.

📄 License

Licensed under the BSD 3-Clause License - see LICENSE for details.


Part of the Tari VS Code Extension ecosystem - Revolutionizing blockchain development through visual tools and seamless VS Code integration.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft