Create A Widget

Start from a small view tree, then add data, panels, timelines, and intents only when needed.

Steps

1. Create or open an Await widget project.
2. Keep package.json and tsconfig.json at the package root, with each Await widget in its own subdirectory. This makes it easier to manage multiple Await widget subprojects in one package:

MyAwaitWidgets/
  package.json
  tsconfig.json
  YourWidget/
    index.tsx

3. Ensure package.json includes @await-widget/runtime and typescript.
4. Ensure tsconfig.json uses:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "await",
    "types": ["@await-widget/runtime"]
  }
}

5. Import components from await.
6. Implement widget.
7. Register it with Await.define.
8. Run npm test.
9. Run npx await-widget from the widget folder and connect the matching Await detail page when you want live preview.

Starter Template

import {Text, VStack} from 'await';

// @panel {type:'color'}
const accent = 'blue';

function widget() {
	return (
		<VStack spacing={8} maxSides padding={16} background='background'>
			<Text value='Await' fontSize={18} fontWeight='semibold'/>
			<Text value='Small things, close at hand' foreground={accent} minimumScaleFactor={0.7}/>
		</VStack>
	);
}

Await.define({
	widget,
});

AI Checklist

• Use only components listed in Await.
• Use only props and modifiers listed in Prop.
• Put padding before background when the background should include the padded area.
• Use maxSides on the root when the widget should fill the available size.
• Add stable id values for animated or changing visual entities.