Sanity Studio Integration

Integrating Structured Table into Sanity Studio empowers content editors with a powerful, spreadsheet-like interface for managing tables, including advanced attribute options.

1. Install the Plugin

cmd
npm install sanity-plugin-stl-table

*Note: This plugin requires react >= 18 and sanity >= 3.0.0.*

2. Setup Table Render Components

To enable the interactive table preview within Sanity Studio, you need to install the CLI and generate the React components.

cmd
npm install structured-table-cli

Then, run the following command to download the pre-built React table components:

cmd
npx stl-cli add react

Optionally, you can specify a custom path: npx stl-cli add react --path ./schemaTypes/components

3. Register Components in Sanity Config

After generating the components, you must register them in your sanity.config.ts.

typescript
// sanity.config.ts
import './schemaTypes/components/register' // Base path depends on where you installed it
import { defineConfig } from 'sanity'

export default defineConfig({
  // ... configuration
})

4. Register the Schema

Import the stlTableBlock schema definition and add it to your Sanity Studio configuration types array.

typescript
// sanity.config.ts
import { defineConfig } from 'sanity'
import { stlTableBlock } from 'sanity-plugin-stl-table'

export default defineConfig({
  // ...
  schema: {
    types: [
      // ... other types
      stlTableBlock,
    ],
  },
})

5. Usage

You can now use the stlTableBlock type in your portable text editors or as a standalone field in your documents.

In Portable Text

typescript
// schemas/blockContent.ts
export default {
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
    { type: 'block' },
    // Add the table block
    { type: 'stlTableBlock' },
  ],
}

As a Field

typescript
export default {
  name: 'productSpecification',
  title: 'Product Specification',
  type: 'document',
  fields: [
    {
      name: 'title',
      type: 'string',
    },
    {
      name: 'specsTable',
      title: 'Specifications Table',
      type: 'stlTableBlock',
    },
  ],
}

6. Studio Usage

Restart your Sanity dev server. You will now see an input field where you can paste or write your STL code.

Check following video to Learn how to use block inside Sanity Studio.

The table preview will update automatically below user input as you type, giving you immediate response on your table structure and content.

If you need a visual editor to create complex tables, you can use our Live Table Editor to build your table primarily and then export the STL code to paste into Sanity.

7. Create Table in STL Language

You can use our interactive live table editor at /playground where you can create your entire table and then export that in the STL format.