Skip to content

feat: add Tailcall Config Generator UI with dynamic schema-driven form#610

Open
visq97 wants to merge 1 commit into
tailcallhq:developfrom
visq97:feat/config-generator-ui
Open

feat: add Tailcall Config Generator UI with dynamic schema-driven form#610
visq97 wants to merge 1 commit into
tailcallhq:developfrom
visq97:feat/config-generator-ui

Conversation

@visq97
Copy link
Copy Markdown

@visq97 visq97 commented May 26, 2026

Summary

This PR adds a Tailcall Config Generator UI — a visual, schema-driven form for generating valid Tailcall Runtime Configuration files.

What's New

  • /config-generator — standalone page with the full config generator
  • /playground — now has two tabs: "GraphQL Playground" (existing) and "Config Generator" (new)
  • /app/config — redirects to /config-generator

Features

  • Dynamically loads the official Tailcall config schema from tailcallhq/tailcall main branch
  • Tabbed interface: Server, Upstream, Telemetry, Links
  • Searchable dropdowns for enum fields (HTTP version, link types, telemetry exporters, etc.)
  • Toggle switches for boolean fields
  • Number inputs with min/max validation
  • Nested object support (e.g., batch settings, headers, CORS)
  • Array support with add/remove (e.g., links, allowed headers)
  • Key-value pair editor for free-form objects (e.g., vars, custom headers)
  • Live preview of generated config in the right panel
  • Output in YAML or JSON format
  • Download as .yml or .json file
  • Copy to clipboard button
  • Reset to defaults
  • Dark theme matching Tailcall's design system
  • Fully responsive

Technical Details

  • Built with React 18 + TypeScript (matches existing stack)
  • Uses react-select for searchable dropdowns
  • Uses js-yaml for YAML serialization
  • Uses file-saver for download functionality
  • No heavy form libraries — custom lightweight form renderer for full control over UX
  • Schema is fetched at runtime from the official Tailcall repo

Testing

  • Build passes: npx docusaurus build
  • TypeScript: no errors in new code ✅

/claim #373

- Add /config-generator page with dynamic schema-driven form
- Integrate as tab in existing /playground page
- Add /app/config redirect to /config-generator
- Supports JSON and YAML output with download/copy
- Dynamically loads Tailcall config schema from main repo
- Searchable dropdowns for enum fields
- Nested object and array support
- Dark theme matching Tailcall design system

Closes tailcallhq#373
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant