Introducing prosemirror-link-preview Plugin


The prosemirror-link-preview plugin adds Discord and Slack like link previews to your Prosemirror editor. The plugin catches pasted links and renders a preview automatically. Follow along to learn more about the plugin and how to use it in your project.


  1. Dynamic Link Previews: Whenever a valid URL is pasted into a ProseMirror document, the plugin automatically calls your callback function that fetches the necessary metadata, and the plugin renders a preview, providing a quick glimpse into the content behind the link.

  2. Rich Preview Styles: By default the plugin creates a preview that resembles the style of most social media platforms link sharing cards. It makes it easier to differentiate between regular text and linked content. The preview includes information such as the title, description, and an image associated with the link, where available based on Open Graph metadata.

  3. Configurable Behavior: The plugin provides configuration options, allowing users to customize the behavior and appearance of link previews according to their specific needs. From adjusting the preview size to defining custom CSS styles, the plugin offers flexibility to match the desired editing environment.


Because of CORS you can't fetch the link preview from the client directly. You need to have a custom backend that will fetch the link preview for you. You either use payed OpenGraph fetcher API or use link-preview-js library on your backend to do this. In this article we will use link-preview-js with Next.js API to do this. Since the Next.js API is very similar to Express.js, you can just copy and paste the code to Express.js servers as well.

How to use it

You can check out the docs at

Need more assistance?
We can help you in finding the most adequate solution for your issue!
Video consultation
Book an interactive video consultation with us. Get an interactive one on one or team session with our experienced developers.
Educate your team
We can hold on-site (in the EU) or online trainings. We can help your team to learn new technologies or master certain "grey area" aspects of already used tools.
Hire us to build your product
Hire an individual or a team of developers to solve build your product. We can integrate into an ongoing project, or kick off and layout the foundations of an entirely new solution.