JSON Column Formatting Does Not Render: Root Cause and Fix

You applied JSON column formatting to a SharePoint list or library column, but the formatting does not appear. The column shows plain text or default values instead of the styled output you designed. This problem occurs because SharePoint disables custom formatting when it detects a syntax error, an unsupported property, or a security restriction in the JSON code. This article explains the three main root causes of JSON formatting failure and gives you step-by-step fixes for each one.

Why JSON Column Formatting Fails to Render

SharePoint uses a restricted JSON schema for column formatting. The schema allows only a predefined set of properties such as elmType, txtContent, attributes, and style. If your JSON includes a property that SharePoint does not recognize, the entire formatting block is ignored.

The second common root cause is a syntax error. A missing comma between two objects, an extra bracket, or an unclosed quote will cause the JSON parser to fail silently. SharePoint does not display a pop-up error for syntax issues. Instead, the column reverts to its unformatted state.

The third cause is a content security policy restriction. SharePoint blocks inline JavaScript in JSON formatting since 2021. If your formatting code contains "onclick" or "onhover" events that call JavaScript functions, SharePoint strips those events and does not render the formatting at all.

Steps to Diagnose and Fix JSON Column Formatting

1. Open the column formatting pane
   Go to the SharePoint list or library. Click the gear icon and select List settings. Find the column that is not rendering and click its name. In the column settings page, scroll down to Format this column and click it.
2. Check the JSON for syntax errors
   Copy the entire JSON code from the formatting pane. Paste it into a JSON validator such as jsonlint.com. Click Validate JSON. If the validator shows an error, fix the line it indicates. Common fixes include adding a missing comma after a closing brace or removing a trailing comma before a closing bracket.
3. Remove unsupported properties
   Review the JSON for properties that are not part of the SharePoint column formatting schema. The only valid elmType values are div, span, a, img, button, and svg. Remove any custom attributes like data- that are not explicitly listed in the Microsoft documentation. Also remove any onclick or onmouseover events.
4. Test with a minimal JSON template
   Replace your entire JSON with this minimal template to confirm that formatting works at all:

   {"$schema":"https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json","elmType":"div","txtContent":"@currentField"}

   Click Preview. If the column now shows the field value, the issue is in your original JSON structure.

5. Use the browser developer tools to find errors
   Press F12 to open Developer Tools. Go to the Console tab. Reload the page. Look for any red error messages that contain the word SPColumnFormatter or JSON. The error message will tell you the exact line number where the parser failed.
6. Reapply the formatting after fixing the JSON
   Once you have corrected the JSON, paste the fixed code back into the Format this column pane. Click Save. Refresh the list page to verify the formatting appears.

If JSON Formatting Still Does Not Render

Column formatting works for some users but not others

SharePoint column formatting is view-level. If a user does not have at least Read permissions on the list, the formatting will not render. Check the user’s permission level in the list or library permissions page. Also confirm that the user is not viewing the list in a browser that blocks JSON formatting, such as the SharePoint mobile app without the latest update.

Formatting appears in preview but not on the list view

This happens when the JSON contains a reference to a field that does not exist in the current view. For example, if your formatting uses [$SomeField] but SomeField is not added to the view, the formatting will not render. Add the referenced field to the view by editing the current view and selecting that column.

Formatting stopped working after a SharePoint update

Microsoft occasionally deprecates properties in the column formatting schema. If your formatting was working before and stopped after a tenant update, check the Microsoft 365 roadmap for changes to list formatting. The most common deprecated property is "onclick". Replace any click actions with the supported "action" property using the "executeFlow" or "setValue" action types.

JSON formatting causes the page to load slowly

Complex JSON with many nested "children" elements or large "style" blocks can degrade page performance. SharePoint limits the total size of a column formatting JSON to 100 KB. If your JSON exceeds this limit, truncate it by removing unnecessary style declarations or simplifying the nested structure.

Issue	Syntax Error	Unsupported Property	Security Restriction
Cause	Missing comma, bracket, or quote in the JSON	Property not in SharePoint column formatting schema	Inline JavaScript event like onclick
How to detect	JSON validator or F12 Console error message	Compare JSON against the schema documentation	Check for onclick, onmouseover, or onchange
Fix	Correct the syntax at the reported line	Remove the unsupported property or replace it with a valid one	Replace with SharePoint action property or remove the event
Prevention	Use a JSON linter before pasting	Always reference the latest schema from Microsoft	Do not use JavaScript events in formatting

Now you can identify why JSON column formatting does not render and apply the correct fix. Start by validating your JSON syntax with an external tool and removing any unsupported properties or inline JavaScript. For persistent issues, use the browser developer tools to capture the exact error message from the SharePoint column formatter.

After fixing the formatting, test the column in multiple list views to confirm it renders consistently. If you need advanced interactivity, explore SharePoint Framework extensions instead of column formatting. One advanced tip is to use the "customAction" property with a "action" value of "setValue" to update another column when a user clicks the formatted element.