How to get empty line breaks on Enter key in PortableText?
I totally understand your frustration! This is a common pain point with PortableText, and you're not alone in finding it unintuitive.
The default behavior in PortableText is that pressing Enter creates a new block (which renders as a <p> tag in HTML), not just a line break. This is by design - PortableText treats each paragraph as a separate block in its data structure. To get a simple line break within the same block, you need to use Shift+Enter, which creates a <br/> equivalent.
Why is it this way? PortableText is structured content, not just HTML. Each block is a separate data object, which gives you more flexibility and control when querying and rendering content across different platforms. But yes, it's definitely less intuitive for editors coming from traditional WYSIWYG editors.
Solutions you can try:
CSS approach (simplest): If you just want line breaks to render as visual breaks, you can apply
white-space: pre-line;to your rendered PortableText components. This treats line breaks within blocks as<br/>tags visually, though the underlying data structure still has separate blocks. However, as noted in this community discussion, this doesn't change the editor behavior - it still creates<p>tags.Train your editors: The most pragmatic solution is to establish Shift+Enter as the standard for line breaks in your team's workflow. It's not ideal, but it's how the editor works currently.
Custom rendering: You can customize how blocks are rendered on the frontend to reduce spacing between consecutive blocks, making them feel more like line breaks visually.
Unfortunately, there isn't a configuration option to change the default Enter key behavior in the editor itself. The PortableText editor's behavior is intentional to maintain the structured nature of the content.
The good news is that once editors get used to Shift+Enter, it becomes second nature. But I agree - it would be great if there were more flexibility in configuring this behavior directly in the editor configuration.
Show original thread5 replies
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.