⚙️ Interactive content, natively on Nostr ...

⚙️ Interactive content, natively on Nostr

quoting naddr1qv…p7g2

YakiHonne Smart Widgets: Building the Future of Interactive Content on Nostr

Introduction: Beyond Static Notes

The Nostr protocol has revolutionized decentralized social media, but traditional notes have always been limited to static content. Enter Smart Widgets — a groundbreaking feature from YakiHonne that transforms how users interact with content on Nostr. Smart Widgets are interactive graphical components encapsulated as Nostr events (kind 30033, Draft NIP PR #2025), designed to bring rich, dynamic experiences directly into the decentralized social feed.

Imagine scrolling through your Nostr feed and encountering a mini calculator, an interactive poll, a weather widget, or even a full mini-game — all without leaving your client. That's the power of Smart Widgets.

Figure 1: Example of Smart Widgets appearing in a Nostr feed with interactive components

The Three Types of Smart Widgets

YakiHonne has designed three distinct widget types, each serving specific purposes and use cases:

1. Basic Widgets: The Swiss Army Knife

Basic Widgets are the most versatile type, combining multiple UI components for flexible interaction. They can include: - One mandatory image - One optional input field - Up to six buttons with various actions

Use Cases: - Interactive forms and surveys - Dynamic dashboards displaying real-time data - Multi-step processes with user input - Content with multiple call-to-action buttons

Basic Widgets excel when you need to combine visual elements with user inputs, making them perfect for complex interactions like registration forms, quizzes, or multi-option content pieces.

Figure 2: Anatomy of a Basic Widget showing image, input field, and multiple button components

Figure 3: Examples of Basic Widgets including forms, polls, and interactive content

2. Action Widgets: Launch and Go

Action Widgets are streamlined for single-purpose actions. They feature: - A visual representation (image) - An identification icon - A single button that opens a URL in an iframe

The key characteristic of Action Widgets is their one-way interaction — they launch an application or resource without expecting data to return to the parent application.

Use Cases: - Launching external mini-games - Opening third-party applications - Triggering one-way interactions - Quick-access tools that don't need to communicate back

Figure 4: Action Widget example showing how it launches an external application

3. Tool Widgets: The Data Exchange Specialists

Tool Widgets share the same structure as Action Widgets but with a crucial difference: two-way data communication. They open iframes configured to exchange data with the parent application.

Use Cases: - Data retrieval tools - Configuration interfaces - Analytics providers - Search and lookup services - Content recommendation engines

Tool Widgets enable sophisticated interactions where the embedded application needs to send results back to the Nostr client or receive user context.

Figure 5: Side-by-side comparison of Action Widgets (one-way) vs Tool Widgets (two-way communication)

The Developer Experience: Multiple Paths to Success

One of Smart Widgets' greatest strengths is its accessibility to developers of all skill levels. YakiHonne provides three distinct paths to create widgets:

Path 1: No-Code Creation

For non-technical users or those wanting to prototype quickly, the YakiHonne Widget Editor (available at yakihonne.com/smart-widget-builder) offers a visual interface where you can:

Select your widget type (Basic, Action, or Tool)

Add images, input fields, and buttons through a GUI

Configure button actions (redirect, Nostr, zap, post, app)

Preview your widget in real-time

Publish directly to Nostr relays

Share your widget's naddr address

This approach requires zero coding knowledge and allows creators to deploy functional widgets in minutes.

Figure 6: YakiHonne Widget Editor interface showing the visual builder with drag-and-drop components

Figure 7: Step-by-step process of creating a widget using the no-code editor

Path 2: Dynamic Basic Widgets with Code

For developers who need dynamic content or want to integrate widgets with their backends, the smart-widget-builder npm package provides programmatic control:
import { SW, Image, Button, Input, SWComponentsSet } from 'smart-widget-builder';

async function createWidget() {
  const smartWidget = new SW('basic');
  await smartWidget.init();

  const widgetImage = new Image('![image](https://example.com/image.jpg)');
  const widgetInput = new Input('Enter your name');
  const submitButton = new Button(1, 'Submit', 'post', 'https://api.example.com/submit');

  const componentsSet = new SWComponentsSet([widgetImage, widgetInput, submitButton]);

  const result = await smartWidget.publish(componentsSet, 'My Widget', 'unique-id-123');
  return result;
}
This approach enables: - API endpoints that generate widgets dynamically - Widgets that update based on real-time data - Personalized content for different users - Complex business logic integration

The sw-dynamic-api boilerplate provides a complete Express.js setup for building dynamic widget APIs.

Dynamic Widget Flow

Path 3: Full Mini-Apps (Action/Tool Widgets)

For developers building complete applications that integrate with Nostr, the process involves:

Build Your Application: Create a web app using any framework (React, Vue, vanilla JS, etc.)

Add Nostr Integration using the smart-widget-handler package:
import SWHandler from 'smart-widget-handler';

// Determine the host origin securely
const hostOrigin = new URL(document.referrer || window.location.origin).origin;

// Notify parent that your app is ready
SWHandler.client.ready();

// Listen for user data from the Nostr client
SWHandler.client.listen((data) => {
  if (data.kind === 'user-metadata') {
    const user = data.data.user;
    console.log(`Connected user: ${user.display_name}`);
  }
});

// Request the client to sign a Nostr event
const event = {
  content: "Hello from my widget!",
  kind: 1,
  tags: []
};
SWHandler.client.requestEventSign(event, hostOrigin);
Create Widget Manifest: Place a widget.json file at /.well-known/widget.json:
{
  "pubkey": "your-nostr-pubkey-in-hex",
  "widget": {
    "title": "My Amazing Widget",
    "appUrl": "https://your-app.vercel.app",
    "iconUrl": "![image](https://your-app.vercel.app/icon.png)",
    "imageUrl": "![image](https://your-app.vercel.app/preview.jpg)",
    "buttonTitle": "Launch App",
    "tags": ["utility", "tool"]
  }
}
Deploy and Register: Deploy to any hosting service (Vercel, Netlify, GitHub Pages) and register via the YakiHonne Widget Editor.

Figure 8: Complete mini-app development workflow from building to deployment to registration

Mini-App Architecture

Button Types: Powerful Interaction Models

Smart Widgets support five distinct button types, each enabling different interaction patterns:

Button Types for Basic Widgets

redirect: Opens a standard web link in a new tab/window

nostr: Handles Nostr protocol actions (npub/note identifiers, nostr: URIs)

zap: Initiates Lightning payments via addresses or invoices

post: Submits input data to a URL and expects a widget response (enabling widget chains)

Button Type for Action/Tool Widgets

app: Opens a URL in an iframe (exclusive to Action/Tool widgets)

Note: Basic widgets can use up to 6 buttons combining redirect, nostr, zap, and post types. Action and Tool widgets must use exactly 1 button of type app only.

The post button type is particularly powerful — it allows widgets to update themselves dynamically or chain to other widgets based on user actions, creating sophisticated multi-step experiences.

Button Types Overview

Widget Chaining Flow (POST Button)

Integration for Nostr Clients

For Nostr client developers wanting to support Smart Widgets, YakiHonne provides the smart-widget-previewer React component:
import { Widget } from 'smart-widget-previewer';

function WidgetRenderer({ widgetEvent }) {
  return (
    <Widget 
      event={widgetEvent}
      onNextWidget={(newWidget) => console.log('Widget updated:', newWidget)}
      onNostrButton={(url) => handleNostrAction(url)}
      onZapButton={(address) => handleZapAction(address)}
      onActionWidget={(url) => openInIframe(url)}
      width={300}
      widthUnit="px"
    />
  );
}
The previewer handles all widget types automatically and provides callback hooks for client-specific implementations of zaps, Nostr actions, and iframe management.

Real-World Examples: The Agentic Mini Apps Ecosystem

YakiHonne has fostered an entire ecosystem of mini-apps built as Smart Widgets. The agentic-mini-apps repository showcases diverse implementations:

YakiSum AI Summarizer: An AI-powered tool that summarizes long-form content

Zap Poll: Interactive polls with Lightning payment integration

Create Curations: A tool for organizing topic-related content

Create Videos: Video creation and publishing widget

BullishCalc: A cryptocurrency calculator widget

Event Ticket Widget: Ticketing system embedded in Nostr

Swipestr: A Tinder-like interface for Nostr content

Delete Your Notes: A utility tool for managing Nostr events

Zap Tracker: Track and visualize Lightning payment activity

AI Habit Tracker: Personal productivity tool with AI assistance

These examples demonstrate Smart Widgets' versatility — from simple utilities to complex AI-powered applications, all accessible directly from Nostr posts.

Figure 9: Grid showcase of existing mini-apps including YakiSum, Zap Poll, BullishCalc, and others

Figure 10: Interactive sequence showing a user engaging with a mini-app widget in their feed

The Playground: Testing Before Publishing

YakiHonne provides an interactive Playground where developers can test their widgets in a live Nostr client environment before publishing. This hands-on testing environment allows you to:

Test iframe communication

Verify user metadata passing

Debug event signing flows

Ensure proper rendering across different widget types

Validate the widget manifest

The playground significantly reduces development friction by catching issues early in the development cycle. Figure 11: YakiHonne Playground interface showing widget testing environment

Security Considerations

Smart Widgets implement several security measures:

Iframe Security

Proper iframe sandboxing:
<iframe
  src="https://your-widget-app.example"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-forms allow-popups allow-same-origin"
></iframe>
Content Security Policy (CSP) header example:
Content-Security-Policy:
  default-src 'none';
  frame-ancestors 'self';
  img-src https: data:;
  script-src 'self';
  connect-src https:;
  style-src 'self' 'unsafe-inline';
Secure postMessage handling:
window.addEventListener('message', (e) => {
  const allowed = new URL(document.referrer || '').origin;
  if (allowed && e.origin !== allowed) return; // reject unauthorized origins
  // handle message safely
});
Input Validation

All user inputs must be sanitized before processing

URL validation on all button and image URLs

Widget manifest validation against schema

Authentication

Widget creators verified through Nostr public keys

Iframe applications verify parent origin before accepting messages

Event signatures validated before processing interactions

Security Layers Diagram

Technical Architecture

System Flow Diagram

Event Structure

Smart Widgets use addressable event kind 30033 (Draft NIP PR #2025) following the standard Nostr event format:
{
  "kind": 30033,
  "content": "Weather Widget",
  "tags": [
    ["d", "weather-widget-uuid-123"],
    ["l", "basic"],
    ["image", "![image](https://example.com/weather-preview.jpg)"],
    ["input", "Enter your city"],
    ["button", "Get Weather", "post", "https://api.example.com/weather"],
    ["button", "Share", "nostr", "nostr:note1..."]
  ]
}
Field Descriptions: - kind: Always 30033 for Smart Widgets (Draft NIP PR #2025) - content: Widget title displayed to users - d tag: Unique identifier (recommended: UUID) - l tag: Widget type (basic, action, or tool) - image tag: Preview/thumbnail image URL - icon tag: Widget icon (required for action/tool widgets) - input tag: Input field placeholder (max 1, basic widgets only) - button tags: Action buttons - Basic widgets: Max 6 buttons (types: redirect, nostr, zap, post) - Action/Tool widgets: Exactly 1 button (type: app only)

Event Structure Breakdown

Communication Protocol

The smart-widget-handler facilitates communication between host applications and embedded widgets using window.postMessage. It supports multiple message types: Message Types:

Host → Client (Widget): - user-metadata: Connected Nostr account information - nostr-event: Signed/published Nostr events - err-msg: Error messages - payment-response: Payment request results

Client (Widget) → Host: - app-loaded: Widget ready notification - sign-event: Event signing request - sign-publish: Sign and publish request - payment-request: Lightning payment request - custom-data: Custom application data

Message Types Reference

The Package Ecosystem

YakiHonne maintains three core npm packages that power the Smart Widgets ecosystem:

1. smart-widget-builder

Purpose: Create and publish widgets programmatically
Use Case: Backend APIs, dynamic content generation
Install: npm install smart-widget-builder

2. smart-widget-previewer

Purpose: React component for displaying widgets
Use Case: Nostr client integration
Install: npm install smart-widget-previewer

3. smart-widget-handler

Purpose: Parent-child iframe communication
Use Case: Mini-app development, client integration
Install: npm install smart-widget-handler

Each package is well-documented, maintained, and available on npm, making integration straightforward for developers.

Use Cases Across Industries

Smart Widgets open possibilities across numerous domains:

Social & Community

Interactive polls and surveys

Community voting systems

Event RSVPs and ticketing

Profile enrichment tools

Commerce & Payments

Product catalogs with Lightning payments

Tip jars and donation widgets

Price calculators

Payment split tools

Content & Media

AI content summarizers

Video players with engagement tracking

Audio widgets with zap streaming

Gallery viewers

Utilities & Tools

NIP-05 verification services

Relay management tools

Key converters and validators

Analytics dashboards

AI & Automation

Chatbots and assistants

Content recommendation engines

Auto-responders

Sentiment analysis tools

Use Cases Overview

The Hackathon: Building the Future

YakiHonne is running the Agentic Mini Apps Hack on Nostr, a hackathon with a 10,000,000 sats prize pool to encourage Smart Widget development. The competition focuses on four tracks:

Nostr Tools: NIP-05 services, relay tools, plugins

Payment Solutions: Lightning, stablecoins, merchant tools

AI Interaction: Bots, content recommenders, smart media

Innovative Use Cases: Any decentralized application idea

This initiative demonstrates YakiHonne's commitment to fostering an ecosystem where developers can monetize their creativity while enriching the Nostr experience for all users.

Why Smart Widgets Matter

Smart Widgets represent more than just a feature — they're a paradigm shift in how we think about decentralized social media:

1. Interoperability

Widgets are protocol-level features, not platform-specific. Any Nostr client can implement Smart Widget support and access the entire ecosystem.

2. Composability

Widgets can chain together, reference each other, and build upon existing functionality, creating compound experiences greater than the sum of their parts.

3. Monetization

Developers can build once and reach all Nostr users, with Lightning payments natively integrated for seamless monetization.

4. User Experience

Users get app-like experiences without downloads, installations, or leaving their social feed — reducing friction and increasing engagement.

5. Innovation Velocity

The low barrier to entry enables rapid prototyping and iteration, accelerating innovation in the Nostr ecosystem.

Getting Started: Your First Widget

Ready to build your first Smart Widget? Here's a quick-start guide:

For Non-Developers:

Visit yakihonne.com/smart-widget-builder

Choose "Basic Widget"

Add your content and configure buttons

Preview and publish

Share your naddr address on Nostr

For Developers:

Install the builder: npm install smart-widget-builder

Create a simple widget:
import { SW, Image, Button, SWComponentsSet } from 'smart-widget-builder';

async function quickStart() {
  const sw = new SW('basic');
  await sw.init();
  
  const components = new SWComponentsSet([
    new Image('![image](https://your-image.jpg)'),
    new Button(1, 'Click Me', 'redirect', 'https://your-site.com')
  ]);
  
  await sw.publish(components, 'My First Widget');
}
For Mini-App Developers:

Build your web app

Install handler: npm install smart-widget-handler

Add iframe communication

Create /.well-known/widget.json

Deploy and register via YakiHonne

Development Workflow Roadmap

The Road Ahead

Smart Widgets are still evolving. The NIP specification is in draft status, with the community actively providing feedback and suggestions. YakiHonne continues to improve the tooling, documentation, and developer experience based on real-world usage.

Future developments may include: - Enhanced widget analytics - Better discovery mechanisms - Advanced caching strategies - More sophisticated widget chaining - Native mobile support improvements - Extended payment options

Conclusion: Building the Interactive Web, Decentralized

YakiHonne Smart Widgets demonstrate what's possible when you combine thoughtful design, powerful primitives, and an open protocol. They transform Nostr from a simple text-based network into a platform capable of hosting rich, interactive experiences rivaling centralized alternatives.

Whether you're a creator wanting to engage your audience with interactive polls, a developer building the next viral mini-game, or a business looking to integrate Lightning payments into your social presence — Smart Widgets provide the foundation.

The future of social media isn't just decentralized; it's interactive, composable, and programmable. Smart Widgets are leading the way.

Resources

Documentation & Tools

Documentation: https://yakihonne.com/docs/sw/intro

Widget Editor: https://yakihonne.com/smart-widget-builder

NIP Specification (Draft): https://github.com/nostr-protocol/nips/pull/2025

npm Packages

smart-widget-builder: https://www.npmjs.com/package/smart-widget-builder

smart-widget-previewer: https://www.npmjs.com/package/smart-widget-previewer

smart-widget-handler: https://www.npmjs.com/package/smart-widget-handler

Source Code & Examples

smart-widget-builder: https://github.com/YakiHonne/smart-widget-builder

smart-widget-previewer: https://github.com/YakiHonne/smart-widget-previewer

smart-widget-handler: https://github.com/YakiHonne/smart-widget-handler

sw-dynamic-api (Boilerplate): https://github.com/YakiHonne/sw-dynamic-api

YakiHonne Web App: https://github.com/YakiHonne/web-app

Agentic Mini Apps: https://github.com/YakiHonne/agentic-mini-apps

Video Tutorials

Action/Tool Smart Widgets Part 1: https://www.youtube.com/watch?v=SS-5N-LVCPM

Action/Tool Smart Widgets Part 2: https://www.youtube.com/watch?v=4NfMqjkRKnQ

Action/Tool Smart Widgets Part 3: https://www.youtube.com/watch?v=VGCEEGfIo_I

Community

Join Nostr: Search for Smart Widget discussions and examples

YakiHonne Platform: https://yakihonne.com

Ready to build? The Nostr ecosystem is waiting for your creativity.

YakiHonne on Nostr: ⚙️ Interactive content, natively on Nostr ...

YakiHonne Smart Widgets: Building the Future of Interactive Content on Nostr

Introduction: Beyond Static Notes

The Three Types of Smart Widgets

1. Basic Widgets: The Swiss Army Knife

2. Action Widgets: Launch and Go

3. Tool Widgets: The Data Exchange Specialists

The Developer Experience: Multiple Paths to Success

Path 1: No-Code Creation

Path 2: Dynamic Basic Widgets with Code

Dynamic Widget Flow

Path 3: Full Mini-Apps (Action/Tool Widgets)

Mini-App Architecture

Button Types: Powerful Interaction Models

Button Types for Basic Widgets

Button Type for Action/Tool Widgets

Button Types Overview

Widget Chaining Flow (POST Button)

Integration for Nostr Clients

Real-World Examples: The Agentic Mini Apps Ecosystem

The Playground: Testing Before Publishing

Security Considerations

Iframe Security

Input Validation

Authentication

Security Layers Diagram

Technical Architecture

System Flow Diagram

Event Structure

Event Structure Breakdown

Communication Protocol

Message Types Reference

The Package Ecosystem

1. smart-widget-builder

2. smart-widget-previewer

3. smart-widget-handler

Use Cases Across Industries

Social & Community

Commerce & Payments

Content & Media

Utilities & Tools

AI & Automation

Use Cases Overview

The Hackathon: Building the Future

Why Smart Widgets Matter

1. Interoperability

2. Composability

3. Monetization

4. User Experience

5. Innovation Velocity

Getting Started: Your First Widget

For Non-Developers:

For Developers:

For Mini-App Developers:

Development Workflow Roadmap

The Road Ahead

Conclusion: Building the Interactive Web, Decentralized

Resources

Documentation & Tools

npm Packages

Source Code & Examples

Video Tutorials

Community