Dial System Overview

Dial

dial-cliv0.0.25

Schema-Driven UI Control System

Dial automatically generates interactive UI controls from your TypeScript code. No manual UI building required!

How It Works

1️⃣

Annotate Your Code

Add JSDoc @dial annotations to your TypeScript interfaces to define UI controls

2️⃣

Generate Schema

Run dial-cli to automatically parse your code and generate UI schemas

3️⃣

Render Controls

Use DialProvider and DialPanel components to render interactive controls

Live Demo - Try It Now!

TypeScript Code with Dial Annotations:

interface Box3DProps {
  /**
   * Position in 3D space
   * @dial transform
   * @dial-dtype vector3
   * @dial-min -5 @dial-max 5 @dial-step 0.1
   * @dial-icon Move3d
   */
  position: [number, number, number];

  /**
   * Rotation angle
   * @dial transform
   * @dial-min 0 @dial-max 360 @dial-step 1
   * @dial-icon RotateCw
   */
  rotation: number;

  /**
   * Box color
   * @dial appearance
   * @dial-dtype color
   * @dial-icon Palette
   */
  color: string;

  // ... more properties
}

Generated Controls

transform

3D Position

Rotation

Scale

appearance

Color

Opacity

Visible

Cast Shadow

Live Preview

Lines of UI Code

Interactive Controls

100%

Auto-Generated

Key Features

⚡ Automatic Type Inference

The CLI automatically infers UI control types from TypeScript types. Booleans become toggles, numbers become sliders, tuples become vector inputs, and more.

🎨 Rich Control Types

Support for various control types including sliders, toggles, color pickers, vector inputs, dropdowns, and custom controls with constraints.

📦 Smart Grouping

Properties are automatically grouped into logical sections using @dial group tags, with support for custom layouts and styling.

🔄 Real-time Updates

Built-in state management with change callbacks allows seamless integration with your application for real-time updates.

Supported Annotations

The Dial system uses JSDoc annotations to configure UI controls:

Property Annotations

@dial <group> - Assign property to a group
@dial-dtype <type> - Specify data type (vector3, color, etc.)
@dial-min/max/step - Numeric constraints
@dial-label - Custom display label
@dial-icon - Lucide icon name
@dial-options - Dropdown options

Group Layout Annotations

@dial-group-layout - Layout type (grid/flex)
@dial-group-grid-cols - Number of grid columns
@dial-group-grid-rows - Number of grid rows
@dial-group-grid-flow - Grid flow direction
@dial-group-flex-wrap - Flex wrap behavior
@dial-group-flex-justify-content - Flex justify content

Architecture

📝

TypeScript Code

Interfaces with @dial annotations

→

⚙️

Dial CLI

Parses annotations and generates schemas

→

📄

Schema File

JSON schema with UI metadata

→

🔌

DialProvider

React context for state management

→

🎛️

DialPanel

Renders UI controls from schema

→

✨

Interactive UI

Live, type-safe control panel

📝