A small tool to view real-world ActivityPub objects as JSON! Enter a URL
or username from Mastodon or a similar service below, and we'll send a
request with
the right
Accept
header
to the server to view the underlying object.
{
"@context": [
"https://www.w3.org/ns/activitystreams",
{
"ostatus": "http://ostatus.org#",
"atomUri": "ostatus:atomUri",
"inReplyToAtomUri": "ostatus:inReplyToAtomUri",
"conversation": "ostatus:conversation",
"sensitive": "as:sensitive",
"toot": "http://joinmastodon.org/ns#",
"votersCount": "toot:votersCount",
"blurhash": "toot:blurhash",
"focalPoint": {
"@container": "@list",
"@id": "toot:focalPoint"
},
"Hashtag": "as:Hashtag"
}
],
"id": "https://mastodon.social/users/anatudor/statuses/113067579258204074",
"type": "Note",
"summary": null,
"inReplyTo": null,
"published": "2024-09-02T10:52:21Z",
"url": "https://mastodon.social/@anatudor/113067579258204074",
"attributedTo": "https://mastodon.social/users/anatudor",
"to": [
"https://www.w3.org/ns/activitystreams#Public"
],
"cc": [
"https://mastodon.social/users/anatudor/followers"
],
"sensitive": false,
"atomUri": "https://mastodon.social/users/anatudor/statuses/113067579258204074",
"inReplyToAtomUri": null,
"conversation": "tag:mastodon.social,2024-09-02:objectId=789663999:objectType=Conversation",
"content": "<p><a href=\"https://mastodon.social/tags/tinyCSStip\" class=\"mention hashtag\" rel=\"tag\">#<span>tinyCSStip</span></a> Want to look inside various inputs, see how they're styled and maybe even change those styles?</p><p>✨ Chrome: DevTools Settings > Preferences > Elements > ✅Show user agent shadow DOM</p><p>✨ Firefox: about:config > set devtools.inspector.showAllAnonymousContent to true</p><p><a href=\"https://mastodon.social/tags/DevTools\" class=\"mention hashtag\" rel=\"tag\">#<span>DevTools</span></a> <a href=\"https://mastodon.social/tags/Chrome\" class=\"mention hashtag\" rel=\"tag\">#<span>Chrome</span></a> <a href=\"https://mastodon.social/tags/Firefox\" class=\"mention hashtag\" rel=\"tag\">#<span>Firefox</span></a> <a href=\"https://mastodon.social/tags/CSS\" class=\"mention hashtag\" rel=\"tag\">#<span>CSS</span></a> <a href=\"https://mastodon.social/tags/code\" class=\"mention hashtag\" rel=\"tag\">#<span>code</span></a> <a href=\"https://mastodon.social/tags/coding\" class=\"mention hashtag\" rel=\"tag\">#<span>coding</span></a> <a href=\"https://mastodon.social/tags/frontend\" class=\"mention hashtag\" rel=\"tag\">#<span>frontend</span></a> <a href=\"https://mastodon.social/tags/HTML\" class=\"mention hashtag\" rel=\"tag\">#<span>HTML</span></a> <a href=\"https://mastodon.social/tags/web\" class=\"mention hashtag\" rel=\"tag\">#<span>web</span></a> <a href=\"https://mastodon.social/tags/webDev\" class=\"mention hashtag\" rel=\"tag\">#<span>webDev</span></a> <a href=\"https://mastodon.social/tags/webDevelopment\" class=\"mention hashtag\" rel=\"tag\">#<span>webDevelopment</span></a> <a href=\"https://mastodon.social/tags/dev\" class=\"mention hashtag\" rel=\"tag\">#<span>dev</span></a></p>",
"contentMap": {
"en": "<p><a href=\"https://mastodon.social/tags/tinyCSStip\" class=\"mention hashtag\" rel=\"tag\">#<span>tinyCSStip</span></a> Want to look inside various inputs, see how they're styled and maybe even change those styles?</p><p>✨ Chrome: DevTools Settings > Preferences > Elements > ✅Show user agent shadow DOM</p><p>✨ Firefox: about:config > set devtools.inspector.showAllAnonymousContent to true</p><p><a href=\"https://mastodon.social/tags/DevTools\" class=\"mention hashtag\" rel=\"tag\">#<span>DevTools</span></a> <a href=\"https://mastodon.social/tags/Chrome\" class=\"mention hashtag\" rel=\"tag\">#<span>Chrome</span></a> <a href=\"https://mastodon.social/tags/Firefox\" class=\"mention hashtag\" rel=\"tag\">#<span>Firefox</span></a> <a href=\"https://mastodon.social/tags/CSS\" class=\"mention hashtag\" rel=\"tag\">#<span>CSS</span></a> <a href=\"https://mastodon.social/tags/code\" class=\"mention hashtag\" rel=\"tag\">#<span>code</span></a> <a href=\"https://mastodon.social/tags/coding\" class=\"mention hashtag\" rel=\"tag\">#<span>coding</span></a> <a href=\"https://mastodon.social/tags/frontend\" class=\"mention hashtag\" rel=\"tag\">#<span>frontend</span></a> <a href=\"https://mastodon.social/tags/HTML\" class=\"mention hashtag\" rel=\"tag\">#<span>HTML</span></a> <a href=\"https://mastodon.social/tags/web\" class=\"mention hashtag\" rel=\"tag\">#<span>web</span></a> <a href=\"https://mastodon.social/tags/webDev\" class=\"mention hashtag\" rel=\"tag\">#<span>webDev</span></a> <a href=\"https://mastodon.social/tags/webDevelopment\" class=\"mention hashtag\" rel=\"tag\">#<span>webDevelopment</span></a> <a href=\"https://mastodon.social/tags/dev\" class=\"mention hashtag\" rel=\"tag\">#<span>dev</span></a></p>"
},
"attachment": [
{
"type": "Document",
"mediaType": "image/png",
"url": "https://files.mastodon.social/media_attachments/files/113/067/564/810/613/473/original/e1040cb42407c560.png",
"name": "Screenshot of Chrome DevTools Settings, the Elements section under the Preferences tab. Shows the \"Show user agent shadow DOM\" option being checked.",
"blurhash": "U76u9cyGo#xttox{bdV@aeflbIa#MuR3V?o#",
"focalPoint": [
0,
0
],
"width": 651,
"height": 444
},
{
"type": "Document",
"mediaType": "image/png",
"url": "https://files.mastodon.social/media_attachments/files/113/067/566/080/297/308/original/54c54d8fd0e13d06.png",
"name": "Screenshot from about:config in Firefox. Shows the devtools.inspector.showAllAnonymousContent flag set to true.",
"blurhash": "UB7^S$R+IqxY}[NII;xY$*I;NH$#W=EgR*$$",
"focalPoint": [
0,
0
],
"width": 675,
"height": 463
},
{
"type": "Document",
"mediaType": "image/png",
"url": "https://files.mastodon.social/media_attachments/files/113/067/566/887/291/819/original/9a642d71f3c78322.png",
"name": "Chrome DevTools screenshot. Shows inspecting an `input[type=number]` with the setting from before. Inside it we can see its shadow DOM, which includes a pseudo `::-webkit-inner-spin-button` (contained inside another pseudo, `-webkit-textfield-decoration-container`) with the following styles set on it:\n\n```\ninput::-webkit-inner-spin-button {\n appearance: auto;\n display: inline-block;\n cursor: default;\n align-self: stretch;\n opacity: 0;\n pointer-events: none;\n -webkit-user-modify: read-only !important;\n flex: 0 0 auto;\n}\n```\n\nWe can also see the shadow DOM of an `input[type=color]`, which has inside a pseudo `::-webkit-color-swatch-wrapper`, which in turn contains another `::-webkit-color-swatch` component.",
"blurhash": "U77-QT4=%Lt60O^$IWM|-.E3xZt6t7j?ayj[",
"focalPoint": [
0,
0
],
"width": 991,
"height": 929
},
{
"type": "Document",
"mediaType": "image/png",
"url": "https://files.mastodon.social/media_attachments/files/113/067/567/659/945/298/original/b9bdd24ca3e01d39.png",
"name": "Firefox DevTools screenshot. Shows inspecting an `input[type=number]` with the setting from before. Inside it we can see its shadow DOM, which includes a `::-moz-number-spin-up` pseudo (contained inside another pseudo, `::-moz-number-spin-box`) with the following styles:\n\n```\ninput[type=\"number\"]::-moz-number-spin-up, input[type=\"number\"]::-moz-number-spin-down {\n writing-mode: horizontal-tb;\n appearance: auto;\n -moz-default-appearance: spinner-upbutton;\n display: block;\n flex-grow: 1;\n cursor: default;\n}\n/* inherited from its parent */\ninput[type=\"number\"]::-moz-number-spin-box {\n writing-mode: horizontal-tb;\n}\n```\n\nWe can also see what's inside an `input[type=color]` - a `::-moz-color-swatch` pseudo.",
"blurhash": "U24.GCD$%No#p1%NNFRiE5-=RiRj%jD$xvt7",
"focalPoint": [
0,
0
],
"width": 1119,
"height": 890
}
],
"tag": [
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/tinyCSStip",
"name": "#tinyCSStip"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/devtools",
"name": "#devtools"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/chrome",
"name": "#chrome"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/firefox",
"name": "#firefox"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/css",
"name": "#css"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/code",
"name": "#code"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/coding",
"name": "#coding"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/frontend",
"name": "#frontend"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/html",
"name": "#html"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/web",
"name": "#web"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/webdev",
"name": "#webdev"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/webdevelopment",
"name": "#webdevelopment"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/dev",
"name": "#dev"
}
],
"replies": {
"id": "https://mastodon.social/users/anatudor/statuses/113067579258204074/replies",
"type": "Collection",
"first": {
"type": "CollectionPage",
"next": "https://mastodon.social/users/anatudor/statuses/113067579258204074/replies?only_other_accounts=true&page=true",
"partOf": "https://mastodon.social/users/anatudor/statuses/113067579258204074/replies",
"items": []
}
},
"likes": {
"id": "https://mastodon.social/users/anatudor/statuses/113067579258204074/likes",
"type": "Collection",
"totalItems": 14
},
"shares": {
"id": "https://mastodon.social/users/anatudor/statuses/113067579258204074/shares",
"type": "Collection",
"totalItems": 9
}
}