A VS Code extension that provides a local development server for Harmony Dev, enabling developers to edit their React applications using no-code tools directly from VS Code.
What is Harmony Dev?
Harmony Dev allows developers to edit their React applications locally using no-code tools. This VS Code extension acts as the development server that handles code updates, while users interact with their applications through the Harmony UI Chrome extension.
Features
Local Development Server: Runs a Harmony Dev server on port 4300 for seamless development
Automatic Server Management: Start and stop the Harmony server directly from VS Code
Multi-Window Coordination: Only one server runs on port 4300 at a time, controlled by the focused VS Code window
Efficient Control Transfer: Server control transfers between windows without stopping/starting the server
Browser-Friendly: Server stays running when you switch to your browser to use the Harmony UI Chrome extension
Status Bar Integration: See the server status in the VS Code status bar
tRPC API: Exposes a complete API for the Harmony UI Chrome extension to communicate with
How It Works
Install the Extension: Install this VS Code extension in your development environment
Install the Chrome Extension: Download and install the Harmony UI Chrome extension from the Chrome Web Store
Start Development: Open a React project in VS Code and the server will automatically start
Make Edits: Use the Harmony UI Chrome extension to make no-code edits to your React application
See Changes: Code updates are automatically applied to your local development environment
Multi-Window Behavior
The extension intelligently manages the server across multiple VS Code windows:
When you switch to your browser: The server stays running so you can continue using the Harmony UI Chrome extension
When you switch to another VS Code window: Server control transfers to the newly focused window (no server restart)
Only one server at a time: Ensures no port conflicts between different VS Code instances
Efficient transfers: Control changes happen instantly without stopping/starting the server
Status Bar Indicators
🟢 Running: Server is running and controlled by this window
🟡 Running: Server is running but controlled by another VS Code window
🔴 Error: Server encountered an error
⚪ Stopped: Server is not running
🔄 Starting...: Server is starting up
Installation
Build the extension:
cd packages/vscode-extension
pnpm install
pnpm build
Package the extension:
pnpm package
Install the .vsix file in VS Code:
Open VS Code
Go to Extensions (Ctrl+Shift+X)
Click the "..." menu (three dots) in the Extensions panel
Select "Install from VSIX..."
Navigate to packages/vscode-extension/Harmony-0.1.0.vsix and select it
Usage
Automatic Behavior
Open a React project in VS Code
Focus a VS Code window - the server will automatically start
Switch to your browser - the server stays running
Switch to another VS Code window - server control transfers to the new window instantly
