JavaScript Syntax Checker

What a syntax check finds

A syntax error stops a whole script from loading, and the browser’s message (“Unexpected token”) often points somewhere unhelpful, such as the end of the file. This checker parses your code with Babel, the parser Prettier uses for JavaScript, and reports the first place where the grammar breaks:

• a bracket, brace or parenthesis that is never closed, as in items.reduce((sum, item) => sum + item.price, 0;
• a missing comma between object properties or arguments
• an unterminated string or template literal
• an operator with nothing after it, such as const x = 1 +;
• JSX with an unclosed element or a stray }

Babel’s messages are short, for example Unexpected token, expected ",". The value is in the position: the line and column are highlighted in the editor, and they mark where the parser gave up, which is usually just after the real mistake. Look one token to the left first.

Modern syntax is accepted

The parser targets current ECMAScript. Optional chaining, nullish coalescing, class fields and #private members, top-level await and ES module import and export all pass. JSX is understood without configuration, so you can check a React component directly. Code that is valid in some contexts only, such as a return statement at the top level of a pasted function body, is accepted rather than rejected, because snippets are often copied out of context.

One surprise catches people who paste API responses: a bare JSON object such as {"id": 1, "name": "Aisha"} is a syntax error in JavaScript, because a { at the start of a statement opens a block, not an object. Wrap it in parentheses to check it as an expression, or use the JSON validator, which is the right tool for data anyway.

TypeScript annotations are a different matter: function f(x: string) is not JavaScript. Use the TypeScript validator for .ts and .tsx code.

Errors a parser cannot see

Passing this check means the code parses, not that it works. Undefined variables, misspelled method names, wrong argument types, unhandled promise rejections and logic bugs are invisible to a parser. Some rules that engines enforce at load time are not applied either: declaring the same let twice in one scope passes here but throws a SyntaxError in Node and browsers. ESLint with its recommended rules catches most of these, and TypeScript in checkJs mode catches more.

While you fix an error, the output pane keeps the last version that parsed, dimmed, so you can compare it with your edit. The check runs locally in your browser; source code with API keys or internal endpoints is never sent to a server, but do remove secrets before sharing a link to it.

Examples

const total = cart.items.reduce((sum, item) => sum + item.qty * item.price, 0;
console.log(total.toFixed(2));

Line 1, column 78: Unexpected token, expected ","

const user = {
  name: 'Aisha Tan',
  email: 'aisha.tan@example.com'
  roles: ['admin'],
};

Line 4, column 3: Unexpected token, expected ","

const message = 'Order shipped;
notify(user, message);

Line 1, column 17: Unterminated string constant.

export async function loadOrders(signal) {
  const res = await fetch('/api/orders', { signal });
  return (await res.json())?.items ?? [];
}

export const OrderBadge = ({ order }) => <span className="badge">{order.status}</span>;

export async function loadOrders(signal) {
  const res = await fetch("/api/orders", { signal });
  return (await res.json())?.items ?? [];
}

export const OrderBadge = ({ order }) => (
  <span className="badge">{order.status}</span>
);

Common errors and how to fix them

Related tools

• JavaScript / JSX formatter
• javascript minifier
• typescript validator
• json validator
• HTML to JSX
• cURL to JavaScript fetch