shadcn.io is not affiliated with official shadcn/ui
Metadata Viewer Web3 Block for Svelte
A token metadata inspector with a Formatted tab (name, id, standard, links, attributes grid, whole tree) and an editable Raw JSON tab, plus a Validate that lists passes and warnings, such as an https image that can change.
Installation
Overview
Check what a token points to before it ships, with this metadata viewer for Svelte with Ark UI. It's the inspector of Tokenlens. A hairline frame with a plus mark on each corner holds two Tabs beside a side cell of checks. Formatted shows the JSON for people: the name, the token id, the standard, the description, the image and external links in mono type, the attributes as a grid of trait and value, and the whole JSON Tree View folded away. Raw JSON is the text in an editable Textarea, and the formatted tab follows what you type; text that isn't JSON says where the parser stopped. Validate, the one Shine Button, runs real checks and fills the side cell: the text parses, name and image are there, an ipfs:// image passes and an https:// one warns that the address can change, and attributes is a list of trait_type and value. Each result has a word as well as an icon. For NFT tools, wallets and any page that shows token metadata.
FAQ
What does Validate check?
Five things on the text itself: that it parses, that name is a non-empty string, that image is present and what its scheme is (ipfs:// passes, https:// and others warn), that description is there, and that attributes is a list in which each entry has a trait_type and a value. Editing the text clears the result and asks you to validate again, so a stale pass is never shown for new text.
How does it report invalid JSON?
The Formatted tab shows a short message with the line and column where the parser stopped, worked out from the browser's own error, and tells you to fix it in the Raw JSON tab. The checks list says the same as its only entry.
What stays local, and how do I wire it?
All of it. The sample text is in SAMPLE, the token id and standard are typed, and nothing is fetched: to inspect a real token, read its tokenURI from the contract, fetch the JSON through your gateway on the server, and pass the text to metaOf and checksOf.
Why does an https image get a warning?
An https address points at a server, and whoever runs it can change what is there, so the token's picture can change after a sale. An ipfs:// address names the content itself. It is a warning and not a failure because plenty of collections do use https.