The Sanity Custom Input Challenge

We do like it when our community shares their work for others to use. We so like to see how people customize the Sanity Studio. We know that not everyone has tried Studio customization yet and we wanted to give you an excuse to do so.

That's why, for a week, we're throwing the Sanity Custom Input Challenge. This week-long community hackathon will focus on creating the most useful, most creative, or just most fun custom inputs for everyone to be able to use.

Not only will we be showcasing the best contributions during and after the challenge, but we'll also be offering prizes for those who submit contributions.

Prizes

For every custom input contribution you create, you'll receive an entry into the raffle. We'll have a number of great prizes.

• 3 full-passes to JSNation Live for the first 3 submissions
• Every contributor will receive a Community Appreciation plan (which will give 3x quotas for a project)
• 5 contributors will win a Sanity T-shirt
• 1 contributor will win the Grand Prize
  • A Sanity sticker pack
  • A Sanity t-shirt
  • A Sanity Hoodie

How to enter

The challenge will run from June 8th through June 17th.

During that period, create a custom input component. It could be simple and useful; complex and mind blowing; or just fun.

When you have a working custom input, share that on the Sanity Exchange either as a code snippet or as a plugin (or take the "pro" move and make both a code snippet AND a plugin for double the entries!).

In order to be entered, you'll need to add the "Custom Input Challenge" contest tag in the "Contests" array at the bottom of the contribution. When adding contributions to the exchange, remember to keep in mind Sanity's community code of conduct.

Watch the kickoff stream

The Sanity Developer Relations team took to Twitch and YouTube to kick things off with a stream detailing the contest and showing how to create your first custom input component.

Get started building

If you've never built a custom input component, now is a great time to learn! Custom inputs provide great ways to increase the experience of editors using your studio. You can provide custom data additions, custom UI, integrate with third-party APIs, or provide live previews.

Learning resources

• The official custom input docs are a great place to start
• This alpha code custom input code generator can help get boilerplate created
• This video walks you through the basics
• Sanity UI's documentation

Need some ideas?

• A Spotify track selector that searches the Spotify API for songs and returns song information into your content lake
• A customizable QR code generator with a built-in preview (based on this React component)
• A recipe ingredient component that converts measurements and stores the data