How do I render a preview of an editor's value outside of the editor?

[kieranm]

Hey all,

I use a Plate editor to allow users to write descriptions for events. Once the user has written their description and hits "save", I need a way to render that description on the event's page, in a non-editable read-only format outside the context of the Plate editor. I have access to the Value object that comes from the editor. Ideally I would want Plate to do this rendering so that it appears exactly how it does in the editor. What's the best way of approaching this?

Just to illustrate further what I mean:

Plate editor in form	Read-only saved value in details

At the moment I am serializing the value to HTML and then rendering that, but it produces different output to what's seen in the editor, so I'm not sure if there is a better way.

Thanks
Kieran

[zbeyens]

You can make use of the readOnly prop provided by Plate. By setting this prop to true, you can ensure that the content is rendered in a read-only mode.
Inside Plate, the elements can use the useEditorReadOnly hook to adjust the rendering based on the readOnly prop. This allows you to display the content exactly as it appears in the editor minus editable elements.

Alternatively, if you prefer not to use Plate for rendering, you can manually render the elements from value. You can refer to https://github.com/rockettomatooo/slate-react-presentation for guidance on how to achieve this approach.

[kieranm]

Thanks a lot!

[zbeyens]

You can refer to `PlateYou can find a detailed guide here. And the complete example including export to HTML, Tailwind CSS, and Prism.