Free Online YAML !include Resolver and Mock Builder

Free Online YAML !include Resolver and Mock Builder
gemini-3.0-flash logogemini-3.0-flash

Easily resolve YAML !include tags, build mock data structures, and validate complex YAML configurations in your browser. A fast, secure, client-side YAML tool.

Built by@Akhenaten

What This App Does

Easily resolve YAML !include tags, build mock data structures, and validate complex YAML configurations in your browser. A fast, secure, client-side YAML tool. — generated by gemini-3.0-flash and published by @Akhenaten on Slopstore. Categorized under Utility, this app is part of Slopstore's curated collection of AI-generated tools and experiments. Run it free in your browser. No installation needed.

AI Generation Prompt

YAML Custom Tag !include Resolver Specification

Overview

A high-performance, client-side browser tool designed to parse YAML files containing non-standard !include tags. This utility allows users to define mock contents for these tags, resolves the hierarchy, merges the files, and validates the final YAML output.

Key Features

  • Mock Definitions: A side-panel interface to input paths (e.g., configs/base.yaml) and their corresponding YAML content.
  • Dynamic Resolver: Real-time processing of !include tags within the main editor to produce a flattened YAML view.
  • Syntax Validator: Automatic error detection on the final resolved output with line-number highlighting.
  • Formatting Tools: One-click "Pretty Print" to standardize indentation and styling.
  • Zero-Latency Processing: All operations occur instantly in-memory using highly optimized JavaScript YAML parsers.

UI/UX Layout

  • Header: Clean, centered title with a primary action button for "Resolve & Validate".
  • Main Tool Area (Three-Column Layout):
    • Left Column (Main File): The editor where the user pastes the parent YAML with !include tags.
    • Center Column (Mock Definitions): A dynamic list of key-value inputs where the key is the file path and the value is the mock content.
    • Right Column (Output): A read-only panel displaying the fully resolved and flattened YAML.
  • Status Bar: Displays "Valid" (Green) or "Invalid" (Red) status indicators based on the current parser state.

Visual Design & Aesthetics

  • Palette: A professional, SaaS-inspired light theme. Backgrounds in cool grey (#f8fafc), white cards with subtle box-shadows (#e2e8f0), primary action buttons in crisp blue (#2563eb), and text in slate grey (#334155).
  • Animations:
    • Smooth fade-in transitions when switching tabs.
    • Subtle button hover scaling (1.02x scale).
    • Collapsible panels that slide smoothly when resizing windows.
  • Typography: Clean sans-serif fonts (e.g., Inter or system-default UI fonts).

Technical Implementation Directives

  • Constraint Compliance:
    • Single File Only: All HTML, CSS, and JS must reside in one file.
    • No Storage: No use of localStorage, sessionStorage, or cookies. Maintain all data in volatile memory.
    • Sandboxed Compatibility: Avoid alert(), confirm(), or prompt(). Use custom, styled <div> or <dialog> modals for feedback.
    • Responsive Design: Use CSS Flexbox/Grid to stack columns on mobile devices and provide side-by-side editing on desktops.
  • Libraries: Utilize js-yaml from a CDN for robust parsing. Use Tailwind CSS for rapid, maintainable styling.
  • Performance: Ensure the input event listeners are debounced to prevent stuttering during large file parsing.

Spread the word

11Total Views
gemini-3.0-flash logogemini-3.0-flash
AI Model

Files being used

index.html
11.2 KB
#YAML include resolver#online YAML builder#YAML mock generator#free YAML validator#browser-based YAML parser#YAML !include handler#mock YAML data#YAML configuration tool

Frequently Asked Questions

Everything you need to know about using this application.

How do I resolve custom !include tags in YAML?

To resolve custom !include tags, simply paste your primary YAML configuration into our editor. You can then define the associated mock content in the side panel for each path mentioned in your !include statements, and the application will automatically merge them into a single, valid output. This process ensures that your multi-file YAML structures are flattened into a readable, coherent document. It is specifically designed for developers working on configuration management or infrastructure-as-code who need to visualize the final merged output before finalizing their deployments.

Is this YAML resolver secure to use with sensitive data?

Yes, this tool operates entirely on the client side. Your data never leaves your browser, and absolutely no server-side processing or storage occurs. We do not transmit your YAML files over the network, making it a secure choice for handling private or proprietary configuration files without the risk of data leakage. Because the processing occurs locally within your browser's memory, you can safely use this tool even in offline environments. We strictly avoid using local storage, cookies, or external databases, ensuring complete data privacy and security for every user session.

Can I mock complex, nested file structures?

Absolutely. You can define multiple mock files within our interface, and the resolver will map your !include commands to the corresponding mock content provided in the UI. You are free to create deep, nested structures to test how your logic handles hierarchical imports. This capability is particularly useful for debugging large configuration sets like Kubernetes manifests or environment templates where manual resolution is error-prone. By visualizing the final merged state, you can catch syntax errors or structural issues instantly, saving significant debugging time.

Does this tool provide validation for the resolved YAML?

Yes, once the !include tags are resolved and the files are merged, our engine performs a real-time syntax validation check on the resulting output. If the merged YAML contains any indentation or structural errors, the tool will highlight the problematic lines, allowing you to quickly rectify syntax issues. This dual functionality—merging and validating—streamlines your development workflow. You no longer need to switch between different tools to parse your custom tags and verify the final syntax, as this application provides an all-in-one environment for your configuration testing needs.

Related Applications

Discover more free AI apps on Slopstore — the community platform for hosting AI-generated web applications.