feat: add YAML support

apps/vscode/esbuild.mjs

@@ -10,6 +10,7 @@ const isWatch = process.argv.includes("--watch");
 const workspaceAliases = {
   "@visual-json/core": path.resolve(__dirname, "../../packages/@visual-json/core/src/index.ts"),
   "@visual-json/react": path.resolve(__dirname, "../../packages/@visual-json/react/src/index.ts"),
+  "@visual-json/yaml": path.resolve(__dirname, "../../packages/@visual-json/yaml/src/index.ts"),
 };
 
 /** @type {import('esbuild').BuildOptions} */

apps/vscode/package.json

@@ -29,6 +29,12 @@
           },
           {
             "filenamePattern": "*.jsonc"
+          },
+          {
+            "filenamePattern": "*.yaml"
+          },
+          {
+            "filenamePattern": "*.yml"
           }
         ],
         "priority": "option"
@@ -40,7 +46,7 @@
           "type": "webview",
           "id": "visualJson.panel",
           "name": "visual-json",
-          "when": "resourceLangId == json || resourceLangId == jsonc"
+          "when": "resourceLangId == json || resourceLangId == jsonc || resourceLangId == yaml"
         }
       ]
     },
@@ -62,6 +68,7 @@
   "dependencies": {
     "@visual-json/core": "workspace:*",
     "@visual-json/react": "workspace:*",
+    "@visual-json/yaml": "workspace:*",
     "jsonc-parser": "^3.3.1"
   },
   "devDependencies": {

apps/vscode/src/custom-editor-provider.ts

@@ -1,12 +1,20 @@
 import * as vscode from "vscode";
 import { resolveSchema } from "@visual-json/core";
 import { parse as parseJsonc } from "jsonc-parser";
+import { isYamlFile, parseYamlContent } from "@visual-json/yaml";
 import {
   getWebviewHtml,
   type HostToWebviewMessage,
   type WebviewToHostMessage,
 } from "./webview-utils";
 
+function parseContent(text: string, filename: string): unknown {
+  if (isYamlFile(filename)) {
+    return parseYamlContent(text);
+  }
+  return parseJsonc(text);
+}
+
 export class VisualJsonEditorProvider
   implements vscode.CustomTextEditorProvider
 {
@@ -32,9 +40,9 @@ export class VisualJsonEditorProvider
     );
 
     let suppressNextEdit = false;
+    const filename = document.uri.path.split("/").pop() ?? "file.json";
 
     const sendContent = () => {
-      const filename = document.uri.path.split("/").pop() ?? "file.json";
       const msg: HostToWebviewMessage = {
         type: "setContent",
         json: document.getText(),
@@ -68,8 +76,11 @@ export class VisualJsonEditorProvider
           }
           case "requestSchema": {
             try {
-              const parsed = parseJsonc(msg.json);
-              const schema = await resolveSchema(parsed, msg.filename);
+              const parsed = parseContent(msg.json, msg.filename);
+              const schema = await resolveSchema(
+                parsed as Parameters<typeof resolveSchema>[0],
+                msg.filename,
+              );
               const result: HostToWebviewMessage = {
                 type: "schemaResult",
                 schema,

apps/vscode/src/extension.ts

@@ -31,7 +31,8 @@ export function activate(context: vscode.ExtensionContext) {
       if (
         activeEditor &&
         (activeEditor.document.languageId === "json" ||
-          activeEditor.document.languageId === "jsonc")
+          activeEditor.document.languageId === "jsonc" ||
+          activeEditor.document.languageId === "yaml")
       ) {
         vscode.commands.executeCommand(
           "vscode.openWith",
@@ -40,7 +41,7 @@ export function activate(context: vscode.ExtensionContext) {
         );
       } else {
         vscode.window.showInformationMessage(
-          "Open a JSON file first to use visual-json.",
+          "Open a JSON or YAML file first to use visual-json.",
         );
       }
     }),

apps/vscode/src/panel-provider.ts

@@ -1,6 +1,7 @@
 import * as vscode from "vscode";
 import { resolveSchema } from "@visual-json/core";
 import { parse as parseJsonc } from "jsonc-parser";
+import { isYamlFile, parseYamlContent } from "@visual-json/yaml";
 import {
   getWebviewHtml,
   type HostToWebviewMessage,
@@ -55,7 +56,9 @@ export class VisualJsonPanelProvider implements vscode.WebviewViewProvider {
           }
           case "requestSchema": {
             try {
-              const parsed = parseJsonc(msg.json);
+              const parsed = isYamlFile(msg.filename)
+                ? parseYamlContent(msg.json)
+                : parseJsonc(msg.json);
               const schema = await resolveSchema(parsed, msg.filename);
               const result: HostToWebviewMessage = {
                 type: "schemaResult",
@@ -109,7 +112,8 @@ export class VisualJsonPanelProvider implements vscode.WebviewViewProvider {
     if (
       !editor ||
       (editor.document.languageId !== "json" &&
-        editor.document.languageId !== "jsonc")
+        editor.document.languageId !== "jsonc" &&
+        editor.document.languageId !== "yaml")
     ) {
       this.currentDocumentUri = undefined;
       return;

apps/vscode/webview/App.tsx

@@ -8,6 +8,11 @@ import {
 import type { JsonValue, JsonSchema } from "@visual-json/core";
 import { JsonEditor } from "@visual-json/react";
 import { parse as parseJsonc } from "jsonc-parser";
+import {
+  isYamlFile,
+  parseYamlContent,
+  stringifyYamlContent,
+} from "@visual-json/yaml";
 import { vscode } from "./vscode";
 
 const VSCODE_THEME_STYLE: CSSProperties = {
@@ -66,6 +71,7 @@ export function App() {
   const suppressEditRef = useRef(false);
   const lastJsonRef = useRef<string>("");
   const editTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const filenameRef = useRef<string>("file.json");
 
   useEffect(() => {
     const handler = (event: MessageEvent<HostMessage>) => {
@@ -79,7 +85,10 @@ export function App() {
           try {
             if (msg.json === lastJsonRef.current) return;
             lastJsonRef.current = msg.json;
-            const parsed = parseJsonc(msg.json);
+            filenameRef.current = msg.filename;
+            const parsed = isYamlFile(msg.filename)
+              ? parseYamlContent(msg.json)
+              : parseJsonc(msg.json);
             setJsonValue(parsed);
             setParseError(null);
 
@@ -89,7 +98,9 @@ export function App() {
               filename: msg.filename,
             });
           } catch (err) {
-            setParseError(err instanceof Error ? err.message : "Invalid JSON");
+            setParseError(
+              err instanceof Error ? err.message : "Invalid content",
+            );
           }
           break;
         }
@@ -111,7 +122,9 @@ export function App() {
     setJsonValue(value);
     if (editTimerRef.current !== null) clearTimeout(editTimerRef.current);
     editTimerRef.current = setTimeout(() => {
-      const json = JSON.stringify(value, null, 2);
+      const json = isYamlFile(filenameRef.current)
+        ? stringifyYamlContent(value)
+        : JSON.stringify(value, null, 2);
       lastJsonRef.current = json;
       suppressEditRef.current = true;
       vscode.postMessage({ type: "edit", json });
@@ -122,7 +135,7 @@ export function App() {
     return (
       <div className="visual-json-error">
         <div className="error-icon">!</div>
-        <div className="error-title">Cannot parse JSON</div>
+        <div className="error-title">Cannot parse file</div>
         <div className="error-message">{parseError}</div>
       </div>
     );
@@ -131,7 +144,7 @@ export function App() {
   if (jsonValue === null) {
     return (
       <div className="visual-json-loading">
-        <span>Loading JSON...</span>
+        <span>Loading...</span>
       </div>
     );
   }

apps/web/playwright.config.ts

@@ -17,7 +17,8 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: "portless visual-json next dev --turbopack",
+    command:
+      "portless proxy start --no-tls -p 1355 && portless visual-json next dev --turbopack",
     url: "http://visual-json.localhost:1355",
     reuseExistingServer: !process.env.CI,
   },

packages/@visual-json/core/src/schema.ts

@@ -17,6 +17,36 @@ const KNOWN_SCHEMAS: Record<string, string> = {
   "nest-cli.json": "https://json.schemastore.org/nest-cli",
   "vercel.json": "https://openapi.vercel.sh/vercel.json",
   ".swcrc": "https://json.schemastore.org/swcrc",
+
+  // YAML
+  "docker-compose.yml": "https://json.schemastore.org/docker-compose.json",
+  "docker-compose.yaml": "https://json.schemastore.org/docker-compose.json",
+  ".gitlab-ci.yml": "https://json.schemastore.org/gitlab-ci.json",
+  "mkdocs.yml": "https://json.schemastore.org/mkdocs-1.0.json",
+  ".pre-commit-config.yaml":
+    "https://json.schemastore.org/pre-commit-config.json",
+  "pubspec.yaml": "https://json.schemastore.org/pubspec.json",
+  ".eslintrc.yml": "https://json.schemastore.org/eslintrc.json",
+  ".eslintrc.yaml": "https://json.schemastore.org/eslintrc.json",
+  ".prettierrc.yml": "https://json.schemastore.org/prettierrc.json",
+  ".prettierrc.yaml": "https://json.schemastore.org/prettierrc.json",
+  ".travis.yml": "https://json.schemastore.org/travis.json",
+  "appveyor.yml": "https://json.schemastore.org/appveyor.json",
+  "cloudbuild.yaml": "https://json.schemastore.org/cloudbuild.json",
+  "serverless.yml": "https://json.schemastore.org/serverlessframework.json",
+  "serverless.yaml": "https://json.schemastore.org/serverlessframework.json",
+  "pnpm-workspace.yaml": "https://json.schemastore.org/pnpm-workspace.json",
+};
+
+const KNOWN_YAML_GLOBS: Record<string, string> = {
+  ".github/workflows/*.yml":
+    "https://json.schemastore.org/github-workflow.json",
+  ".github/workflows/*.yaml":
+    "https://json.schemastore.org/github-workflow.json",
+  ".github/actions/*/action.yml":
+    "https://json.schemastore.org/github-action.json",
+  ".github/actions/*/action.yaml":
+    "https://json.schemastore.org/github-action.json",
 };
 
 const MAX_SCHEMA_CACHE = 50;
@@ -62,6 +92,16 @@ export async function resolveSchema(
     if (knownUrl) {
       return fetchSchema(knownUrl);
     }
+
+    // Glob patterns for YAML files (e.g. .github/workflows/*.yml)
+    for (const [pattern, url] of Object.entries(KNOWN_YAML_GLOBS)) {
+      const regex = new RegExp(
+        "^" + pattern.replace(/\*/g, "[^/]+").replace(/\//g, "\\/") + "$",
+      );
+      if (regex.test(filename)) {
+        return fetchSchema(url);
+      }
+    }
   }
 
   return null;

packages/@visual-json/yaml/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@visual-json/yaml",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "YAML support for visual-json — parse, serialize, and schema-detect YAML files.",
+  "keywords": [
+    "yaml",
+    "editor",
+    "visual-json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write \"**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "@visual-json/core": "workspace:*",
+    "yaml": "^2.7.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "5.9.3"
+  }
+}