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/114063869996011532",
"type": "Note",
"summary": null,
"inReplyTo": null,
"published": "2025-02-25T09:42:11Z",
"url": "https://mastodon.social/@anatudor/114063869996011532",
"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/114063869996011532",
"inReplyToAtomUri": null,
"conversation": "tag:mastodon.social,2025-02-25:objectId=930377020:objectType=Conversation",
"content": "<p>Someone asked how to get such an offset grid for any number of items, so here's my take on it <a href=\"https://www.reddit.com/r/css/comments/1ixnjjr/comment/menz0yk/\" target=\"_blank\" rel=\"nofollow noopener\" translate=\"no\"><span class=\"invisible\">https://www.</span><span class=\"ellipsis\">reddit.com/r/css/comments/1ixn</span><span class=\"invisible\">jjr/comment/menz0yk/</span></a> - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.</p><p><a href=\"https://mastodon.social/tags/CSS\" class=\"mention hashtag\" rel=\"tag\">#<span>CSS</span></a> <a href=\"https://mastodon.social/tags/cssGrid\" class=\"mention hashtag\" rel=\"tag\">#<span>cssGrid</span></a> <a href=\"https://mastodon.social/tags/cssLayout\" class=\"mention hashtag\" rel=\"tag\">#<span>cssLayout</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/web\" class=\"mention hashtag\" rel=\"tag\">#<span>web</span></a> <a href=\"https://mastodon.social/tags/dev\" class=\"mention hashtag\" rel=\"tag\">#<span>dev</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/frontend\" class=\"mention hashtag\" rel=\"tag\">#<span>frontend</span></a></p>",
"contentMap": {
"en": "<p>Someone asked how to get such an offset grid for any number of items, so here's my take on it <a href=\"https://www.reddit.com/r/css/comments/1ixnjjr/comment/menz0yk/\" target=\"_blank\" rel=\"nofollow noopener\" translate=\"no\"><span class=\"invisible\">https://www.</span><span class=\"ellipsis\">reddit.com/r/css/comments/1ixn</span><span class=\"invisible\">jjr/comment/menz0yk/</span></a> - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.</p><p><a href=\"https://mastodon.social/tags/CSS\" class=\"mention hashtag\" rel=\"tag\">#<span>CSS</span></a> <a href=\"https://mastodon.social/tags/cssGrid\" class=\"mention hashtag\" rel=\"tag\">#<span>cssGrid</span></a> <a href=\"https://mastodon.social/tags/cssLayout\" class=\"mention hashtag\" rel=\"tag\">#<span>cssLayout</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/web\" class=\"mention hashtag\" rel=\"tag\">#<span>web</span></a> <a href=\"https://mastodon.social/tags/dev\" class=\"mention hashtag\" rel=\"tag\">#<span>dev</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/frontend\" class=\"mention hashtag\" rel=\"tag\">#<span>frontend</span></a></p>"
},
"attachment": [
{
"type": "Document",
"mediaType": "image/png",
"url": "https://files.mastodon.social/media_attachments/files/114/063/863/821/896/054/original/9ce64edcaeffa57f.png",
"name": "Screenshot showing the result with the grid overlays on top. The DevTools panel is open on the right, showing the CSS for the second item. In case the grid container is at least as wide as the base width for two columns plus the gap between them, then offset this item on the second column by one row down.",
"blurhash": "UTECIG~VV@WU%2s.WBWBbb%2-oxZNGRkofof",
"focalPoint": [
0,
0
],
"width": 1549,
"height": 842
}
],
"tag": [
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/css",
"name": "#css"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/cssgrid",
"name": "#cssgrid"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/csslayout",
"name": "#csslayout"
},
{
"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/web",
"name": "#web"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/dev",
"name": "#dev"
},
{
"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/frontend",
"name": "#frontend"
}
],
"replies": {
"id": "https://mastodon.social/users/anatudor/statuses/114063869996011532/replies",
"type": "Collection",
"first": {
"type": "CollectionPage",
"next": "https://mastodon.social/users/anatudor/statuses/114063869996011532/replies?only_other_accounts=true&page=true",
"partOf": "https://mastodon.social/users/anatudor/statuses/114063869996011532/replies",
"items": []
}
},
"likes": {
"id": "https://mastodon.social/users/anatudor/statuses/114063869996011532/likes",
"type": "Collection",
"totalItems": 5
},
"shares": {
"id": "https://mastodon.social/users/anatudor/statuses/114063869996011532/shares",
"type": "Collection",
"totalItems": 2
}
}