Sanity stlParsed Field
Starting from v0.3.0, the sanity-plugin-structured-table utilizes dual storage. On every keystroke, the plugin saves both the raw stlString and the pre-parsed stlParsed JSON string.
Why is this important?
Previously, frontend applications had to parse the raw STL string at request time or render time using the STL.parse() method. This introduced a computational overhead on every page load, especially for large tables or pages with multiple tables.
By saving the parsed output directly in the Sanity dataset, your frontend can simply call JSON.parse(value.stlParsed) and skip the STL parsing step entirely. This dramatically improves rendering performance.
How to use it on the Frontend
Update your GROQ queries to fetch the stlParsed field, and then parse the JSON string directly.
Step 1: Update GROQ queries
groq*[_type == "post"] {
title,
myTable {
stlParsed,
stlString // Include as a fallback for older documents
}
}Step 2: Parse the JSON string
Instead of using STL.parse(stlString), you simply use JSON.parse().
typescriptimport { Table } from './components/react/Table';
export default function MyComponent({ post }) {
// Parse the pre-computed JSON string
const tableData = post.myTable?.stlParsed
? JSON.parse(post.myTable.stlParsed)
: null;
if (!tableData) return null;
return <Table data={tableData} />;
}Migration Layer & Backward Compatibility
You do not need to manually migrate existing tables created before v0.3.0. The custom Sanity input component acts as a migration layer: it reads stlParsed first. If it is absent (e.g., an old document), it falls back to STL.parse(stlString) automatically in the studio. When an editor next edits that document, the new stlParsed field will be saved atomically via the new Object-level custom input.
Therefore, if your frontend expects stlParsed but you have legacy documents, you should include a fallback on your frontend to parse the raw string, or simply open and save those legacy documents in the Studio once.
Example with Fallback
typescriptimport { STL } from 'structured-table';
const tableData = post.myTable?.stlParsed
? JSON.parse(post.myTable.stlParsed)
: post.myTable?.stlString
? STL.parse(post.myTable.stlString)
: null;
