decaporg / decaporg/decap-cms

Enable React Components Rendering in Preview for MDX with Next.js

Open
#7,259 0 comments 3 reactions 0 assignees View on GitHub
area: ui/editor/preview-pane type: feature
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**Is your feature request related to a problem? Please describe.**

I'm using Decap CMS, `mdx` format (next-mdx-remote library) in the Next.js. I need React components to render in the preview after being included in the markdown widget.

Markdown widget content:
```

Tweet:


```

Here’s how it appears in a published article:

![Screenshot by Dropbox Capture](https://github.com/user-attachments/assets/2b684774-f2a4-4ef0-8f52-fcfc7d7cc132)

And here’s how it looks in the preview:

![Screenshot by Dropbox Capture](https://github.com/user-attachments/assets/2e33f740-a6de-41ea-89d0-f041fd5fbf7e)

As you can see, the React components are missing in the preview, and only the text Tweet is rendered.

The published version displays the page correctly, indicating that the preview lacks the necessary configuration to render React components.

**Describe the solution you'd like**
Adding missing configuration in `public/admin/index.html`, possibly including a script to render React components in the preview.

**Describe alternatives you've considered**

I tried CMS.registerPreviewTemplate("posts", PostPreview); and registerPreviewStyle in the index.html script, but these methods did not render React components in the markdown widget.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.