Data Contract Editor for VS Code
Opens ODCS-compliant data contracts in the Data Contract Editor inside VS Code.
The editor provides a rich UI with Monaco-based YAML editing, schema validation, and graph visualization — all launched on demand as a local server using npx. No global install required.
Features
- One-click editing — right-click any
.yaml / .yml file and choose Open in Data Contract Editor
- Editor title bar button — appears automatically when a YAML file is active
- Command Palette — run
Data Contract: Open in Data Contract Editor from anywhere
- Embedded panel — editor opens in a VS Code webview panel (or in your system browser if preferred)
- Status bar indicator — shows while the server is running; click to re-open the panel
- Automatic cleanup — the local server stops when you close the editor panel or shut down VS Code
Requirements
- Node.js 18+ and npm must be installed and available on your
PATH
- Internet access is required on first use (to download
datacontract-editor via npx); subsequent runs use the npx cache
Installation
Install from the VS Code Marketplace or search for "Data Contract Editor" in the Extensions panel (Ctrl+Shift+X).
Usage
Open a data contract file
- Right-click a
.yaml / .yml file in the Explorer or while it is open in the editor
- Select Open in Data Contract Editor
Or use the Command Palette (Ctrl+Shift+P / ⇧⌘P):
Data Contract: Open in Data Contract Editor
On first use you will be asked where the editor should open (saved to settings — change at any time via Preferences → Settings):
- Inside VS Code — opens as an embedded webview panel next to your editor
- External Browser — opens in your default system browser
The extension will start a local server and open the editor. A status bar item ($(globe) Data Contract Editor) is shown while the server is running.
Tip: Closing the editor panel also stops the local server.
Stop the server manually
Data Contract: Stop Data Contract Editor Server
Or simply close the editor panel or VS Code — the server is stopped automatically.
Settings
| Setting |
Type |
Default |
Description |
datacontractEditor.port |
number |
9090 |
Port for the local server |
datacontractEditor.openIn |
simpleBrowser | externalBrowser |
simpleBrowser |
Where to open the editor (set on first use via prompt) |
Troubleshooting
"Failed to start: ENOENT"
Node.js / npm is not on your PATH. Install Node.js from nodejs.org and restart VS Code.
Port already in use
Another process is using the configured port. Stop it (lsof -ti :9090 | xargs kill) or change datacontractEditor.port in settings.
Server logs
Open the Output panel (View → Output) and select Data Contract Editor from the dropdown for detailed server output.
Contributing
Contributions are welcome! Please open an issue before submitting a large pull request.
git clone https://github.com/gkoenig/vscode-datacontract-editor
cd vscode-datacontract-editor
npm install
Open the folder in VS Code and press F5 to launch an Extension Development Host with the extension loaded.
Run npm run watch in a terminal to rebuild automatically on changes.
Project structure
| Path |
Purpose |
src/extension.ts |
All extension logic |
esbuild.js |
Build script (TypeScript → dist/extension.js) |
package.json |
Extension manifest and npm scripts |
npm scripts
| Script |
Description |
npm run build |
One-shot build |
npm run watch |
Rebuild on every save |
npm run package |
Produce a .vsix for local testing |
npm run publish |
Publish to the VS Code Marketplace |
License
MIT
