Getting started

Smart Widgets—Basic, Action, and Tool—enable interactive, Nostr-powered components for your applications. Below is a streamlined guide to creating and integrating them, tailored for developers and Nostr client implementers.

Creating Basic Widgets

Basic Widgets combine visuals (images), an optional input, and up to six buttons.

• No-Code Path: Use the YakiHonne Widget Editor to build static or dynamic widgets without coding. Choose from template endpoints or link a custom REST API that outputs valid widget JSON.

• Code-First Path: Build a custom API for full control. Install our helper package:

  npm install smart-widget-builder
  

  Or jumpstart with our boilerplate:

  git clone https://github.com/YakiHonne/sw-dynamic-api.git
  cd sw-dynamic-api
  npm install
  npm run dev
  

  Modify the API to generate widget data for your use case.

Building Action & Tool Widgets

Action Widgets open URLs in iframes (no data return), while Tool Widgets support data exchange.

1. Craft Your App: Develop a new app or repurpose a FOSS project.
2. Add Nostr Support: Integrate our SDK to offload Nostr tasks to the host:

   npm install smart-widget-handler
   

3. Test Locally: Debug with the YakiHonne Playground against a live Nostr client.
4. Expose Metadata: Place a widget.json file at /.well-known/widget.json on your public domain.
5. Go Live: Deploy your app and publish it via the YakiHonne Widget Editor , selecting “Action” or “Tool.”

Supporting Widgets in Nostr Clients

Enhance your Nostr client with widget compatibility:

• Handle Widget Interactions:

  npm install smart-widget-handler
  

  Enables communication with embedded widgets.

• Display Widget Events:

  npm install smart-widget-previewer
  

  Renders Nostr widget events in your client’s UI.

Pro Tips

• Validation: Ensure APIs and manifests conform to Smart Widget specs to avoid runtime errors.
• Security: Sandbox iframes and sanitize data to protect users.
• Performance: Optimize widget payloads for fast rendering in feeds.