Plugin compatibility issue during Studio Migration from v2 to v3.

2 replies
Last updated: Jul 10, 2023
Hi Team,While doing the Studio Migration from v2 to v3, we came across to a point where one of plugin is not supported by V3.

Plugin - https://www.sanity.io/plugins/sanity-plugin-color-list
This plugin has been used extensively in most of the schemas so can't afford to remove it.

Please suggest a recommended resolution which we can adopt.
AI Update

I understand you're facing a challenge migrating from Sanity Studio v2 to v3 with the sanity-plugin-color-list plugin that's extensively used in your schemas. This is a common issue during v3 migrations when community plugins haven't been updated.

The Situation

The sanity-plugin-color-list plugin you're using is a community plugin created by Kim Björkman that was built for Studio v2 and has not been updated for Studio v3 compatibility. As the plugin page indicates, it only works with the older, now-deprecated version of Sanity Studio (v2).

Your Migration Options

Since this plugin is extensively used in your schemas, here are your recommended paths forward:

Sanity maintains an official color input plugin called @sanity/color-input that fully supports Studio v3. While it has a different API than sanity-plugin-color-list, it provides similar functionality including predefined color swatches.

Installation:

npm install @sanity/color-input

Add to your sanity.config.ts:

import {defineConfig} from 'sanity'
import {colorInput} from '@sanity/color-input'

export default defineConfig({
  // ... other config
  plugins: [
    colorInput(),
    // ... other plugins
  ]
})

Schema definition: The official plugin uses type: "color" and provides a colorList option for predefined swatches:

{
  title: "Color",
  name: "myColor",
  type: "color",
  options: {
    colorList: [ // Predefined color swatches
      { title: "Red", value: "#f16d70" },
      { title: "Teal", value: "#88c6db" },
      { title: "Purple", value: "#aca0cc" }
    ]
  }
}

The official plugin returns a comprehensive color object with hex, hsl, hsv, and rgb values, giving you more flexibility in how you use colors on your frontend.

Option 2: Fork and Update the Community Plugin

If the official plugin doesn't meet your specific requirements, you could:

  1. Fork the sanity-plugin-color-list repository
  2. Update it to work with Studio v3 (requires updating dependencies and refactoring to use Studio v3 APIs)
  3. Install your forked version in your project

This gives you full control but requires ongoing maintenance on your end.

Option 3: Build a Custom Color Input Component

For Studio v3, you can create custom input components. If sanity-plugin-color-list had specific features you need, you could build a custom input that replicates that functionality while being v3-compatible. The Sanity documentation on custom inputs can guide you through this process.

Migration Strategy

Whichever option you choose, I'd recommend:

  1. Test in a development environment first - Create a test branch and migrate a few schemas to verify the approach works
  2. Audit your current usage - Document exactly how you're using sanity-plugin-color-list across your schemas to understand the scope of changes
  3. Check data structure differences - The sanity-plugin-color-list README mentions it returns "the whole color object" - you'll need to verify compatibility with the official plugin's data structure
  4. Plan a data migration if needed - If the data structures are incompatible, you may need to write a migration script
  5. Update your frontend - Ensure your GROQ queries and frontend code handle the new data structure correctly

The official @sanity/color-input plugin is your best bet for long-term support and compatibility with future Sanity updates. While it requires schema refactoring, it's actively maintained by Sanity and designed specifically for Studio v3.

Hi Lokesh,
I totally understand. I used that plugin in a lot of applications. Here's a
similar plugin that works well in v3.
I really appreciate your help
user B
I liked this plugin. Good point is, we do not need to make major changes as the list is an "Array of objects" like the older plugin.
Thanks so much
🙌

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?