Skip to main content

NFT Metadata Renderer

Functions in the TypeScript and React SDKs resolve the metadata of NFTs for you automatically in a standard format, containing the owner and metadata (name, image, description, etc.) of each NFT returned.

import { useContract, useNFT, ThirdwebNftMedia } from "@thirdweb-dev/react";
export default function NFTCollectionRender() {
// Get your NFT Collection using it's contract address
const { contract } = useContract("<your-contract-address>");

// Load (and cache) the metadata for the NFT with token ID 0
const { data: nft, isLoading } = useNFT(contract, 0);

// Render the NFT metadata using the `ThirdwebNftMedia` component
return (
{!isLoading && nft ? (
<ThirdwebNftMedia metadata={nft.metadata} />
) : (

This allows you to easily render NFTs on the UI using the ThirdwebNftMedia component, which accepts this metadata format as a parameter and renders the NFT correctly for every media type.

This removes the complexity of resolving the media type of the NFT media (such as determining whether it is a video, image, or audio) and provides a consistent way to render NFTs on the UI.


metadataRequiredThe metadata of the NFTNFTMetadata
controlsOptionalShow the media controls (where applicable) (default false)boolean
heightOptionalHeight of the element to renderstring
widthOptionalWidth of the element to renderstring
requireInteractionOptionalRequire user interaction to play the media. (default false)boolean
styleOptionalAdditional CSS to style the rendered elementCSSProperties


Learn how to integrate the MediaRenderer component into your application.