Skip to content
Statecraft

All patterns

  • Bulk Actions

    Let users perform one action across many records safely, with clear scope, eligibility and recovery.

    Data

  • Advanced Filters

    Help users narrow large datasets with filters they can see, edit, share and recover from.

    Data

  • Autosave

    Save changes continuously without a Save button, while keeping users certain their work is safe.

    Forms

  • Approval Workflow

    Route a request through one or more reviewers with clear status, accountability and an auditable history.

    Workflow

  • AI Response

    Present generated answers with streaming, sources, control and recovery, so users can trust and verify them.

    AI

  • File Upload

    Let users add files with visible progress, early validation and recovery that never loses what already uploaded.

    Files

  • Command Palette

    Give users one keyboard-first entry point to jump anywhere and run any action without hunting through menus.

    Navigation

  • Subscription Management

    Let customers upgrade, downgrade, change billing cycles and cancel with exact prices, dates and consequences shown before they confirm.

    Payments

  • Refunds

    Let support staff or customers return money with the exact amount, destination, timing and consequences stated before it's irreversible.

    Payments

  • Checkout

    Take a customer from plan choice to paid with the fewest fields, a total that never surprises, and errors that keep what they typed.

    Payments

  • Failed Payment Recovery

    Recover failed renewals with timely, specific prompts and a grace period, before customers lose access they still want.

    Payments

  • Usage & Limits

    Show customers how much of their plan they've used and handle the moment they hit a limit without breaking their work.

    Payments

  • App Sidebar

    Organise a product's main navigation so users always know where they are, reach frequent places in one click, and keep their place on small screens.

    Navigation

  • Tabs

    Split one object's content into peer views that users switch between without losing their place, state or URL.

    Navigation

  • Breadcrumbs & Back

    Show users where they are in a hierarchy and get them back to exactly where they came from — filters, scroll and all.

    Navigation

  • File Preview

    Let users look inside a file without downloading it, with a predictable fallback for every type the product can't render.

    Files

  • Attachments

    Attach files to records and comments with clear ownership, visibility and deletion rules that match the record they belong to.

    Files

  • CSV Import

    Bring spreadsheet data into the product with column mapping, row-level validation and a preview, so nothing is imported by surprise.

    Files

  • Confirmation

    Ask for confirmation only when an action is hard to undo, and make the dialog state exactly what will happen.

    Workflow

  • Partial Failure

    Report operations where some items succeed and some fail, so users know exactly what happened and what to do about the rest.

    Workflow

  • Permissions

    Show people what they can do, explain what they can't, and give them a way forward instead of a dead end.

    Workflow

  • Notifications

    Tell people about things that need them, in the right channel and at the right volume, without burying what matters.

    Workflow

  • Activity History

    Show who changed what and when on a record, in a timeline people can scan, filter and trust.

    Data

  • Empty States

    Design what users see when there's nothing to show, so every empty screen explains why and offers the next useful step.

    Data

  • Version History

    Let users see earlier versions of a document or record, compare them, and restore safely without losing current work.

    Forms

  • Human Review

    Put a person between AI output and real-world consequences, with review that's fast for good output and careful for risky output.

    AI

  • Feedback

    Collect quick, specific feedback on AI output that users actually give, and that the team can actually use.

    AI

  • Inline Validation

    Tell users about input problems at the right moment — not while they're still typing, and not only after they submit.

    Forms

  • Unsaved Changes

    Protect work in forms that save explicitly, warning only when something would actually be lost.

    Forms

  • Offline Mode

    Keep users working when the connection drops, with an honest view of what's synced, what's pending and what can't be done offline.

    Forms

  • Search

    Help users find records by what they remember — a name, a number, a phrase — with results that explain why they matched.

    Data

  • Pagination

    Split long lists into pages or progressive loads in a way that keeps position, counts and selection predictable.

    Data

  • Saved Views

    Let users save a combination of filters, sorting and columns as a named view they and their team can return to.

    Data

  • Comments

    Let people discuss work where it happens — on the record or the exact part of it — with mentions, threads and resolution.

    Workflow

  • Error Recovery

    When something fails, say what happened in plain language, protect the user's work, and offer the most useful next step.

    Workflow

  • Keyboard Shortcuts

    Give frequent users fast keyboard paths that are discoverable, consistent and never get in the way of typing.

    Navigation

  • Prompt Input

    Design the box where users ask AI for things — with context, attachments and controls visible — so prompts start strong and never get lost.

    AI

  • AI Suggestions

    Offer AI-generated values, completions and next steps inline, so users accept good ones in one action and ignore the rest at no cost.

    AI

  • Agent Progress

    Show what an AI agent is doing during long, multi-step tasks — steps, tool use and decisions — so users can follow, steer and stop it.

    AI

  • AI Onboarding

    Introduce an AI feature by showing what it can do with the user's own data, setting honest expectations about limits and privacy.

    AI

  • Export

    Let users take their data out in the format they need, with a clear scope and no surprises about what's included.

    Files

  • Sharing & Links

    Let people share files and records with teammates or outsiders, with access levels and link scope that are impossible to misread.

    Files

  • Storage Limits

    Show how much storage is used and by what, and handle a full quota without blocking work or deleting anything.

    Files
