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

YakiHonne

10. November 2025November 10, 2025 · 14 Min. Lesezeit14 min read

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.

image
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:

Use Cases:

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.

image
Figure 2: Anatomy of a Basic Widget showing image, input field, and multiple button components
image
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:

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:

image
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:

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

image
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:

  1. Select your widget type (Basic, Action, or Tool)
  2. Add images, input fields, and buttons through a GUI
  3. Configure button actions (redirect, Nostr, zap, post, app)
  4. Preview your widget in real-time
  5. Publish directly to Nostr relays
  6. Share your widget's naddr address

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

image
Figure 6: YakiHonne Widget Editor interface showing the visual builder with drag-and-drop components
image
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:

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

Dynamic Widget Flow#

image

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

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

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

  2. 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);
  1. 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"]
  }
}
  1. Deploy and Register: Deploy to any hosting service (Vercel, Netlify, GitHub Pages) and register via the YakiHonne Widget Editor.
image
Figure 8: Complete mini-app development workflow from building to deployment to registration

Mini-App Architecture#

image

Button Types: Powerful Interaction Models#

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

Button Types for Basic Widgets#

Button Type for 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#

image

Widget Chaining Flow (POST Button)#

image

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:

  1. YakiSum AI Summarizer: An AI-powered tool that summarizes long-form content
  2. Zap Poll: Interactive polls with Lightning payment integration
  3. Create Curations: A tool for organizing topic-related content
  4. Create Videos: Video creation and publishing widget
  5. BullishCalc: A cryptocurrency calculator widget
  6. Event Ticket Widget: Ticketing system embedded in Nostr
  7. Swipestr: A Tinder-like interface for Nostr content
  8. Delete Your Notes: A utility tool for managing Nostr events
  9. Zap Tracker: Track and visualize Lightning payment activity
  10. 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.

image
Figure 9: Grid showcase of existing mini-apps including YakiSum, Zap Poll, BullishCalc, and others
image
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:

The playground significantly reduces development friction by catching issues early in the development cycle. image 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#

Authentication#

Security Layers Diagram#

image

Technical Architecture#

System Flow Diagram#

image

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:

Event Structure Breakdown#

image

Communication Protocol#

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

Host → Client (Widget):

Client (Widget) → Host:

Message Types Reference#

image

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#

Commerce & Payments#

Content & Media#

Utilities & Tools#

AI & Automation#

Use Cases Overview#

image

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:

  1. Nostr Tools: NIP-05 services, relay tools, plugins
  2. Payment Solutions: Lightning, stablecoins, merchant tools
  3. AI Interaction: Bots, content recommenders, smart media
  4. 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:#

  1. Visit yakihonne.com/smart-widget-builder
  2. Choose "Basic Widget"
  3. Add your content and configure buttons
  4. Preview and publish
  5. Share your naddr address on Nostr

For Developers:#

  1. Install the builder: npm install smart-widget-builder
  2. 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:#

  1. Build your web app
  2. Install handler: npm install smart-widget-handler
  3. Add iframe communication
  4. Create /.well-known/widget.json
  5. Deploy and register via YakiHonne

Development Workflow Roadmap#

image

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:

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#

npm Packages#

Source Code & Examples#

Video Tutorials#

Community#

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

Written by

YakiHonne

YakiHonne is a Bitcoin-native, open-source social payment client on Nostr — sovereign content, Lightning payments, and programmable infrastructure for the open internet.

Comments

No comments yet. Start the conversation.

Contents

17 sections

  1. Introduction: Beyond Static Notes
  2. The Three Types of Smart Widgets
  3. The Developer Experience: Multiple Paths to Success
  4. Button Types: Powerful Interaction Models
  5. Integration for Nostr Clients
  6. Real-World Examples: The Agentic Mini Apps Ecosystem
  7. The Playground: Testing Before Publishing
  8. Security Considerations
  9. Technical Architecture
  10. The Package Ecosystem
  11. Use Cases Across Industries
  12. The Hackathon: Building the Future
  13. Why Smart Widgets Matter
  14. Getting Started: Your First Widget
  15. The Road Ahead
  16. Conclusion: Building the Interactive Web, Decentralized
  17. Resources