AykutSarac/jsoncrack.com · warning

Invalid

Error message

Invalid

What it means

The 'Invalid' label appears in the editor bottom bar whenever the error state in useFile is truthy. That state is set by setContents when contentToJson throws (invalid JSON/YAML/XML/CSV) or by Monaco's onValidate in TextEditor via errors[0]?.message. The popover reveals the underlying message. This is a display-only indicator, not a thrown error.

Source

Thrown at apps/www/src/features/editor/BottomBar.tsx:118

    if (data?.name) window.document.title = `${data.name} | JSON Crack`;
  }, [data]);

  return (
    <StyledBottomBar>
      <StyledLeft>
        <Tooltip label="Close editor" position="bottom" withArrow openDelay={750}>
          <StyledBottomBarItem onClick={toggleEditor} aria-label="close editor">
            <LuPanelLeftClose size={14} />
          </StyledBottomBarItem>
        </Tooltip>
        <StyledBottomBarItem>
          {error ? (
            <Popover width="auto" shadow="md" position="top" withArrow>
              <Popover.Target>
                <Flex align="center" gap={2}>
                  <VscError color="red" />
                  <Text c="red" fw={500} fz="xs">
                    Invalid
                  </Text>
                </Flex>
              </Popover.Target>
              <Popover.Dropdown style={{ pointerEvents: "none" }}>
                <Text size="xs">{error}</Text>
              </Popover.Dropdown>
            </Popover>
          ) : (
            <Flex align="center" gap={2}>
              <VscCheck />
              <Text size="xs">Valid</Text>
            </Flex>
          )}
        </StyledBottomBarItem>
        <StyledBottomBarItem
          onClick={() => {
            toggleLiveTransform(!liveTransformEnabled);
            gaEvent("toggle_live_transform");

View on GitHub (pinned to 3c9af69e23)

Solutions

1. Hover the popover to read the exact message and fix the cited location.
2. If a JSON schema is configured, ensure it matches the document.
3. Toggle live-transform off to defer validation while bulk-editing.
4. Re-paste clean content to clear a stuck invalid state.

// Validate content matches the selected format before setContents
async function isValidForFormat(value: string, format: FileFormat): Promise<boolean> {
  try {
    await contentToJson(value, format);
    return true;
  } catch {
    return false;
  }
}

When it happens

Trigger: User types invalid JSON (trailing comma, unclosed brace) in the editor; switching format to YAML/CSV with content that does not parse in that format; loading a file whose content does not match its extension; a configured JSON schema rejecting the document.

Common situations: Transient mid-edit syntax errors (expected); format mismatch after changing the format selector; schema validation failure when jsonSchema is set; 'stuck' invalid state after a bad paste.

Related errors

• errors[0]?.message
• Please select some text first!
• Invalid Schema
• Your diagram is too large
• Invalid file

AI-assisted analysis of AykutSarac/jsoncrack.com@3c9af69e23 (2026-08-12). Data as JSON: /api/errors/d4c9c243c59c1ab2. Report an issue: GitHub.