WinFormForReact (WFfR)

Visual Bootstrap React Designer for VS Code inspired by Windows Forms.

WFfR is a VS Code extension with a React-powered Webview designer. It lets you drag Bootstrap controls onto a canvas, edit properties, resize controls, create event handlers with double-click, preview generated React code, save/load .wffr.json projects, copy code, and generate src/components/GeneratedPage.jsx.

Install dependencies

npm install
npm --prefix webview install

Run in development

npm run compile

Then open this folder in VS Code, press F5, and run:

WFfR: Open Designer

Package as a VS Code extension

npm run compile
npm run package

This creates a .vsix file that can be installed in VS Code with:

code --install-extension .\win-form-for-react-0.1.0.vsix

For Marketplace publishing, replace the placeholder publisher in package.json with your Visual Studio Marketplace publisher id, then use vsce publish.

Test

npm run compile

Manual smoke test:

1. Open the extension host with F5.
2. Run WFfR: Open Designer.
3. Drag controls from Toolbox to the canvas.
4. Resize/select/edit properties.
5. Double-click a control to create a handler.
6. Switch between Design, Preview, and Code.
7. Use Save, Load, Copy Code, and Generate Component.

Generated component example

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function GeneratedPage() {
  const [emailInputValue, setEmailInputValue] = useState('');

  const handleSubmitButtonClick = () => {
    console.log('submitButton clicked');
  };

  return (
    <div className="container py-4">
      <input
        id="emailInput"
        type="email"
        className="form-control mb-3"
        placeholder="Email"
        value={emailInputValue}
        onChange={(e) => setEmailInputValue(e.target.value)}
      />
      <button
        id="submitButton"
        className="btn btn-primary w-100"
        onClick={handleSubmitButtonClick}
      >
        Zaloguj
      </button>
    </div>
  );
}

Works now

• VS Code command WFfR: Open Designer
• Webview designer with Toolbox, Canvas, Properties, Preview, Code
• Drag and drop from toolbox
• Select, move, resize, delete, duplicate
• Basic nesting by dropping onto container-like controls
• Undo/redo
• Bootstrap class auto-resolution from size/type/layout
• Double-click event generation
• React functional component generator with useState
• Save/load .wffr/page.wffr.json
• Generate src/components/GeneratedPage.jsx
• Copy generated code to clipboard
• Learning hints for selected Bootstrap classes

Good next expansions

• Import existing React components into the schema
• More precise Bootstrap grid inference
• Rich modal/offcanvas runtime behavior in generated output
• Visual template gallery
• Automated extension tests with @vscode/test-electron