FormsFree

Autosave

Save changes continuously without a Save button, while keeping users certain their work is safe.

8 states7 edge casesDesktop + Mobile

01The problem

Explicit Save buttons lose work when people forget them, close tabs or lose connection. Autosave removes that risk, but replaces it with uncertainty: users can no longer see when their work became safe, and failures that used to be loud become silent.

02When to use

Use when

  • Long-form editing: documents, descriptions, notes, settings pages with many fields
  • Editors where users work for minutes or hours in one session
  • Drafts that should survive a closed tab or crashed browser
  • Single-owner content, or collaborative content with clear conflict handling

Avoid when

  • Changes trigger side effects — sending an email, charging a card, publishing to customers. Use an explicit action.
  • A set of fields is only valid together, such as a billing address. Save the group on submit.
  • Users expect to experiment and discard, such as a filter builder or a pricing calculator.

03Recommended UX

Statecraft recommendation

Save on a short debounce after the user stops typing, and show one persistent, quiet status indicator near the title: “Saving…”, “Saved”, or a clearly escalated failure. Never let a failed save look like a successful one.

A status indicator in a fixed location builds trust through consistency. Toasts for every save are noise; no indicator at all leaves users pressing Cmd+S out of anxiety.

The success state should be quiet and the failure state loud. The asymmetry is the point: users only need to act when saving fails.

Debouncing at around one second balances server load with the risk window. Also save immediately on blur and before navigation.

04Interaction flow

  1. 01

    Clean

    Content matches the last saved version.

  2. 02

    User edits

    Status changes to “Unsaved changes” only if save is delayed.

  3. 03

    Debounce

    ~1s after the last keystroke, or immediately on blur.

  4. 04

    Saving

    Request in flight; further edits queue behind it.

  5. 05

    Server responds

    Version number checked to detect conflicts.

  6. Result

    • Saved
    • Retrying
    • Conflict
    • Offline

05Desktop behaviour

On desktop the status lives in the page header beside the title, where users look when they wonder whether their work is safe.

Desktop rules

  • Show a timestamp on hover or focus: “Saved at 14:32”.
  • Treat Cmd/Ctrl+S as “save now” — flush the debounce and confirm. Users will press it regardless.
  • Escalate failure from the indicator to an inline banner after the second failed retry.
  • Warn on tab close only when there are genuinely unsaved changes.
One quiet status indicator in a fixed place beside the title. Success stays muted; failure escalates in colour and wording.

06Mobile behaviour

Mobile adds unreliable connections and apps that are backgrounded without warning. Saving must be more eager and local persistence is essential.

Mobile rules

  • Save on app background and on keyboard dismiss, not only on debounce.
  • Persist drafts locally first, then sync. A backgrounded app can be killed at any moment.
  • Keep the status compact in the top bar — an icon plus one word.
  • Show offline state persistently, not as a toast that disappears.
Offline is a persistent state, not a toast. Editing continues and changes sync on reconnect.

07States

  • Saved

    Quiet: “Saved” in muted text. Timestamp available on hover.

  • Unsaved changes

    Shown only if a save is waiting for longer than a moment, e.g. while offline.

  • Saving

    “Saving…” with a subtle spinner. Do not block typing.

  • Retrying

    First failure retries automatically with backoff: “Couldn’t save. Retrying…”

  • Save failed

    Retries exhausted. Banner with Retry and Copy content. Do not dismiss automatically.

  • Offline

    “Offline — changes saved on this device.” Syncs automatically on reconnect.

  • Conflict

    Someone else saved a newer version. Editing pauses until the user chooses.

  • Read only

    Permission revoked mid-session. Inputs lock with an explanation; unsaved text stays copyable.

