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

📂 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