Repository navigation
YAML counterpart: visual-yaml #26
Description
Hey! 👋
First off, great work on visual-json — the schema-aware tree/form editing approach is really well done.
I've been building visual-yaml, a YAML counterpart inspired by this project. It follows a similar architecture (headless core + framework UI packages) but adds YAML-specific features:
- Full YAML support: comments, anchors & aliases, scalar styles, collection styles
- Tree + Form split-panel editor with resizable sidebar
- Drag-and-drop reordering
- Search across keys, values, and comments
- Structural diff view
- Undo / redo history
- JSON Schema validation and auto-detection (GitHub Actions, Docker Compose, GitLab CI, Kubernetes, etc.)
- Dark mode
The core package is headless (@visual-yaml/core) with a React UI layer (@visual-yaml/react), mirroring visual-json's separation of concerns.
I wanted to open this issue to:
- Give credit and say thanks for the inspiration
- Ask whether a YAML counterpart was ever considered for this repo or if keeping them as separate projects makes more sense
- See if there's any interest in cross-pollinating ideas or sharing an ecosystem (e.g., shared schema validation logic)
Happy to hear your thoughts!
Activity
ctate commentedon Mar 17, 2026
Hey @lucianfialho - yes absolutely. visual-json is meant to handle any data structure format. JSON is just the most instantly recognizable 🙂
lucianfialho commentedon Mar 18, 2026
Hey @ctate, thanks for the response! That's great to hear.
I've been working on a YAML adapter that follows the same architecture — the tree model is already format-agnostic, so it's really just about adding
fromYaml/toYamlat the parse/serialize boundary.I'll put together a PR with:
core/src/yaml.ts—fromYaml()andtoYaml()adapters using theyamllibrarycore/index.ts— so consumers can use both JSON and YAML*.yaml/*.ymlto file patterns with format detectionThe operations layer (setValue, moveNode, etc.) stays completely untouched since it's already generic.
I'll have the PR up soon!
lucianfialho commentedon Mar 18, 2026
PR is up! → #29
Kept it minimal — the tree model is already format-agnostic so it's just a thin adapter layer at the parse/serialize boundary. YAML schemas (Docker Compose, GitHub Actions, GitLab CI, etc.) are included too.
Let me know if you'd like any changes.