How to reduce PortableText editor size in Sanity?

Yes! There's absolutely a way to reduce the size of a Portable Text editor field. While there isn't a built-in rows option like there is for regular text fields, you can control the editor height using a custom input component.

The Solution: Custom Input Component

The approach involves creating a custom input component that wraps the default Portable Text editor and applies custom styling to reduce its height. Here's how to do it:

1. Create Your Custom Input Component

You'll need to create a custom input component that:

• Uses styled-components (or your preferred CSS solution) to control the editor height
• Wraps the default renderDefault output
• Optionally sets initialActive: true so users can start typing immediately without clicking to activate

Here's a complete example from Sanity's documentation on reducing PTE height:

// CharacterCountInputPTE.tsx
import { Stack, Text } from '@sanity/ui'
import { PortableTextInputProps } from 'sanity'
import styled from 'styled-components'

export function CustomPTEInput(props: PortableTextInputProps) {
  return (
    <Container>
      {props.renderDefault({
        ...props,
        initialActive: true, // Removes need to activate the editor
      })}
    </Container>
  )
}

// Target the editor when not in fullscreen mode
const Container = styled.div`
  [data-testid='pt-editor'][data-fullscreen='false'] {
    height: 100px; /* Adjust to your needs */
  }
`

2. Apply It to Your Schema

Then reference this custom component in your schema field definition:

import { CustomPTEInput } from './path-to-your-component'

defineField({
  name: 'intro',
  type: 'array',
  title: 'Introduction',
  components: {
    input: CustomPTEInput,
  },
  of: [
    defineArrayMember({
      type: 'block',
      // ... your block configuration
    }),
  ],
})

Benefits of This Approach

1. Visual hierarchy: Smaller fields like intro can be visually distinguished from larger fields like body
2. Screen space: Saves valuable vertical space in your Studio forms
3. Still resizable: The editor remains resizable by users if they need more space
4. Better UX: Setting initialActive: true removes the extra click to start editing

Bonus: Add Character Counter

You can enhance this further by adding a character counter based on validation rules, which is particularly useful for meta descriptions or other length-constrained fields. The full guide shows how to extract the max value from your field validation and display it alongside a live character count.

This is a great example of how custom input components give you precise control over the editing experience in Sanity Studio!