While working with Payload CMS and SvelteKit, I needed to render rich text content stored as Lexical JSON. Surprisingly, there wasn’t much guidance available, so after some trial and error, I found a simple and effective solution. Here’s how I did it just in case you are facing the same issue.

Lexical JSON Instead of HTML

Payload CMS stores rich text as Lexical JSON, which isn’t directly usable in a SvelteKit frontend. To display it properly, we need to convert it into HTML.

Convert Lexical JSON to HTML

Install the Required Package

Convert and Render in SvelteKit

Why This Works

• convertLexicalToHTML({ data: content }): Converts Lexical JSON into HTML.
• {@html contentHTML}: Injects the converted HTML into Svelte.

And that’s it! With just a small tweak, your rich text content is properly rendered in SvelteKit. Hope this saves you some time—happy coding!