Verde

A Roblox Studio + Properties Emulator VS Code extension.

Verde allows to view your entire datamodel from within VS Code, with operations like copy, paste, duplicate, rename, and delete for any instance.

Verde also comes with a properties window, allowing you to read and modify any properties of any instance without having to leave your editor.

Verde can be used either with a dedicated sync tool (Like Rojo/Argon/Azul) or with the newly released Script Sync + Luau-LSP (for sourcemap generation)

Features

• Live Instance Tree: View your Roblox game's instance hierarchy in VS Code.
• Script Opening: Double-click scripts from the explorer to open them right in VS Code (works with Rojo/Argon/Azul/Luau-LSP sourcemaps).
• Instance Operations: Rename, duplicate, delete, copy, and paste instances.
• Ctrl+P Quick-Pick Menu: Quickly see most recently interacted instances, or search for a specific instance to quickly navigate to it.
• Properties Panel: View and edit instance properties right from VS Code.
• Play Sounds right from VS Code: Opening the Properties panel of a Sound instance, there will be a green Play button, just like in studio.
  • If not playing, make sure the Only Play Audio When Window In Focus Studio setting is disabled.

Requirements

• Roblox Studio with the Verde plugin installed
• A Rojo/Argon/Azul setup with sourcemap generation (for script opening functionality)

Extension Installation

Manually

1. Run npm run package in the extension directory to create a .vsix file
2. In VS Code, press Ctrl + Shift + P to open the command palette
3. Select "Install from VSIX..." and choose the generated .vsix file

Online

Visual Studio Marketplace

OpenVSX Registry

Setup

1. Install the Verde plugin in Roblox Studio
2. Open your VS Code workspace
3. The extension will automatically start a WebSocket server
4. Open Roblox Studio and run your game with the plugin
5. The Roblox Explorer view should appear in VS Code

Extension Settings

• verde.sourcemapPath: Path to sourcemap file (relative to workspace root) - defaults to "sourcemap.json"
• verde.port: Port for the WebSocket server - defaults to 9000
• verde.host: Host IP address for the WebSocket server - defaults to "localhost"
• verde.autoStart: Automatically start the server when the extension activates - defaults to true
• verde.iconDirectory: Optional absolute or workspace-relative directory containing ClassName.png overrides. You can point either to the icon folder itself or to a parent pack root that contains RobloxCustom/instance/16x/200. Missing icons still use Verde's bundled assets.

Usage

Opening Scripts

1. Click on any Script, LocalScript, or ModuleScript in the Verde explorer
2. The extension will look up the file path in your sourcemap
3. The corresponding file will open in VS Code

Instance Operations

• Right-click instances for context menu options
• Use keyboard shortcuts for quick operations:
  • Enter: Rename
  • Delete: Delete
  • Ctrl+C: Copy
  • Ctrl+V: Paste
  • Ctrl+D: Duplicate
  • Ctrl+Shift+A: Open new instance panel