Media & AI Node Views

Type /image, /file, /video, or /embed in the preview to try one.

InstallationCopy Anchor Link

bunx --bun shadcn@latest add @slash-editor/node-views

UsageCopy Anchor Link

The adapter is always a prop, never a hardcoded mock — wire your own UploadAdapter:

image.extend({
  addNodeView: () =>
    ReactNodeViewRenderer((props) => <ImageNodeView {...props} adapter={yourUploadAdapter} />),
});

To display signed or authorized URLs, configure the node's display-only resolveSrc before extending it — the views pass the stored URL through it, while the document keeps the original:

Image.configure({ resolveSrc: (src) => signUrl(src) }).extend({
  addNodeView: () =>
    ReactNodeViewRenderer((props) => <ImageNodeView {...props} adapter={yourUploadAdapter} />),
});

See the upload adapter guide for the full UploadAdapter contract, including retry, toAttrs, and resolveSrc.