ThorVG for VS Code

A Visual Studio Code extension that integrates ThorVG Viewer for previewing Lottie animations and SVG files directly inside the editor.

Contents

• ThorVG for VS Code
  • Features
  • Usage
    • Opening ThorVG Preview
    • Commands
  • Development
    • Project Launch & Task Configuration
    • Package Extension
    • Requirements
  • Communication

Features

• Real-time Preview: View Lottie (.json, .lot) and SVG files directly in VSCode

• Auto-sync: Automatically updates the preview as you edit files

• Export Options: Export animations to PNG or GIF
• Performance Stats: View FPS, memory usage, and rendering statistics
• Animation Controls: Play, pause, loop, and adjust playback speed
• Dark Mode: Supports VSCode theme-aware styling

Back to contents

Usage

Opening ThorVG Preview

• Editor Icon: Click the ThorVG icon in the editor title bar while a .svg, .json, or .lot file is open to preview it with automatic loading and syncing.

• Command Palette: Use the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) to open ThorVG Preview.
• Auto-Sync: Clicking the editor icon automatically loads the current file, syncs edits in real time, and switches to the active file when you change editors.

Commands

All commands are accessible via Command Palette (Ctrl+Shift+P or Cmd+Shift+P):

• ThorVG: Open Viewer - Open ThorVG Preview panel
• ThorVG: Open Viewer with Current File - Open ThorVG Preview with current file and enable auto-sync
• ThorVG: Open Extension Folder - Open thorvg-preview folder (contains thorvg.wasm) for easy WASM updates

Back to contents

Development

Project Launch & Task Configuration

.vscode/launch.json

{
	"name": "Run Extension",
	"type": "extensionHost",
	"request": "launch",
	"args": [
		"--extensionDevelopmentPath=${workspaceFolder}"
	],
	"outFiles": [
		"${workspaceFolder}/out/**/*.js"
	],
	"preLaunchTask": "${defaultBuildTask}"
},

.vscode/tasks.json

{
	"type": "npm",
	"script": "compile",
	"group": {
		"kind": "build",
		"isDefault": true
	}
},

Package Extension

# Install vsce if not already installed
npm install -g @vscode/vsce

# Package extension
vsce package

This creates a .vsix file that can be installed in VSCode.

Requirements

• Node.js >= 18
• Visual Studio Code >= 1.85

Back to contents

Communication

For real-time conversations and discussions, please join us on Discord

Back to contents