Skip to content
Get help on SlackWatch Sanity demo

Structuring a `lyrics` field in Sanity Studio for proper display

14 replies
Last updated: Mar 4, 2023
I’m trying to make a new document to appear in Sanity Studio, which is 
song
. The 
song
document has a 
lyrics
field. I’m trying to think of the best way to structure this field so that it displays lyrics properly, a la:

Thunderbolts and lightning, very, very frightening me
Galileo, Galileo
Galileo, Galileo
Galileo, Figaro - magnificoo

I'm just a poor boy nobody loves me
He's just a poor boy from a poor family,
Spare him his life from this monstrosity
Easy come, easy go, will you let me go
I can’t use blockContent, because it will include a big space between each line (since newline indicates paragraph). Ideally, I can end up with an easy way to add lyrics like this in the Sanity Studio editor, without having to manually click 
+
each time to add a new “lyric line” so that the formatting stays proper. Are there any guidelines on how to structure poetry/lyrics?
Mar 4, 2023, 2:53 PM
user T
why not make it an array of blocks? then you have each paragraph in a new block?
Mar 4, 2023, 2:57 PM
My current thought was to do something like this:
export default {
  name: 'song',
  title: 'Song',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'lyrics',
      title: 'Lyrics',
      type: 'lyricsBlock',
    },
  ],
}
Then define a `lyricsBlock`:

export default {
  type: 'object',
  name: 'lyricsBlock',
  title: 'Lyrics Block',
  fields: [
    {
      type: 'array',
      name: 'lyrics',
      of: [{ type: 'lyrics' }],
      validation: (Rule) => Rule.required(),
    },
  ],
}
And finally, define a 
lyrics
, which would be each line:
export default {
  type: 'object',
  name: 'lyrics',
  title: 'Lyrics',
  fields: [
    {
      type: 'text',
      title: 'Text',
      name: 'text',
      validation: (Rule) => Rule.required(),
    },
  ],
}
But this solution leads to the aforementioned problem, where I need to manually click 
+
to add a new line
Mar 4, 2023, 2:57 PM
user R
I tried that, but there was no new line between each line of the lyrics. All the text got put on the same line
Mar 4, 2023, 2:58 PM
I think im missing you, by “new line” do you mean at the “end” of 
very, very frightning me
?
Mar 4, 2023, 2:59 PM
then having the 
Galileo
on a new line
Mar 4, 2023, 3:00 PM
yes exactly
Mar 4, 2023, 3:00 PM
Thunderbolts and lightning, very, very frightening me Galileo, Galileo
It was displaying like this
Mar 4, 2023, 3:00 PM
Ahhh 💡 , what about using 
\n
?
Mar 4, 2023, 3:00 PM
Let me try
Mar 4, 2023, 3:01 PM
have you tried hitting 
command+return
instead of a regular return in the block editor? that renders a hard line break aka 
\n
Mar 4, 2023, 3:40 PM
here’s a possibly related issue https://github.com/nuxt-modules/sanity/issues/61
Mar 4, 2023, 3:42 PM
command+return just toggles the editor to be large/small
Mar 4, 2023, 4:32 PM
sorry, i think shift+enter/return is what i meant!
Mar 4, 2023, 4:33 PM
let me try! Will have to get back to this a little later. thanks for the suggestions 🙂
Mar 4, 2023, 4:34 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?