Document field - How to use Custom Components and Images

[NeeshSamsi]

I think the documentation is still lacking on this but I wanted to use Keystatic for a blog. And ideally, the blog should have support for images, custom components & also some custom renderers for headings.

I tried going through the Keystone.js documentation to maybe piece things together but I was unable to wrap my head around it.

I was just wondering if there are some resources or content I can be pointed towards. Or otherwise any guidance on how I can figure this out.

[simonswiss]

Hey!

I have just added some documentation on the document field's Component Blocks on Friday — probably 1 day after you posted this (and I only read this now on our Australian Monday morning) 😅

https://keystatic.com/docs/fields/document#component-blocks

To enable images in your blog post's document field, you can add the images: true as mentioned here.

You can then use the DocumentRenderer from @keystatic/core/renderer to display a custom component when this component block is matched.

We'll try to provide "real world" examples of how to use this really soon!

[NeeshSamsi]

That's really helpful. I was also going to ask about docs for the renderers prop of the DocumentRenderer but I'm guessing that's in the pipeline.

I've been poking around this project from the showcase: https://www.lukebennett.com.au/
It seems to have everything I am looking for but I can't get it to work for me.

[simonswiss]

My Better Dev Screencasts website has a super simple example of how to use the DocumentRender:

You need to pass a document prop which is the data you get from Keystatic's document field, and you can optionally pass a renderers prop (to customise default HTML tags) and componentBlocks that match the component blocks you added for a given document field.

It's pretty straightforward — for each block, you define the key that matches the block name, and the value is a function that returns the JSX you want to output, and has access to the props passed to the component block.

Hope it helps you getting started!

[NeeshSamsi]

Got custom components to work. Realised I didn't need it since I could intercept my links using renderers. So I focused on the renderers and got a custom heading, link & code to work.

Still stuck figuring out images inside documents properly. Created an issue #520 about it. That's the last feature I need to figure out and then I can push out this Keystatic version of my blog initially made with Contentlayer. Cannot wait