# NIP-22 Smart Widgets

Smart Widgets are customizable, interactive components that can be embedded within Nostr events and allow to create rich, dynamic content. This proposal outlines the structure, implementation, and potential use cases of Smart Widgets.

## Motivation
Traditional static content limits user interaction and engagement. Smart Widgets provide a way to embed dynamic components, such as buttons, images, and polls, directly into Nostr events, enabling more interactive and responsive content.

## Event kind
A new addressable event kind is proposed for Smart Widgets kind 30031. This event kind will encapsulate the data necessary to render and interact with the Smart Widgets.

## Event Structure
The content of these events `MUST` be of stringified JSON of any `mime-type` and `<data>`. It is required and can't be empty.
For more info [see](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)

The list of tags are as follows:

`d` (required) universally unique identifier (UUID). Generated by the client creating the smart widget event.
`title` (optional) title of the smart widget.
`summary` (optional) description of the smart widget and its usage.
`client` (optional) reference for the used client for creating the smart widget according to [NIP-89](../blob/master/89.md).
`published_at` (optional) Publishing time of the smart widget differs from the created_at for edited smart widgets.
```
{
	"id": <32-bytes lowercase hex-encoded SHA-256 of the the serialized event data>,
	"pubkey": <32-bytes lowercase hex-encoded public key of the event creator>,
	"created_at": <Unix timestamp in seconds>,
	"kind": 30031,
	"content": {
		"mimeType": <mime-type>,
		"data": <data>
	},
	"tags": [
		["d", "UUID"],
		["title", "<title of smart widget event>"],
		["summary", "<description of smart widget event>"],
		["client", "<client_name>", "31990:app1_pubkey:<d_identifier>"],
		["published_at", "<Unix timestamp in seconds>"],
	]
}
```
A stringified JSON of the kind 30031 smart widget would look like this:
```
{
    "created_at": 1725188436112,
    "kind": 30031,
    "tags": [
        [
            "d",
            "534304df-be5e-47bf-a761-1e6515e3ca75"
        ],
        [
            "client",
            "My Client",
            "31990:app1-pubkey:<d-identifier>"
        ],
        [
            "title",
            "Learn how to set up Nostr Relay with relays.xport.top article"
        ],
        [
            "summary",
            "Take control of your relay lists, or let them control you."
        ],
        [
            "published_at",
            1725188436112
        ]
    ],
    "content": "{\"mimeType\": \"image/svg+xml\", \"data\": '<svg viewBox=\"0 0 10 5\" xmlns=\"http://www.w3.org/2000/svg\"><a href=\"https://relays.xport.top\" target=\"_blank\"><rect width=\"10\" height=\"5\"><animate attributeName=\"rx\" values=\"0;5;0\" dur=\"2s\" repeatCount=\"indefinite\" /></rect></a></svg>'}",
    "pubkey": "b12e28991eae808d408208743f382d99b777c51887286c6002258b5bed9d9c8b",
    "id": "9fa84aa80a6d69000e887809001343884e2d7e8612b9d83010e9a709b93b5ead",
    "sig": "899fbf179cc781cb5951171d4500f56b2bc953f816f425fe049183929aef338441c21125bed7d0b969d0f26899b03b6991db69c073b7ed3a7ae99e29f4abd43c"
}
```