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.

Thread