ioflux-org · itvi-1234 · Jun 26, 2026
diff --git a/.changeset/multi-type-schema-support.md b/.changeset/multi-type-schema-support.md
@@ -0,0 +1,7 @@
+---
+"json-schema-studio": patch
+---
+
+Fix: Handle multi-type schemas in node type inference
+
+Multi-type schemas (like `["string", "null"]`) were previously failing type inference and falling back to a default "others" node style. The type inference logic has been updated to pick the first non-null type from the array to determine the node's visual style.
diff --git a/src/components/CustomReactFlowNode.tsx b/src/components/CustomReactFlowNode.tsx
@@ -1,5 +1,6 @@
 import { Handle } from "@xyflow/react";
 import type { RFNodeData } from "../utils/processAST";
+import { neonColors } from "../utils/processAST";
 import { useContext, useLayoutEffect, useRef, useState } from "react";
 import { AppContext } from "../contexts/AppContext";
 
@@ -30,25 +31,26 @@ const CustomNode = ({ data, id, selected }: { data: RFNodeData; id: string; sele
     setHandleOffsets(offsets);
   }, [data.nodeData]);
 
+  const { color } = data.nodeStyle;
+
   return (
     <div
       className={`
-        ${
-          data.isBooleanNode
-            ? "rounded-2xl text-center overflow-hidden"
-            : "rounded"
+        ${data.isBooleanNode
+          ? "rounded-2xl text-center overflow-hidden"
+          : "rounded"
         }
         relative transition-shadow duration-300 text-sm bg-[var(--node-bg-color)] text-[var(--text-color)]
         min-w-[100px] max-w-[400px] hover:shadow-[0_0_10px_var(--color)]
         ${/* Change 25: Apply visual highlighting (shadow and ring) when node is selected */ ""}
         ${selected ? "shadow-[0_0_15px_var(--color)] ring-2 ring-[var(--color)]" : ""}
       `}
       style={{
-        ["--color" as string]: data.nodeStyle.color,
+        ["--color" as string]: color,
         border:
           theme === "dark"
-            ? `1px solid ${data.nodeStyle.color}`
-            : `1px solid color-mix(in srgb, ${data.nodeStyle.color} 80%, black)`,
+            ? `1px solid ${color}`
+            : `1px solid color-mix(in srgb, ${color} 80%, black)`,
         wordBreak: "break-word",
       }}
     >
@@ -64,12 +66,12 @@ const CustomNode = ({ data, id, selected }: { data: RFNodeData; id: string; sele
       <div
         className="px-2 font-semibold"
         style={{
-          background: `${data.nodeStyle.color}50`,
-          borderBottom: `1px solid ${data.nodeStyle.color}`,
+          background: `${color}50`,
+          borderBottom: `1px solid ${color}`,
           color:
             theme === "dark"
-              ? data.nodeStyle.color
-              : `color-mix(in srgb, ${data.nodeStyle.color} 60%, black)`,
+              ? color
+              : `color-mix(in srgb, ${color} 60%, black)`,
         }}
       >
         {data.nodeLabel}
@@ -96,19 +98,28 @@ const CustomNode = ({ data, id, selected }: { data: RFNodeData; id: string; sele
               </span>
 
               {isArray ? (
-                <div className="flex-col w-full">
-                  {(keyData.value as string[]).map((item, index) => (
-                    <div
-                      ref={(el) => {
-                        rowRefs.current[`${id}-${item}`] = el;
-                      }}
-                      key={index}
-                      className="px-2 py-[2px] bg-[var(--node-value-bg-color)]"
-                      style={{ border: `1px solid ${data.nodeStyle.color}30` }}
-                    >
-                      {item}
-                    </div>
-                  ))}
+                <div className="flex-col w-full gap-1 flex py-1">
+                  {(keyData.value as string[]).map((item, index) => {
+                    const itemColor = key === "type" && item in neonColors
+                      ? neonColors[item as keyof typeof neonColors]
+                      : null;
+                    return (
+                      <div
+                        ref={(el) => {
+                          rowRefs.current[`${id}-${item}`] = el;
+                        }}
+                        key={index}
+                        className={`px-2 py-[2px] ${itemColor ? "rounded text-center font-medium shadow-sm" : "bg-[var(--node-value-bg-color)]"}`}
+                        style={{
+                          border: itemColor ? `1px solid ${itemColor}` : `1px solid ${color}30`,
+                          backgroundColor: itemColor ? `${itemColor}33` : undefined,
+                          color: itemColor ? (theme === "dark" ? itemColor : `color-mix(in srgb, ${itemColor} 60%, black)`) : undefined,
+                        }}
+                      >
+                        {item}
+                      </div>
+                    );
+                  })}
                 </div>
               ) : (
                 <span

diff --git a/src/utils/inferSchemaType.ts b/src/utils/inferSchemaType.ts
@@ -37,9 +37,22 @@ const refKeyword = new Set([
     "$ref"
 ]);
 
-export const inferSchemaType = (nodeData: GraphNode["data"]["nodeData"]): [string, string] => {
-    if (typeof nodeData.type?.value === "string") {
-        return ["objectSchema", nodeData.type.value as string];
+export const inferSchemaType = (nodeData: GraphNode["data"]["nodeData"]): [string, string, string[]?] => {
+    const typeValue = nodeData.type?.value;
+
+    if (typeof typeValue === "string") {
+        return ["objectSchema", typeValue];
+    }
+
+    if (Array.isArray(typeValue)) {
+        let primaryType = "others";
+        for (const t of typeValue as string[]) {
+            if (t !== "null") {
+                primaryType = t;
+                break;
+            }
+        }
+        return ["multiType", primaryType, typeValue as string[]];
     }
 
     const hasAnyKeyword = (keywords: Set<string>) => {

diff --git a/src/utils/processAST.ts b/src/utils/processAST.ts
@@ -32,7 +32,7 @@ export type RFNodeData = {
 }
 
 type NodeStyle = {
-    color: string
+    color: string;
 }
 
 export type GraphEdge = RFEdge & {
@@ -80,7 +80,7 @@ type GenerateSourceHandles = (key: string | undefined, value: unknown, nodeId: s
 type UpdateNode = (node: UnpositionedGraphNode, update: UpdateNodeOptionalParameters) => void;
 
 
-const neonColors = {
+export const neonColors = {
     string: "#FF6EFF", // neon magenta
     number: "#00FF95", // neon mint
     integer: "#00FF95", // neon mint
@@ -91,6 +91,7 @@ const neonColors = {
     booleanSchemaTrue: "#12FF4B", // neon green
     booleanSchemaFalse: "#FF3B3B", // neon red 
     reference: "#FFE1BD", // soft neon cream
+    multiType: "#FF007F", // neon rose 
     others: "#CCCCCC", // soft gray
 };
 
@@ -157,7 +158,8 @@ export const processAST: ProcessAST = ({ ast, schemaUri, nodes, edges, parentId,
     }
 
     const getColor = (nodeData: NodeData) => {
-        const [, definedFor] = inferSchemaType(nodeData);
+        const [schemaType, definedFor] = inferSchemaType(nodeData);
+        if (schemaType === "multiType") return neonColors.multiType;
         return (
             neonColors[definedFor as keyof typeof neonColors] ?? neonColors.others
         );
@@ -179,7 +181,7 @@ export const processAST: ProcessAST = ({ ast, schemaUri, nodes, edges, parentId,
 
     updateNode(
         newNode,
-        { nodeData, nodeStyle: { color: color }, addTargetHandle: { handleId: targetHandle, position: Position.Left } }
+        { nodeData, nodeStyle: { color }, addTargetHandle: { handleId: targetHandle, position: Position.Left } }
     );
 };