IN DEVELOPMENT - Vibe Code Experiment

Swing GUI Builder

A visual drag-and-drop GUI builder for Java Swing in VS Code. Design your Swing interfaces visually and generate clean Java source code — no manual layout math required.

Features

• Component Palette — drag Button, Label, TextField, PasswordField, and TextArea onto the canvas
• Visual Canvas — position and resize components with drag-and-drop; zoom (Ctrl+scroll) and pan (middle-click drag)
• Properties Panel — edit text, colors, fonts, sizes, variable names, and positioning per component
• Java Code Generation — generates a JFrame with absolute positioning, custom component classes for styled components, and event listener stubs
• Configuration System — project-level .swingbuilder.json and VS Code settings for default styles
• Undo/Redo — full history with Ctrl+Z / Ctrl+Shift+Z (up to 50 actions)
• Save & Load — persist canvas state to .swingbuilder-layout.json and restore it later

Requirements

• VS Code 1.85 or later
• Java JDK (for compiling the generated Java code)

Installation

From VSIX

1. Download the .vsix file
2. In VS Code, open the Command Palette (Ctrl+Shift+P)
3. Run Extensions: Install from VSIX… and select the file

From Marketplace

Search for Swing GUI Builder in the VS Code Extensions view (Ctrl+Shift+X) and click Install.

Quick Start

1. Open the Command Palette (Ctrl+Shift+P)
2. Run Swing GUI Builder: New Window to open the builder canvas
3. Drag components from the palette on the left onto the canvas
4. Select a component to edit its properties in the right panel (text, colors, font, position, variable name)
5. Run Swing GUI Builder: Generate to produce Java source files in your workspace

Available Commands

Configuration

Project Config (.swingbuilder.json)

Run Init Project Config to generate a .swingbuilder.json file in your workspace root. This file lets you configure:

• outputDirectory — where generated Java files are written (default: swing/components/)
• defaultBackgroundColor — default background color for new components
• defaultTextColor — default text color for new components
• defaultFontFamily — default font family (e.g. "Arial")
• defaultFontSize — default font size in points
• components.MenuBar, components.Menu, components.MenuItem, components.ToolBar — hierarchical defaults used by the generation pipeline

The schema is automatically validated by VS Code when the file is open.

Hierarchy-related component defaults use the following fields:

• children: string[] — ordered child component IDs
• parentId: string — parent component ID
• position: "top" | "bottom" | "left" | "right" — fixed toolbar position (for ToolBar)

VS Code Settings

You can also configure defaults through VS Code settings (Ctrl+,). All settings are under the swingGuiBuilder namespace:

Per-component overrides are available for each supported component type (e.g. swingGuiBuilder.components.Button.defaultBackgroundColor).

Supported Components

Generated Code

When you run Generate, the extension produces:

1. A main JFrame class — sets up the window with absolute positioning (null layout), instantiates and places all components at the coordinates you defined on the canvas.
2. Custom component classes — if a component has non-default styling (colors, fonts), a separate class extending the base Swing component is generated with the styling applied.
3. Event listener stubs — empty listener methods are generated for interactive components so you can fill in your application logic.

All generated files are placed in the configured output directory.

Development (React + Vite Webview)

The webview UI is implemented as a React + Vite app in webview-app/ and built into out/webview/.

Install dependencies

pnpm install

Webview development workflow

1. Start the frontend dev server:

   pnpm --dir webview-app dev
   

2. Build production webview assets consumed by the extension:

   pnpm --dir webview-app build
   

3. Build extension + workspace artifacts:

   pnpm run build
   

Build and validation commands

pnpm run build
pnpm run verify
pnpm run typecheck

Legacy aliases (pnpm run compile and pnpm run check) are still available during the migration window, but new usage should prefer build/verify.

Testing

Run tests from the repository root:

pnpm run typecheck
pnpm test
pnpm --dir webview-app test
pnpm --workspace-concurrency=1 --filter . --filter ./shared --filter ./webview-app --if-present test:coverage

Coverage artifacts are generated in coverage/ (extension) and webview-app/coverage/. In CI (.github/workflows/test.yml), the standardized coverage artifact is test-coverage-report, containing:

• coverage/lcov-report/
• coverage/coverage-summary.json

License

MIT