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",
"Emoji": "toot:Emoji"
}
],
"id": "https://mastodon.ar.al/users/aral/statuses/114183236567805950",
"type": "Note",
"summary": null,
"inReplyTo": null,
"published": "2025-03-18T11:38:41Z",
"url": "https://mastodon.ar.al/@aral/114183236567805950",
"attributedTo": "https://mastodon.ar.al/users/aral",
"to": [
"https://www.w3.org/ns/activitystreams#Public"
],
"cc": [
"https://mastodon.ar.al/users/aral/followers"
],
"sensitive": false,
"atomUri": "https://mastodon.ar.al/users/aral/statuses/114183236567805950",
"inReplyToAtomUri": null,
"conversation": "tag:mastodon.ar.al,2025-03-18:objectId=51069458:objectType=Conversation",
"content": "<p>New Kitten release</p><p>• Now leaves <style> tags within <template> tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.</p><p>(Kitten’s Streaming HTML workflow¹ – which uses htmx and WebSockets under the hood – combined with built-in support for slots, etc., in Kitten components² means the use of declarative shadow DOM is mostly useful if you want scoped styles. Ideally, of course, use classes to scope styles to your components and be specific in your CSS selectors in general so as not to pollute elements in your components. Although that’s a bit like saying you should floss everyday. Yeah, we all know we should…) :)</p><p>Update: All that said, I’d highly recommend you don’t use Shadow DOM in your Kitten apps. For one thing, htmx’s WebSocket extension doesn’t seem to play well with it. And for another, you really don’t need it and definitely not just to get scoped CSS.</p><p>Enjoy!</p><p>:kitten:💕</p><p>¹ <a href=\"https://kitten.small-web.org/tutorials/streaming-html/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">kitten.small-web.org/tutorials</span><span class=\"invisible\">/streaming-html/</span></a><br />² <a href=\"https://kitten.small-web.org/tutorials/components-and-fragments/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">kitten.small-web.org/tutorials</span><span class=\"invisible\">/components-and-fragments/</span></a></p><p><a href=\"https://mastodon.ar.al/tags/Kitten\" class=\"mention hashtag\" rel=\"tag\">#<span>Kitten</span></a> <a href=\"https://mastodon.ar.al/tags/SmallWeb\" class=\"mention hashtag\" rel=\"tag\">#<span>SmallWeb</span></a> <a href=\"https://mastodon.ar.al/tags/SmallTech\" class=\"mention hashtag\" rel=\"tag\">#<span>SmallTech</span></a> <a href=\"https://mastodon.ar.al/tags/CSS\" class=\"mention hashtag\" rel=\"tag\">#<span>CSS</span></a> <a href=\"https://mastodon.ar.al/tags/CSSScoping\" class=\"mention hashtag\" rel=\"tag\">#<span>CSSScoping</span></a> <a href=\"https://mastodon.ar.al/tags/ShadowDOM\" class=\"mention hashtag\" rel=\"tag\">#<span>ShadowDOM</span></a> <a href=\"https://mastodon.ar.al/tags/shadowRoot\" class=\"mention hashtag\" rel=\"tag\">#<span>shadowRoot</span></a> <a href=\"https://mastodon.ar.al/tags/DOM\" class=\"mention hashtag\" rel=\"tag\">#<span>DOM</span></a> <a href=\"https://mastodon.ar.al/tags/HTML\" class=\"mention hashtag\" rel=\"tag\">#<span>HTML</span></a> <a href=\"https://mastodon.ar.al/tags/JavaScript\" class=\"mention hashtag\" rel=\"tag\">#<span>JavaScript</span></a> <a href=\"https://mastodon.ar.al/tags/JS\" class=\"mention hashtag\" rel=\"tag\">#<span>JS</span></a> <a href=\"https://mastodon.ar.al/tags/style\" class=\"mention hashtag\" rel=\"tag\">#<span>style</span></a> <a href=\"https://mastodon.ar.al/tags/template\" class=\"mention hashtag\" rel=\"tag\">#<span>template</span></a> <a href=\"https://mastodon.ar.al/tags/declarativeShadowDOM\" class=\"mention hashtag\" rel=\"tag\">#<span>declarativeShadowDOM</span></a> <a href=\"https://mastodon.ar.al/tags/NodeJS\" class=\"mention hashtag\" rel=\"tag\">#<span>NodeJS</span></a> <a href=\"https://mastodon.ar.al/tags/web\" class=\"mention hashtag\" rel=\"tag\">#<span>web</span></a> <a href=\"https://mastodon.ar.al/tags/dev\" class=\"mention hashtag\" rel=\"tag\">#<span>dev</span></a></p>",
"contentMap": {
"en": "<p>New Kitten release</p><p>• Now leaves <style> tags within <template> tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.</p><p>(Kitten’s Streaming HTML workflow¹ – which uses htmx and WebSockets under the hood – combined with built-in support for slots, etc., in Kitten components² means the use of declarative shadow DOM is mostly useful if you want scoped styles. Ideally, of course, use classes to scope styles to your components and be specific in your CSS selectors in general so as not to pollute elements in your components. Although that’s a bit like saying you should floss everyday. Yeah, we all know we should…) :)</p><p>Update: All that said, I’d highly recommend you don’t use Shadow DOM in your Kitten apps. For one thing, htmx’s WebSocket extension doesn’t seem to play well with it. And for another, you really don’t need it and definitely not just to get scoped CSS.</p><p>Enjoy!</p><p>:kitten:💕</p><p>¹ <a href=\"https://kitten.small-web.org/tutorials/streaming-html/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">kitten.small-web.org/tutorials</span><span class=\"invisible\">/streaming-html/</span></a><br />² <a href=\"https://kitten.small-web.org/tutorials/components-and-fragments/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">kitten.small-web.org/tutorials</span><span class=\"invisible\">/components-and-fragments/</span></a></p><p><a href=\"https://mastodon.ar.al/tags/Kitten\" class=\"mention hashtag\" rel=\"tag\">#<span>Kitten</span></a> <a href=\"https://mastodon.ar.al/tags/SmallWeb\" class=\"mention hashtag\" rel=\"tag\">#<span>SmallWeb</span></a> <a href=\"https://mastodon.ar.al/tags/SmallTech\" class=\"mention hashtag\" rel=\"tag\">#<span>SmallTech</span></a> <a href=\"https://mastodon.ar.al/tags/CSS\" class=\"mention hashtag\" rel=\"tag\">#<span>CSS</span></a> <a href=\"https://mastodon.ar.al/tags/CSSScoping\" class=\"mention hashtag\" rel=\"tag\">#<span>CSSScoping</span></a> <a href=\"https://mastodon.ar.al/tags/ShadowDOM\" class=\"mention hashtag\" rel=\"tag\">#<span>ShadowDOM</span></a> <a href=\"https://mastodon.ar.al/tags/shadowRoot\" class=\"mention hashtag\" rel=\"tag\">#<span>shadowRoot</span></a> <a href=\"https://mastodon.ar.al/tags/DOM\" class=\"mention hashtag\" rel=\"tag\">#<span>DOM</span></a> <a href=\"https://mastodon.ar.al/tags/HTML\" class=\"mention hashtag\" rel=\"tag\">#<span>HTML</span></a> <a href=\"https://mastodon.ar.al/tags/JavaScript\" class=\"mention hashtag\" rel=\"tag\">#<span>JavaScript</span></a> <a href=\"https://mastodon.ar.al/tags/JS\" class=\"mention hashtag\" rel=\"tag\">#<span>JS</span></a> <a href=\"https://mastodon.ar.al/tags/style\" class=\"mention hashtag\" rel=\"tag\">#<span>style</span></a> <a href=\"https://mastodon.ar.al/tags/template\" class=\"mention hashtag\" rel=\"tag\">#<span>template</span></a> <a href=\"https://mastodon.ar.al/tags/declarativeShadowDOM\" class=\"mention hashtag\" rel=\"tag\">#<span>declarativeShadowDOM</span></a> <a href=\"https://mastodon.ar.al/tags/NodeJS\" class=\"mention hashtag\" rel=\"tag\">#<span>NodeJS</span></a> <a href=\"https://mastodon.ar.al/tags/web\" class=\"mention hashtag\" rel=\"tag\">#<span>web</span></a> <a href=\"https://mastodon.ar.al/tags/dev\" class=\"mention hashtag\" rel=\"tag\">#<span>dev</span></a></p>"
},
"updated": "2025-03-18T16:40:11Z",
"attachment": [
{
"type": "Document",
"mediaType": "image/png",
"url": "https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/183/236/507/245/933/original/0772f920d943a973.png",
"name": "Screenshot of code (left) and browser output (right).\n\nCode:\n\n<p>I am regular root</p>\n<div>\n <template shadowrootmode='open'>\n <p>I am shadow root</p>\n <slot></slot>\n <style>\n p { color: red; }\n </style>\n </template>\n</div>\n<p>I am also regular root</p>\n<style>\n p { color: blue; }\n</style>\n\nBrowser output shows “I am regular root” in blue, “I am shadow root” in red, and “I am also regular root” in blue.",
"blurhash": "UoPQ23RkITkBWBj?WXaz02ogk7axj[ayWCj[",
"width": 2338,
"height": 876
}
],
"tag": [
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/kitten",
"name": "#kitten"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/SmallWeb",
"name": "#SmallWeb"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/smalltech",
"name": "#smalltech"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/css",
"name": "#css"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/cssscoping",
"name": "#cssscoping"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/shadowdom",
"name": "#shadowdom"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/shadowroot",
"name": "#shadowroot"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/dom",
"name": "#dom"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/html",
"name": "#html"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/javascript",
"name": "#javascript"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/js",
"name": "#js"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/style",
"name": "#style"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/template",
"name": "#template"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/declarativeshadowdom",
"name": "#declarativeshadowdom"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/nodejs",
"name": "#nodejs"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/web",
"name": "#web"
},
{
"type": "Hashtag",
"href": "https://mastodon.ar.al/tags/dev",
"name": "#dev"
},
{
"id": "https://mastodon.ar.al/emojis/134702",
"type": "Emoji",
"name": ":kitten:",
"updated": "2022-11-25T18:34:32Z",
"icon": {
"type": "Image",
"mediaType": "image/png",
"url": "https://s3-eu-central-1.amazonaws.com/mastodon-aral/custom_emojis/images/000/134/702/original/3630b351addf5d80.png"
}
}
],
"replies": {
"id": "https://mastodon.ar.al/users/aral/statuses/114183236567805950/replies",
"type": "Collection",
"first": {
"type": "CollectionPage",
"next": "https://mastodon.ar.al/users/aral/statuses/114183236567805950/replies?only_other_accounts=true&page=true",
"partOf": "https://mastodon.ar.al/users/aral/statuses/114183236567805950/replies",
"items": []
}
},
"likes": {
"id": "https://mastodon.ar.al/users/aral/statuses/114183236567805950/likes",
"type": "Collection",
"totalItems": 8
},
"shares": {
"id": "https://mastodon.ar.al/users/aral/statuses/114183236567805950/shares",
"type": "Collection",
"totalItems": 3
}
}