08Edge cases

  1. EC-01

    Navigating away mid-save

    The user clicks a link while a save request is in flight.

    Recommendation

    Flush and await the pending save before navigating within the app. For tab close, use the browser's unload warning only if the save hasn't completed.

  2. EC-02

    Edit conflict

    Two people edit the same record; the second save carries a stale version number.

    Recommendation

    Reject on the server, then show both versions: “Dana updated this 2 minutes ago.” Offer “Keep mine”, “Use theirs”, and a diff. Last-write-wins silently destroys work.

  3. EC-03

    Offline for a long time

    The user edits on a flight for two hours.

    Recommendation

    Persist to local storage, keep editing enabled, and sync on reconnect with the same conflict check. Show the offline state for the whole time, not just once.

  4. EC-04

    Validation errors

    The user empties a required field.

    Recommendation

    Don't save the invalid field, but keep saving the rest of the form. Show the field error inline and make the status read “Saved — 1 field needs attention”.

  5. EC-05

    Destructive edits

    The user selects all text and deletes it, or removes a section.

    Recommendation

    Autosave it, but keep version history and offer Undo for a few seconds. Autosave without undo turns a slip into data loss.

  6. EC-06

    Server rejects the save permanently

    A 4xx response — the record was deleted or permission was revoked.

    Recommendation

    Stop retrying, explain the cause and keep the user's content visible and copyable. Never discard text the user typed.

  7. EC-07

    Rapid typing on slow connections

    Saves take longer than the debounce interval.

    Recommendation

    Allow one request in flight at a time and coalesce queued edits into the next save. Out-of-order responses must not overwrite newer content.

09Microcopy

  • Success

    Avoid

    “Your changes have been saved successfully!”

    Prefer

    “Saved”

  • In progress

    Avoid

    “Please wait…”

    Prefer

    “Saving…”

  • Failure

    Avoid

    “Error”

    Prefer

    “Couldn’t save. Retrying…”

  • Offline

    Avoid

    “No connection”

    Prefer

    “Offline — changes saved on this device”

  • Conflict

    Avoid

    “Version mismatch”

    Prefer

    “Dana edited this 2 minutes ago. Choose which version to keep.”

10Accessibility

  • Put the status in a role="status" region, but only announce transitions to failure, offline and conflict — announcing every “Saved” is noise.
  • Status must not rely on colour alone. Pair colour with text and an icon.
  • Conflict resolution is a modal decision: move focus to it and make both options keyboard reachable.
  • Locking inputs on permission loss must keep the content readable and selectable, not visually disabled to the point of low contrast.

11Developer notes

  1. 01

    Use optimistic concurrency: send the version the client edited from and have the server reject stale writes with a 409.

  2. 02

    Keep a single save queue per document: at most one request in flight, with the latest pending state coalesced behind it.

  3. 03

    Write to local storage (or IndexedDB) before the network request so a crash or kill loses nothing.

  4. 04

    Track dirty state by comparing against the last confirmed server version, not the last sent version.

  5. 05

    Retry transient failures (network, 5xx) with exponential backoff; do not retry 4xx.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement autosave for the existing form/editor.

Requirements:
- Debounced save ~1s after the last change; immediate save on blur, Cmd/Ctrl+S and before in-app navigation.
- Single save queue per document: one request in flight, later changes coalesced into the next request.
- Persist pending changes to local storage before sending, and restore them on reload.
- Persistent status indicator next to the title: Saved, Saving…, Retrying…, Save failed, Offline, Conflict.
- Show "Saved at HH:MM" on hover/focus of the indicator.
- Retry network and 5xx failures with exponential backoff; after exhausting retries, show a banner with Retry and Copy content.
- Do not retry 4xx. Explain the cause and keep content visible and copyable.
- Optimistic concurrency: send the base version; on 409, pause editing and show a conflict resolver (Keep mine / Use theirs / view diff).
- Offline: keep editing enabled, show the offline state persistently, sync on reconnect.
- Skip saving fields that fail validation but save the rest; show inline field errors.
- Browser unload warning only when there are unsaved changes.
- Announce failure, offline and conflict via role="status"; do not announce routine saves.

Do not redesign the existing interface.
Keep the save engine independent of UI components.

React + TypeScript reference code for this pattern — logic, hook, component and tests — is included in Statecraft Pro.