Create a widget

Name: Appinapp
Price: 1.99 USD
Availability: InStock
Author: developerbola

How to build, package, and organize a widget for Appinapp.

use this prompt to create widget with AI you want to use:
this is widget scheme: https://appinapp.mutawirr.uz/schema.md, create a widget of

or continue width

Repo naming

Your widget should be on a public GitHub repo which name ends with .widget. Also your production widget branch should be always main.

Clock.widget

When the app installs: it git clones the repo into the widget folder
(~/.appinapp/) as Clock.widget/. The folder name (minus .widget) becomes
the widget's name.

On proccess of installing widget, app deletes widget junks: README.md, widget.json and screenshot.png from widget folder

Folder layout

Every widget folder must contain these four files at its root:

Clock.widget/
├── widget.json      # manifest (metadata)
├── index.jsx        # widget code (index.js also accepted)
├── screenshot.png   # preview image for the gallery
└── README.md        # docs: what it does, how to customize

A widget is only recognized if the folder ends in .widget and contains an
index.js or index.jsx. Without index, the app skips the folder.

`widget.json`

Plain JSON. All four fields required:

{
  "name": "Widget name",
  "description": "A little description about widget features.",
  "author": "author name",
  "email": "author-example@gmail.com"
}

Field	Purpose
`name`	Display name in the gallery
`description`	Short feature blurb
`author`	Your name / handle
`email`	Contact for the listing

`index.jsx`

The app loads index.jsx, compiles JSX in place, and reads its exports. You
export a default React component, plus optional config exports.

Imports — limited environment

Only two modules resolve inside a widget:

import React from "react";             // → window.React
import { Clock } from "lucide-react";  // → window.Lucide

Any other import throws Module <name> not found in widget environment. No
npm deps. Bring your own logic in the file.

Minimal widget

import React from "react";

export default function Widget() {
  return <div className="widget">Hello</div>;
}

Widget props

The app provides you output, error, run:

import React from "react";

export default function Widget({ output, error, run }) {
  return <div></div>;
}

Prop	What it is
`output`	stdout string from your `command` (see below)
`error`	error if the command failed
`run`	`async (cmd) => stdout` — run a shell command in the widget dir

Optional exports (widget config)

// Shell command run on mount; its stdout arrives as the `output` prop
export const command = "date +%H:%M:%S";

// Re-run `command` every N milliseconds
export const refreshFrequency = 1000;

// CSS injected as a <style> tag while the widget is mounted
export const className = `
  .widget { font-family: monospace; color: #fff; }
`;

// Initial window geometry (logical pixels)
export const width = 200;
export const height = 80;
export const y = 40;
export const x = 40;

Export	Type	Effect
`default`	Component	The widget UI (or export `render`)
`command`	string	Shell command, stdout → `output` prop
`refreshFrequency`	number	ms interval to re-run `command`
`className`	string	CSS injected as `<style>`
`height` `width`	number	Initial window size
`x` `y`	number	Initial window position

Full example

import React from "react";

export const command = "date +%H:%M:%S";
export const refreshFrequency = 1000;
export const width = 200;
export const height = 80;

export const className = `
  .clock { font: 600 28px monospace; color: #fff; padding: 12px; }
`;

export default function Clock({ output, error }) {
  if (error) return <div className="clock">err</div>;
  return <div className="clock">{output || "--:--:--"}</div>;
}

`screenshot.png`

A preview image shown in the app gallery. Capture your widget running.

`README.md`

Describe what the widget does and how to customize it. Shown to users who open
your widget's source.