Какие библиотеки JavaScript помогут редактировать YAML файлы в браузере?

Оффтоп javascript
1

Задача с редактированием YAML

Мне нужно создать веб-редактор для работы с YAML файлами. Основные требования:

  • Возможность изменять существующие записи
  • Добавление новых элементов в структуру
  • Универсальность для любых YAML документов

Пытаюсь найти подходящие npm пакеты или готовые решения. Важно чтобы все работало в браузере, а не только в Node.js.

Пример структуры которую нужно редактировать:

configuration:
  database:
    host: localhost
    port: 5432
  features:
    - authentication
    - logging
settings:
  debug: true

Какие инструменты лучше использовать для такой задачи? Может есть готовые компоненты для React или Vue?

2

Недавно делал похожую штуку, попробуй yaml пакет вместо js-yaml - он полегче и работает быстрее на больших файлах. А для UI рекомендую react-ace если на React сидишь, там yaml режим из коробки есть. Еще можешь глянуть на @monaco-editor/react - это обертка над Monaco, интегрируется проще чем чистый Monaco. Главное не забудь валидацию добавить после каждого изменения, а то пользователи любят синтаксис ломать.

3

Для работы с yaml в браузере отлично подходит js-yaml - это проверенная временем библиотека. Она позволяет парсить и сериализовать yaml документы без проблем. Из личного опита могу сказать что она стабильно работает даже со сложными структурами. Если нужен готовый редактор, то стоит посмотреть на Monaco Editor от Microsoft - у него есть поддержка yaml с подсветкой синтаксиса. Правда настройка может показаться сложноватой поначалу, но результат того стоит. Для простых случаев можно обойтись обычным textarea + js-yaml для валидации.

4

А ты рассматривал yaml-js или даже CodeMirror с yaml модом? Просто интересно какой уровень сложности у твоих конфигов будет - от этого зависит выбор решения. Если структуры простые, то можно даже самописный редактор на обычных input полях сделать.