Typegen UI

Web interface for managing Typegen workflows
Visual • Intuitive • Developer-focused

---

💻 Typegen UI

The Typegen UI is a web-based interface that provides a visual workflow for managing database connections, exploring schemas, configuring generation options, and previewing generated output. It is designed to improve the developer experience by offering an intuitive UI on top of the Typegen platform.

Important: The UI is not a standalone application and should not be deployed independently. It is provisioned, configured, and controlled by Typegenctl, which coordinates its integration with the Typegen Server and manages its runtime lifecycle.

How to use	Description
Typegenctl	Typegenctl GitHub
Typegen Server	Typegen Server GitHub

️🖼️ Usage Demo & Screenshots

1. Usage Demo

2. Screenshots

UI	Add Connection	Connection View
Light theme dashboard	Add new database	Database details

Type Generator	Java Options	TypeScript Options
Generate types	Java settings	TypeScript settings

Zod Options	Mapper Generator	Settings
Zod settings	Data mappers	App settings

Record Options
Record settings

🐳 Docker Image

Pre-built Docker images are available for this project and can be pulled from the registry:

docker pull ghcr.io/khanalsaroj/typegen-ui:latest

🚀 Quick Start with Docker Compose

The simplest way to run both the backend and frontend together is using Docker Compose.

Create a docker-compose.yml file with the following content:

services:
  frontend:
    image: ghcr.io/khanalsaroj/typegen-ui:latest
    container_name: typegen-frontend
    ports:
      - "7359:80"
    environment:
      - API_UPSTREAM=typegen-backend
    networks:
      - bridge-net
    restart: unless-stopped

  backend:
    image: ghcr.io/khanalsaroj/typegen-server:latest
    container_name: typegen-backend
    ports:
      - "8049:8080"
    environment:
      - APP_ENV=production
    volumes:
      - typegen-backend:/app/data
    networks:
      - bridge-net
    restart: unless-stopped

networks:
  bridge-net:
    driver: bridge

volumes:
  typegen-backend:

Then start both services in detached mode:

docker compose up -d

Once running, the services will be available at:

Service	URL
Frontend	http://localhost:7359
Backend	http://localhost:8049

📂 Project Structure

typegen-ui/
├── public/          # Static assets
├── src/
│   ├── components/  # Reusable UI components (common, generator, ui)
│   ├── hooks/       # Custom React hooks
│   ├── pages/       # Page components (UI, Generator, Mapper, etc.)
│   ├── services/    # API clients and data services
│   ├── types/       # TypeScript type definitions
│   ├── App.tsx      # Root component
│   └── main.tsx     # Entry point
├── index.html       # HTML template
├── tailwind.config.ts # Tailwind CSS configuration
└── vite.config.ts   # Vite configuration

🔍 Contact

If you encounter bugs, have feature requests:

• Open an issue: https://github.com/khanalsaroj/typegenctl/issues
• Maintainer: Khanal Saroj
• Email: waytosarojkhanal@gmail.com