Get help on Discord

Tips for debugging YouTube thumbnail preview in portable content editor

7 replies
Last updated: May 23, 2023
Hello, I’m hoping to get some tips on debugging 
form.component.preview
for a YouTube thumbnail located within a portable content editor?
AI Update

When debugging form.component.preview for a YouTube thumbnail in Portable Text, the most common issue is that your custom preview component completely replaces the default UI, hiding the input fields and edit controls.

The key solution is to use the renderDefault function that's passed to your preview component. This renders the default preview UI, which includes the edit controls and field labels. Here's how to fix it:

const YouTubePreview = (props) => {
  const { renderDefault, title } = props;
  const url = title?.split(" ")[1];
  const id = getYouTubeID(url);
  const opts = {
    height: "183",
    width: "300",
  };
  
  return (
    <div>
      {renderDefault(props)}
      <YTPreview opts={opts} videoId={id} />
    </div>
  );
};

The critical changes are:

  1. Accept the full props object (which includes renderDefault)
  2. Call renderDefault(props) to render the default preview UI with all its controls
  3. Add your custom preview below it

This pattern is documented in the Form Components API section on renderDefault. The renderDefault function preserves all the built-in functionality like the edit button (the "..." menu), field labels, and double-click-to-edit behavior, while still letting you add your custom YouTube preview.

Without renderDefault, your custom component completely replaces the default UI, making it difficult for editors to access the input fields. You might notice they can only edit by making the preview very small and double-clicking, which isn't intuitive. By including renderDefault, you get the best of both worlds: your custom preview plus all the standard editing controls.

Additional debugging tips:

  • Make sure to handle cases where title might be undefined or empty
  • Consider using optional chaining (title?.split()) to prevent errors
  • The renderDefault pattern works for any custom component in Sanity Studio (field, input, item, or preview components)
  • You can wrap renderDefault in a container to add custom styling around the default UI

This same pattern applies whenever you want to enhance rather than completely replace Sanity's default form components!

After pasting in the URL for the video, the preview loads but then I can’t see the input and field components.

import React from "react";
import getYouTubeID from "get-youtube-id";
import YouTube from "react-youtube";
import styled from "styled-components";

const YTPreview = styled(YouTube)`
	display: flex;
	justify-content: center;
`;

const YouTubePreview = ({ title }) => {
	const url = title.split(" ")[1];
	const id = getYouTubeID(url);
	const opts = {
		height: "183",
		width: "300",
	};
	return <YTPreview opts={opts} videoId={id} />;
};

const youtube = {
	name: "youtube",
	title: "YouTube Embed",
	type: "object",
	fields: [
		{
			name: "link",
			title: "Youtube Video URL",
			type: "url",
		},
	],
	components: {
		preview: YouTubePreview,
	},
};

export default youtube;
Hello, I’m hoping to get some tips on debugging 
form.component.preview
for a YouTube thumbnail located within a portable content editor?
Is there a … button on the component you can click to open the edit modal?
No, I don’t think I see a button.
I did notice that if I made the YT preview very small, I could double-click on the div containing it to make the form reappear. I was hoping to make it a bit more intuitive for my editors though.
Can you try changing the component to:
const YouTubePreview = (props) => {
    const { renderDefault, title } = props
	const url = title.split(" ")[1];
	const id = getYouTubeID(url);
	const opts = {
		height: "183",
		width: "300",
	};
	return (
      <div>
        { renderDefault(props) }
        <YTPreview opts={opts} videoId={id} />;
      </div>
    )
};
OMG! That was it, what a simple fix. I reviewed the docs, specifically this section and see what I missed
https://www.sanity.io/docs/form-components#0319196f086b
Gotta love 
renderDefault
!

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.

Get started for freeExplore the demo

Was this answer helpful?