Developer · Internal tooling · Product
Document a live interface
An example readers can actually try.
Documentation brief
Document the team activity inbox: filter unread events, inspect details and mark activity as read.
FieldnotesActivity / Team inbox
Local demoYour team, at a glance.
Filter events, open their details and clear unread activity.
Yesterday · Alex joined the workspace · Read
WHAT THIS MAKES EASIER
Readers can explore a working activity stream while the annotations explain each control. Copy the source into your handbook.
Inspect plan, source & verification
Actual schema-valid React plan. Targets refer to source refs; this JSON is never executed by the drawing runtime. After installing @funsaized/stet, copy to annotation-plan.json and run ./node_modules/.bin/stet validate annotation-plan.json --json.
{
"version": 1,
"framework": "react",
"intent": "Document filtering, event details and read state in a live inbox.",
"annotations": [
{
"id": "filter",
"primitive": "underline",
"targets": [
{
"strategy": "ref",
"file": "website/src/showcase/Activity.tsx",
"locator": "filter",
"description": "Unread filter"
}
],
"options": {
"seed": 91,
"description": "Filter the activity stream to unread events.",
"stroke": "#416ba0"
}
},
{
"id": "event",
"primitive": "highlight",
"targets": [
{
"strategy": "ref",
"file": "website/src/showcase/Activity.tsx",
"locator": "event",
"description": "Expandable activity event; visible in current filter"
}
],
"options": {
"seed": 92,
"description": "Open an event to inspect its details.",
"fill": "#e3b937"
}
},
{
"id": "read",
"primitive": "circle",
"targets": [
{
"strategy": "ref",
"file": "website/src/showcase/Activity.tsx",
"locator": "read",
"description": "Mark all read"
}
],
"options": {
"seed": 93,
"description": "Mark all activity as read.",
"stroke": "#426650"
}
}
]
}