JSON Column Formatter
Write, validate, and preview SharePoint JSON column formatting with built-in templates. 100% client-side — nothing leaves your browser.
Template
Show colored icons based on status text (Done, In Progress, Blocked)
JSON Editor
Live Preview
Column formatting JSON
SharePoint column and view formatting replaces a field's rendering with a small JSON document describing elements, styles and expressions. It runs client-side in the list and in the modern list web part, and it changes only display — the stored value is untouched, so a formatter can never corrupt data.
Two schemas, and picking the wrong one silently fails
Column formatting and view formatting are different schemas with different roots. Column formatting describes one field; view formatting (rowFormatter) describes an entire row and is pasted into a different pane. Pasting a row formatter into the column pane produces a blank cell rather than an error, which is the first thing to check when nothing renders. The $schema URL is what distinguishes them, and it is worth keeping accurate even though SharePoint does not strictly enforce it.
Only some elements are allowed
elmType is restricted to a safe subset — div, span, a, img, button, svg and a few others. Anything outside it is dropped. There is no scripting: onclick and similar attributes are stripped, and the only interactivity available is customRowAction, which can execute a defined action such as setting a field value or opening a form.
Referencing fields and writing expressions
@currentField is the column being formatted. Other columns are referenced by internal name in brackets: [$Status], [$Due_x0020_Date]. Complex types have sub-properties — [$Author.title], [$Author.email], [$Author.picture] for a person field, and [$Lookup.lookupValue] for a lookup. Expressions are strings beginning with = and read like Excel: =if(@currentField > 5, 'red', 'green').
Dates need converting before you compare them
Date values arrive as strings, so comparing them directly does not do what it looks like. Wrap both sides in Number() to compare them as timestamps — for example =if(Number(@currentField) < Number(@now), ...)for an overdue highlight. This single conversion is behind most “my due-date formatter highlights everything” reports.
Icons and images
Prefer Fluent UI icons through the iconNameattribute over external images: they are already loaded, they inherit theme colours, and they survive dark mode. Images from arbitrary external domains may be blocked by the tenant's content policy, so a formatter that works in your tenant can render as a broken image in somebody else's.
Working on one
The six presets above — status icons, progress bar, due-date highlight, yes/no badge, conditional background and trending arrows — cover most of what column formatting is actually used for, and they are easier to adapt than to write from scratch. Paste the result into Column settings → Format this column → Advanced mode. Errors there are terse, so when a formatter renders nothing, comment the JSON back to a bare txtContent and add pieces until it breaks.
Frequently Asked Questions
JSON Column Formatting is a declarative, no-code way to customize how fields in SharePoint lists and libraries are displayed. You write a JSON schema that defines how data should be rendered — adding colors, icons, progress bars, and conditional styling — without changing the underlying data.
In your SharePoint list, click the column header → Column settings → Format this column. Switch to Advanced mode and paste your JSON. Click "Preview" to verify, then "Save". The formatting persists for all users who view the list.
Yes! The v2 JSON schema supports Excel-style expressions like =if(@currentField > 10, "Green", "Red"). You can reference other columns using [$ColumnInternalName], the current user with @me, and the current date with @now.
Column formatting customizes a single column's appearance. View formatting lets you control the entire row layout — useful for creating card-based views, conditional row highlighting, or completely custom list visuals using the rowFormatter property.
Yes. You can create action buttons using the customRowAction property with actions like executeFlow (trigger a Power Automate flow), share, delete, or editProps. This is powerful for building lightweight approval workflows directly in lists.
Column formatting cannot: modify data, call external APIs, use custom JavaScript, or exceed 100KB per column schema. For advanced scenarios requiring external data or complex logic, use SPFx Field Customizers instead.
Yes. Microsoft Lists (both the standalone app and SharePoint-backed lists) fully support JSON column and view formatting. The same JSON schema works identically in both environments.