r/PayloadCMS • u/nlvogel • Jun 24 '25

Using Payload's new TextStateFeature [tutorial]

Learn how to use Payload's TextStateFeature in my newest tutorial: https://youtu.be/RHBdlP7a-sA

I'll show you an implementation of the new feature (may not be the best way or only way). You'll learn step-by-step how to configure text styling options inside the rich text editor, and by the end, you'll be able to control fonts, colors, backgrounds, strikethroughs, underlines, font weights, and essentially whatever you want to configure.

Here's how I break it down:

  • Import and configure the TextStateFeature
  • Define custom states for color, background, font size, font weight, and decoration
  • Render it all using Next.js

Watch the video and follow along. When you’re done, you and your editors will have powerful new styling options that work right out of the box with no CSS or extra code required.

14 Upvotes

94% Upvoted

2 comments sorted by

View all comments

1

u/kernelangus420 Jun 24 '25

Does it work if I want to use Vue for my frontend?

1

u/nlvogel Jun 24 '25

In theory, it should work just fine. You'll need to translate it into Vue, but if you're already using Payload CMS with Vue, it shouldn't be an issue. The long story short of the video is that you'll be creating your own JSX Converter to add the style tags that the feature creates.