private beta
The Builder VS Code extension for Projects launches Builder's Visual Editor directly from Visual Studio Code.
The extension enables visual code editing directly within VS Code, combining traditional development tools with Builder's Visual Editor.
- Automatically detects and uses existing
builder.config.jsonconfigurations. - Manages development server ports and processes to prevent conflicts.
- Provides real-time synchronization between visual changes and code.
Before beginning, make sure you have:
- The latest version of Visual Studio Code and Node.js.
- Access to Builder Projects.
- An existing project with a frontend framework.
To install the extension from Visual Studio's Marketplace:
- Open the Extensions tab in Visual Studio Code.
- Click the search box, type Builder, and select the Builder official extension.
- Click Install.
After installation, the Builder icon appears in the VS Code Activity Bar.
- Click the Builder icon to open the extension.
This video demonstrates installing and accessing the extension from VS Code:
To connect with Builder Projects:
- Click the Builder icon in the Activity Bar.
- Enter the Dev Server URL where the development server runs, such as
http://localhost:8080. - Optional: Enter the Dev Command to start the development server, such as
npm run dev, when the dev server is not already running. - Optional: Select the Remember for this project checkbox to save these settings to
builder.config.jsonin the project root for team sharing. - Click Launch.
The launch process includes these actions:
- Starts the development server if not already running.
- Opens a Webview tab in VS Code.
- Loads Builder's Visual Editor connected to the local repo.
This video demonstrates the process of launching into Builder Projects:
During the first launch, the extension prompts to authenticate with the Builder account and authorize a Builder Space. A browser window opens with the Builder authorization page.
- Select the Builder Space from the dropdown.
- Click Authorize to grant access.
- Return to VS Code to complete the setup.
Authentication is required once per VS Code project; the extension applies the same authenticaiton for future sessions.
This video demonstrates the authentication flow:
The extension performs these actions:
- Stops the development server process when closing the Webview tab.
- Cleans up proxy processes.
- Frees up used ports.
To manually stop processes, click the Stop button in the Projects panel or close the Webview tab.
After setting up the extension:
- For visual editing guides, go to Builder Projects.
- For connecting repositories, go to Connect GitHub to Projects.