TypeDialog/examples

TypeDialog Examples

Complete example collection organized by feature category and backend implementation.

Quick Start

First Time?

Start here: 01-basic/

# Run a simple form
cargo run --example form

# Or with a specific backend
cargo run -p typedialog-tui --example form_with_autocompletion

Example Categories

1. Basic Forms → 01-basic/

Simple form structures for getting started.

• Form fundamentals
• Sections and grouping
• Basic validation
• Best for: Learning the syntax, quick prototypes

2. Advanced Features → 02-advanced/

Conditional logic, dynamic fields, complex forms.

• Conditional visibility
• Required field rules
• State management
• Best for: Complex workflows, conditional UX

3. Styling & Appearance → 03-styling/

Custom borders, themes, and visual design.

• Border styles
• Visual hierarchy
• Theme customization
• Best for: CLI aesthetics, branded interfaces

4. Backend-Specific → 04-backends/

Implementation details for each backend.

Backend	Path	Best For
CLI	04-backends/cli/	Scripting, server tools, pipes
TUI	04-backends/tui/	Interactive terminal apps, dashboards
Web	04-backends/web/	SaaS, public forms, browsers

Running forms by backend:

# CLI (default)
cargo run --example form

# TUI
cargo run -p typedialog-tui --example form_with_autocompletion

# Web
cargo run -p typedialog-web -- --config form.toml

5. Fragments & Composition → 05-fragments/

Reusable components and form composition.

• Fragment templates
• Includes and inheritance
• Component libraries
• Array management with RepeatingGroup fields (add/edit/delete)
• Unique item validation - prevent duplicate entries in arrays (all backends: CLI, TUI, Web)
• min/max items constraints - enforce array size limits
• Best for: Large projects, DRY principle, multiple forms, collections with constraints

Key examples:

• array-trackers.toml - UDP/HTTP tracker arrays with unique = true
• fragments/tracker-udp-item.toml - UDP listener item structure
• fragments/tracker-http-item.toml - HTTP listener item structure

Testing RepeatingGroups:

# CLI - Interactive menu with add/edit/delete
cargo run --example array_trackers

# TUI - Split-pane interface with keyboard shortcuts
cargo run -p typedialog-tui --example array_trackers

# Web - Inline expandable cards with live counter
cargo run -p typedialog-web -- --config examples/05-fragments/array-trackers.toml

6. Integrations → 06-integrations/

External tool integrations.

Integration	Path
Nickel (Type-safe schemas)	06-integrations/nickel/
i18n (Multi-language)	06-integrations/i18n/

7. Nickel Schema Generation → 07-nickel-generation/

Nickel type-safe schemas with TypeDialog form integration.

• Array(Record) types for collections
• RepeatingGroup field mapping to Nickel arrays
• Complex schema structures
• Best for: Type-safe configuration, validation, schema-driven forms

Key examples:

• arrays-schema.ncl - Complete schema with Array types
• arrays-form.toml - Form with RepeatingGroup arrays
• Fragments for: api-endpoint-item.toml, user-item.toml

9. Real-World Templates → 09-templates/

Production-ready examples for common use cases.

Template	Path	Use Case
Employee Onboarding	09-templates/employee_onboarding/	HR systems
User Registration	09-templates/user_registration/	SaaS, apps
Library Catalog	09-templates/library_catalog/	Management systems

Learning Path

START HERE
    ↓
01-basic/ ← Understand form structure
    ↓
02-advanced/ ← Add conditional logic
    ↓
03-styling/ ← Customize appearance
    ↓
04-backends/ ← Choose your backend
    ├→ 04-backends/cli/ ← Scripting
    ├→ 04-backends/tui/ ← Interactive UX
    └→ 04-backends/web/ ← Web deployment
    ↓
05-fragments/ ← Scale to multiple forms
    ├→ array-trackers.toml ← Manage collections with RepeatingGroup
    │
06-integrations/ ← Advanced integrations
    ├→ Nickel schemas
    └→ i18n translations
    ↓
07-nickel-generation/ ← Type-safe schemas with arrays
    ├→ arrays-schema.ncl ← Array(Record) types
    └→ arrays-form.toml ← RepeatingGroup fields
    ↓
09-templates/ ← Deploy to production

Common Tasks

Run a Basic Example

cargo run --example form

Try Different Backends

# CLI
cargo run --example form

# TUI
cargo run -p typedialog-tui --example tui_survey_form

# Web
cargo run -p typedialog-web -- --config examples/04-backends/web/web_registration_form.toml

Use with TOML Configuration

cargo run -p typedialog-web -- --config examples/01-basic/form_with_sections.toml

Use with Rust Code

cargo run --example form_with_autocompletion

Test Conditional Logic

cargo run --example conditional_required_demo

Try Multi-Language Support

LANG=es cargo run --example test_i18n_form

File Types

TOML (.toml)

Configuration-driven forms - fastest iteration.

cargo run -p typedialog-web -- --config form.toml

Rust (.rs)

Programmatic forms - maximum control.

cargo run --example form_example

Nickel (.ncl)

Type-safe schema generation.

nickel eval schema.ncl > form.toml

Backend Compatibility

Feature	CLI	TUI	Web
TOML forms	✓	✓	✓
Rust code	✓	✓	-
Conditional fields	✓	✓	✓
Autocompletion	✓	✓	✓
Custom styling	-	✓	✓
Validation	✓	✓	✓
i18n support	✓	✓	✓
Fragments	✓	✓	✓

Tips

For CLI Forms

• Use for scripts and automation
• Good for piping between tools
• Minimal dependencies

For TUI Forms

• Create interactive dashboards
• Better UX than CLI
• Keyboard shortcuts available
• Mouse support

For Web Forms

• Public-facing forms
• Rich styling options
• Browser validation
• Mobile-friendly
• RESTful API integration

Troubleshooting

"Example not found"

• Check example is in examples/ directory
• Use --example flag with cargo

"Feature not compiled"

• Run: cargo build --all-features
• Check feature flags in Cargo.toml

"Form not displaying"

• For web: Check terminal output for port
• For TUI: Ensure terminal supports the feature
• For CLI: Check input/output redirection

Next Steps

1. Read the category README for your use case
2. Copy and modify an example form
3. Consult 06-integrations/ for advanced features
4. Deploy a template from 09-templates/
5. Integrate with your application

Contributing Examples

To add new examples:

1. Create in appropriate category
2. Add README explaining the example
3. Include usage instructions
4. List features demonstrated
5. Provide expected output

---

Start with: 01-basic/README.md Need specific backend? Check 04-backends/ Want real-world example? See 09-templates/