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
- 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
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Tari VS Code Extension"
- Click Install
Manual execution (Development)
Clone the repository:
git clone https://github.com/tari-project/tari-vscode-nocode-extension.git
cd tari-vscode-nocode-extension
Install dependencies:
proto use
pnpm install
Build the extension:
moon tari-extension:build
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
- Create a new file:
my-transaction.tari
- Open the visual editor: File opens automatically in Tari Flow Editor
- Build your transaction: Drag nodes from the palette to create your flow
- Connect parameters: Link node outputs to inputs
- 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
Open extension workspace:
cd packages/tari-extension
code .
Launch Extension Development Host:
- Press
F5
or go to Run and Debug
- Select "Run Extension" configuration
- New VS Code window opens with extension loaded
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:
- Version bump: Update version in
package.json
- Create release: Push git tag
v1.0.0
- 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.