Develop, preview, and manage Corezoid Driven UI applications directly from VS Code. Connect to multiple servers, edit remote files with instant save, and see live CDU page previews -- all without leaving your editor.
Features
Multi-Server Management
Connect to one or more pong-server instances from the CDU sidebar. Add servers from a preset list or enter a custom URL. Switch between servers instantly.
SSO Authentication
Log in securely via your browser. The extension opens your SSO provider, and VS Code receives the session token automatically -- no manual copy-paste needed.
Remote File Editing
Browse your application's content tree (pages, configs, styles, scripts) in the sidebar. Click any file to open it in the editor through a virtual filesystem (cdu://). Save with Cmd+S / Ctrl+S to push changes to the server instantly.
Live CDU Preview
Open any page file and a live CDU preview panel appears alongside your editor. The preview automatically updates when you switch between page files.
Page Management
Manage CDU pages directly from the sidebar context menu:
- Add Page -- create new pages
- Duplicate Page -- copy an existing page with all its content
- Add Style -- add a LESS stylesheet to any page
- Toggle Static -- mark pages as static/dynamic
- Remove Page -- delete pages you no longer need
Conflict Resolution
When a remote file changes while you're editing, a diff icon appears in the editor title bar. Click it to see a three-way merge view with git-style conflict markers. Use VS Code's built-in Accept Current / Incoming / Both buttons to resolve, then push the result to the server.
Background Content Polling
The extension monitors expanded applications for remote changes in the background. Per-app spinner indicators show when updates are being fetched. Polling interval is configurable.
Quick Start
- Install the extension from the VS Code Marketplace or search for "CDU" in the Extensions sidebar.
- Open the CDU sidebar by clicking the CDU icon in the Activity Bar.
- Add a server -- click the + button and choose a preset or enter a custom URL.
- Log in -- click the login icon next to the server, complete authentication in your browser.
- Browse & edit -- expand the server to see applications and files. Click to open, edit, and save.
- Preview -- open a page file to see the live CDU preview panel.
Commands
All commands are available via the Command Palette (Cmd+Shift+P / Ctrl+Shift+P):
| Command | Description |
|---|---|
CDU: Welcome |
Open the welcome guide |
CDU: Add Server |
Add a new pong-server connection |
CDU: Edit Server |
Edit an existing server configuration |
CDU: Remove Server |
Remove a server |
CDU: Login |
Authenticate with a server via SSO |
CDU: Logout |
Sign out from a server |
CDU: Refresh Servers |
Refresh the server tree view |
Context Menu Actions
Right-click items in the CDU sidebar for additional actions:
| Action | Available On | Description |
|---|---|---|
| Add Page | pages folder |
Create a new page |
| Duplicate | Page folder | Duplicate a page with all content |
| Add Style | Page folder | Add a style.less file |
| Toggle Static | Page folder | Toggle the static flag |
| Remove | Page folder | Delete a page |
Settings
| Setting | Description | Default |
|---|---|---|
cdu.treePollIntervalMs |
Interval in ms for polling remote content changes. Set to 0 to disable. |
10000 |
JSON Schema Validation
The extension provides built-in JSON schema validation for page configuration files (pages/*/config.json), giving you autocomplete and error checking as you edit.
Requirements
- VS Code 1.85.0 or later
- Access to a pong-server instance
- Network connectivity for API calls and preview
Installation
From VS Code Marketplace
Search for CDU - Corezoid Driven UI in the Extensions sidebar, or run:
code --install-extension corezoid.cdu-vscode-extension
Resources
Telemetry
This extension does not collect any telemetry or usage data.