GORM Visual Designer

Live visual editor for GORM models – drag, edit, and update Go structs directly from your codebase. Built fully inside Next.js.

🚀 Project Overview

GORM Visual Designer is a Next.js-based tool that:

• Connects to a folder of .go files.
• Parses GORM models (structs with tags) inside Node.js.
• Displays each model as a draggable box on a canvas.
• Allows real-time editing of structs, fields, and relationships.
• Saves changes back to the original Go files.
• Shows relationships (has one, has many, belongs to, many-to-many) visually.
• Supports annotations per model or field.

🛠 Getting Started

Prerequisites

• Node.js (v18 or higher)
• NPM or Yarn

Installation

# Clone the repository
git clone https://github.com/yourusername/gorm-modeller.git
cd gorm-modeller

# Install dependencies
npm install
# or
yarn install

Running the Application

# Traditional way - Start the development server
npm run dev
# or
yarn dev

# Using npx (after installing the package)
npx gorm-modeller

# With custom port
npx gorm-modeller --port 8080

# With custom models directory
npx gorm-modeller --models ./path/to/models

# Or use both options
npx gorm-modeller --port 9000 --models ./my-go-models

Then open your browser and visit http://localhost:3000 (or the custom port you specified)

📝 Usage

1. Start the application using the instructions above.
2. Navigate to the canvas page by clicking "Open Designer" on the home page.
3. Sample Go models are automatically loaded from the sample directory.
4. Drag and arrange the model boxes on the canvas.
5. Click "Edit Struct" on any model to modify its fields, relationships, and annotations.
6. Changes are automatically saved back to the original Go files.
7. Load your own Go files by entering a path to your Go files folder and clicking "Load".

🧠 Features

• [x] Live folder connect (parse .go files from a selected directory).
• [x] Drag and drop struct boxes (React Flow canvas).
• [x] Edit struct names, fields, and types.
• [x] Add/remove fields or structs.
• [x] Visualize relationships (lines between models).
• [x] Real-time sync on file changes.
• [x] Save edits back to .go files.
• [x] Annotations/comments per model/field.

🧩 Tech Stack

• Frontend: Next.js with React and Tailwind CSS
• Canvas/Drag: React Flow
• Backend: Next.js API routes (Node.js only)
• Parsing: Node.js text parser for Go structs
• File Watching: Chokidar

📂 Project Structure

/app
  /canvas    - Drag-and-drop UI
  /models    - Struct data models
  /api/structs - API routes for parsing and saving structs
  /services
    /parser  - Parsing Go structs in Node
    /watcher - File watching for realtime sync
/lib
  /utils     - Helpers for types, GORM tag generation, etc.
/public
README.md
next.config.js
package.json

🔖 License

MIT

🔗 Related Projects

• GORM - The ORM library for Go
• React Flow - Library for building node-based apps
• Next.js - React framework