DevUI - Development Tools UI

An Axum router that adds a /dev/ui route to your Axum application, serving a React-based development tools interface.

Features

• 🛠️ Axum Router: Native Axum router that can be nested into your existing Axum application
• ⚛️ React SPA: Modern React TypeScript single-page application
• 🚀 Axum Integration: Built specifically for Axum applications
• 📱 Responsive UI: Modern, clean interface for development tools
• 🔧 Embedded Assets: React app is embedded in the Rust binary at compile time

Screenshots

DevUI Home Dashboard

The DevUI home page provides an overview of all available development tools and services.

SQL Editor - Table Browser

Browse and explore database tables with automatic schema discovery. View table relationships, column types, and foreign key constraints.

SQL Editor - Data Viewer

View table data with advanced filtering, pagination, and foreign key navigation. Supports all PostgreSQL data types.

Installation

Add to your Cargo.toml

Add devui to your project dependencies:

[dependencies]
devui = "0.0"  # Check https://crates.io/crates/devui for the latest version
axum = "0.8"
tokio = { version = "1.0", features = ["full"] }
tower-http = { version = "0.6", features = ["cors"] }
tracing-subscriber = "0.3"

Note: Use devui = "0.0" to automatically get the latest patch version (0.0.x), or specify an exact version like devui = "0.0.1". Check crates.io/crates/devui for the latest available version.

Quick Start

1. Register the DevUI Router

Import the necessary types and register the DevUI router in your Axum application:

use axum::{response::Html, routing::get, Router};
use devui::{
    dev_ui_router, DevUIConfigBuilder, PostgresConfig, SqlConfig,
};
use tower_http::cors::CorsLayer;

#[tokio::main]
async fn main() {
    // Initialize tracing
    tracing_subscriber::fmt::init();

    // Configure SQL databases (optional)
    let sql_config = SqlConfig::new()
        .with_postgres(
            "my-database".to_string(),
            PostgresConfig {
                host: "localhost".to_string(),
                port: 5432,
                database: "mydb".to_string(),
                username: "postgres".to_string(),
                password: "password".to_string(),
                ssl_mode: Some("disable".to_string()),
            },
        );

    // Build DevUI configuration
    let dev_ui_config = DevUIConfigBuilder::default()
        .sql_config(sql_config)
        .build()
        .expect("Error building dev ui config");

    // Create DevUI router
    let dev_ui_router = dev_ui_router(dev_ui_config)
        .await
        .expect("error constructing dev_ui_router");

    // Create your main application router
    let app = Router::new()
        .route("/", get(|| async {
            Html("<h1>Welcome to My App!</h1><p>Visit <a href='/dev/ui'>/dev/ui</a> for development tools.</p>")
        }))
        // Nest the DevUI router at /dev/ui
        .nest("/dev/ui", dev_ui_router)
        .layer(CorsLayer::permissive());

    // Start the server
    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    println!("🚀 Server starting on http://localhost:3000");
    println!("🛠️  DevUI: http://localhost:3000/dev/ui");
    axum::serve(listener, app).await.unwrap();
}

2. Access your development tools

Once your server is running, visit:

• Main app: http://localhost:3000/
• DevUI: http://localhost:3000/dev/ui

Running the Example

The project includes a complete example with a sample PostgreSQL database. Follow these steps:

Prerequisites

• Docker and Docker Compose installed
• Rust installed

Step 1: Start the Sample Database

The example uses a Docker Compose setup with PostgreSQL containing sample relational data:

# Navigate to the standalone example directory
cd standalone-example

# Start PostgreSQL with sample data
docker-compose up -d

# Verify the database is running
docker-compose ps

The database will be initialized with:

• Database: devui_sample_db
• User: devui_user
• Password: devui_password
• Port: 5432

Sample tables include:

• users - User accounts with email and profile information
• products - Product catalog with categories
• categories - Hierarchical category structure
• orders - Customer orders
• order_items - Order line items (junction table)

All tables contain sample data with proper foreign key relationships.

Step 2: Run the Example Server

# Run the example server (from standalone-example directory)
cargo run

The server will start on http://localhost:3000 with:

• Main application at /
• DevUI interface at /dev/ui
• SQL editor at /dev/ui/sql

Step 3: Explore the DevUI

1. Open your browser and navigate to http://localhost:3000/dev/ui
2. Click on the SQL service to explore the sample database
3. Browse tables, view data, and execute queries on the sample relational data

Cleaning Up

When you're done, stop the database:

# Stop and remove containers (from standalone-example directory)
docker-compose down

# Remove volumes (optional - removes all data)
docker-compose down -v

How it works

The dev_ui_router function:

1. Creates an Axum router with /dev/ui routes
2. Serves the React SPA for non-API routes at /dev/ui (assets embedded at compile time)
3. Handles API endpoints for backend communication at /dev/ui/api
4. Nests into your existing Axum application router

Embedded Frontend Assets

The React frontend is embedded into the Rust binary at compile time using rust_embed. This means:

• ✅ No filesystem dependencies: The library doesn't require a separate frontend/dist directory at runtime
• ✅ Self-contained: All frontend assets are bundled with the library
• ✅ Included in published package: The frontend/dist folder is included in the published crate source
• ✅ Works out of the box: Just add the dependency and use it—no additional setup needed

Architecture

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   HTTP Request  │───▶│  Axum Router     │───▶│  DevUI Router   │
└─────────────────┘    │  (Your App)      │    │  (/dev/ui)      │
                       └──────────────────┘    └─────────────────┘
                              │                         │
                              │                         ▼
                              │                  ┌──────────────────┐
                              │                  │  React SPA       │
                              │                  │  + API endpoints │
                              │                  └──────────────────┘
                              │
                              ▼
                       ┌──────────────────┐
                       │  Your Routes     │
                       └──────────────────┘

Available Development Tools

PostgreSQL SQL Management

Comprehensive PostgreSQL database management - Explore, query, and manage PostgreSQL databases with a rich set of features:

• 🗄️ Schema Exploration: Automatic discovery of tables, columns, and relationships
• 🔍 Advanced Filtering: Type-aware filters with support for all PostgreSQL data types
• 🔗 Foreign Key Navigation: One-click navigation through foreign key relationships
• 📄 Pagination: Efficient server-side pagination for large datasets
• 🎨 Modern UI: Responsive interface with rich metadata display

📖 See full PostgreSQL features documentation

Future Development Tools

The interface is designed to be extensible with tools like:

• Kafka UI: Publish and Consume kafka topics
• API Explorer: Test and explore API endpoints
• Log Viewer: View and search application logs
• Metrics Dashboard: Monitor application performance

License

MIT