Top spend categories widget for iOS using Scriptable app.
I have made this for myself, sharing it as someone might find this helpful.

Requirements:
Scriptable app (free): https://apps.apple.com/app/scriptable/id1405459188
actual-http-api: https://github.com/jhonderson/actual-http-api

Setup:

1. Install scriptable
2. click on add new script and copy following script
3. replace “API_URL” value with you actual-http-api
4. replace “API_KEY” value with you actual-http-api api key
5. replace “BUDGET_SYNC_ID” value with your sync id
6. add new small widget from scriptable app on home screen
7. hold on script and select script, done

if you want help setting up, just comment.

Script:

```javascript
// ==========================================
// CONFIGURATION
// ==========================================
const API_URL = "https://api.your-actual-http-api.com";
const API_KEY = "API_KEY";
const BUDGET_SYNC_ID = "BUDGET_SYNC_ID";

// Currency symbol shown before amounts
const CURRENCY_SYMBOL = "$"; // e.g., "$"

// Set to 'false' to pull live API data from server
const USE_MOCK_DATA = false;

// ==========================================
// WIDGET INITIALIZATION
// ==========================================
const widget = await createWidget();

if (config.runsInWidget) {
Script.setWidget(widget);
} else {
widget.presentSmall();
}
Script.complete();

// ==========================================
// MAIN WIDGET BUILDER
// ==========================================
async function createWidget() {
const listWidget = new ListWidget();
listWidget.backgroundColor = new Color("#0D0D0E");

listWidget.setPadding(2, 12, 2, 12);

// Fetch Category Data
const categories = await fetchBudgetData();

// HEADER ROW: BUDGETS | FULL MONTH NAME
const headerStack = listWidget.addStack();
headerStack.layoutHorizontally();
headerStack.centerAlignContent();

const titleText = headerStack.addText("BUDGETS");
titleText.font = Font.heavySystemFont(10);
titleText.textColor = Color.white();

headerStack.addSpacer();

// FULL MONTH NAME
const monthStr = new Date().toLocaleString("en-US", { month: "long" }).toUpperCase();
const monthText = headerStack.addText(monthStr);
monthText.font = Font.boldSystemFont(10);
monthText.textColor = new Color("#6C6C70");

// Fixed tight spacing below title
listWidget.addSpacer(6);

// CATEGORY ROWS (5 Items)
const displayCategories = categories.slice(0, 6);

displayCategories.forEach((cat, index) => {
const spent = Math.round(cat.spent);
const budget = Math.round(cat.budget);
const avail = Math.max(0, budget - spent);
const pct = budget > 0 ? Math.round((spent / budget) * 100) : 0;

const rowStack = listWidget.addStack();
rowStack.layoutVertically();

// Top Line: Category | Spent | Avail | %
const topStack = rowStack.addStack();
topStack.layoutHorizontally();
topStack.centerAlignContent();

// UPPERCASE CATEGORY NAME
const nameText = topStack.addText(cat.name.toUpperCase());
nameText.font = Font.semiboldSystemFont(7.5);
nameText.textColor = Color.white();
nameText.lineLimit = 1;

topStack.addSpacer();

// SPENT | AVAIL WITH CURRENCY
const spendText = topStack.addText(`${CURRENCY_SYMBOL}${formatNum(spent)}`);
spendText.font = Font.regularSystemFont(7);
spendText.textColor = new Color("#8E8E93");

topStack.addSpacer(2);

const availText = topStack.addText(`${CURRENCY_SYMBOL}${formatNum(avail)}`);
availText.font = Font.regularSystemFont(7);
availText.textColor = new Color("#8E8E93");

topStack.addSpacer(1.5);

// Percentage
const barColor = getProgressColor(pct);
const pctText = topStack.addText(`${pct}%`);
pctText.font = Font.regularSystemFont(7.5);
pctText.textColor = barColor;

rowStack.addSpacer(1.5);

// Bottom Line: FIXED 4PT THICKNESS & FULL WIDTH BAR
const barStack = rowStack.addStack();
barStack.layoutHorizontally();

// Draw 300x8 canvas image for sharpness
const progressBarImg = drawSlightlyRoundedBar(300, 8, pct, barColor, new Color("#222224"), 2);
const imgNode = barStack.addImage(progressBarImg);
imgNode.resizable = true;

// Explicitly set point dimensions (134pt wide fits 158pt small widget with 12pt margins)
imgNode.imageSize = new Size(134, 4);

if (index < displayCategories.length - 1) {
listWidget.addSpacer(4); // Controlled fixed gap between rows prevents collapse
}
});

return listWidget;
}

// ==========================================
// DATA FETCHING & API LOGIC
// ==========================================
async function fetchBudgetData() {
if (USE_MOCK_DATA) {
return [
{ name: "Food", spent: 300, budget: 1000 },
{ name: "Transport", spent: 700, budget: 1000 },
{ name: "Groceries", spent: 500, budget: 1000 },
{ name: "Shopping", spent: 100, budget: 1000 },
{ name: "Coffee", spent: 100, budget: 1000 },
{ name: "Restaurants", spent: 900, budget: 1000 }
].sort((a, b) => b.spent - a.spent);
}

try {
const now = new Date();
const monthStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;

const url = `${API_URL}/v1/budgets/${BUDGET_SYNC_ID}/months/${monthStr}/categories`;
const req = new Request(url);
req.headers = {
"x-api-key": API_KEY,
"budget-sync-id": BUDGET_SYNC_ID,
"Content-Type": "application/json"
};

const res = await req.loadJSON();
const rawCategories = Array.isArray(res) ? res : (res.data || []);

return rawCategories
.map(cat => ({
name: cat.name,
spent: Math.abs(cat.spent || cat.activity || 0) / 100,
budget: (cat.budgeted || cat.assigned || 0) / 100
}))
.sort((a, b) => b.spent - a.spent);

} catch (err) {
console.error("API Error: " + err);
return [];
}
}

// ==========================================
// UI DRAWING HELPERS
// ==========================================

function drawSlightlyRoundedBar(width, height, percentage, fillColor, trackColor, radius) {
const draw = new DrawContext();
draw.opaque = false;
draw.size = new Size(width, height);

// Background Track
const trackPath = new Path();
trackPath.addRoundedRect(new Rect(0, 0, width, height), radius, radius);
draw.addPath(trackPath);
draw.setFillColor(trackColor);
draw.fillPath();

// Fill Track
if (percentage > 0) {
const clampedPct = Math.min(100, Math.max(0, percentage));
const fillWidth = (width * clampedPct) / 100;
const fillPath = new Path();
fillPath.addRoundedRect(new Rect(0, 0, fillWidth, height), radius, radius);
draw.addPath(fillPath);
draw.setFillColor(fillColor);
draw.fillPath();
}

return draw.getImage();
}

function getProgressColor(pct) {
if (pct >= 90) return new Color("#FF453A"); // Red
if (pct >= 65) return new Color("#FF9F0A"); // Orange
if (pct >= 40) return new Color("#FFD60A"); // Yellow
return new Color("#30D158"); // Green
}

function formatNum(num) {
return Math.round(num).toLocaleString();
}
```

Script is fully made using AI, Only design is mine.

I run Actual Budget on a cheap box, and a while back I gave my personal AI assistant (Hermes, also self-hosted) read-only access to it. Not because it sounded cool — because I got tired of opening the app just to answer a two-second question.

Here's what that actually looks like day to day.

"How much did I spend on groceries last week?"

No opening the app, no clicking into the category, no doing mental math across a few transactions. Just a real number, pulled straight from my actual data, in a few seconds.

"Am I on track with my dining out budget this month?"

Since Actual uses envelope budgeting, this is the question I actually care about most — not "how much did I spend" in isolation, but "how much room do I have left." Getting a straight answer to that, mid-conversation, without switching apps, is genuinely the thing that changed how often I check in on my spending. I check in more, not less, because it's frictionless now.

"What was my biggest category last month?"

Useful for the monthly "where did it all go" moment everyone doing envelope budgeting has eventually. Instead of scrolling through categories manually, I just ask.

The part that matters most to me, though: it's read-only. Hermes can see my numbers and answer questions about them, but it has zero ability to create, edit, or delete a single transaction. I was pretty deliberate about that — I wanted a smarter way to look at my budget, not a new way for something to accidentally mess with it. It sits there like a knowledgeable friend looking over your shoulder, not a second set of hands touching your ledger.

Not a huge, dramatic use case — just a genuinely nice quality-of-life thing for anyone who's already in the "I check my budget more if it's actually easy to check" camp. Happy to answer questions if anyone's curious how the access side works, but honestly the day-to-day value is just... asking normal questions and getting real answers back.

US bank CSV exports don't go into Actual cleanly — Bank of America's are the worst: a summary preamble before the header, balance rows mixed into the transactions, and malformed quoting in the descriptions. So we built a small open-source converter: drop the bank's file on it, get a clean four-column Date, Payee, Notes, Amount CSV that maps straight into Actual's import dialog.

To be clear about scope: Chase, Citi, and Amex also offer QFX downloads that Actual imports natively, and if that works for you it's zero setup. This is for when it doesn't — banks whose only export is CSV (BofA), date ranges QFX won't cover, or the occasional QFX that imports with missing or unmatched transactions. It handles those banks' CSV quirks too when CSV is what you have: split debit/credit columns, Amex's flipped signs, Citi's pending rows dropped so they don't duplicate when they settle.

• Runs entirely locally — a single HTML file you open in your browser (one download, everything embedded), or a Python script. Nothing is uploaded anywhere.
• Format auto-detected: BofA (checking/savings/credit), Chase (checking/credit), Citi credit, Amex.
• It also reads Chase credit-card PDF statements — for accounts where Chase offers no CSV at all. Text is extracted locally, and it refuses to produce output unless every transaction reconciles against the statement's own Previous → New Balance.
• Same reconciliation guard on BofA checking: output is cross-checked against the statement's "Total credits / Total debits."
• --merge combines overlapping statements and dedupes, without eating legitimate same-day duplicate charges.

MIT licensed: https://github.com/Ildana-ai/bank2actual

Happy to add other banks' formats if you send an anonymized sample of the header rows.

A few weeks back I mentioned in a comment here that I was working on a native iOS client for Actual Budget. It’s open source and syncs with your Actual Budget server.

I originally built Actualist for my wife and me because I wanted to get off the YNAB subscription and wanted a proper native iPhone app for Actual Budget. If you’ve used YNAB, it should feel familiar. Budgeting, transactions (including splits and transfers), accounts, payees management, and native reports all work, plus encrypted budgets. Reconciliation, rule preview, and triggering bank imports aren't in yet. I intend to keep adding features until it reaches parity with the web app. I’ve been using it daily for my budget for the last several weeks, so I figured I’d open the TestFlight to anyone else who might enjoy it.

For transparency, I’ve used AI coding agents extensively throughout development. I still direct the architecture, make the product decisions, review the results, and test it against my own real-world budget.

It is beta, so backup your budget first or use a test budget. I’ve been using it with no issues against my live budget, but I also run daily backups just in case.

TestFlight: actualist.app (https://testflight.apple.com/join/HDG6PcGX)

GitHub: source.actualist.app (https://github.com/sporez/actualist)

Hi all budgeteers! Been using AB for >2yrs, the experience keeps getting better and better, but one thing that's bothered me is not being able to quickly and effortlessly see my budgets for the month, the amount I've spent, how much I have left, etc, without openning the app and going into the reports. When the budget works best is when it's always visible and informing you at each financial transaction you make, not afterwards when you log it or check your budget.

So say hello to homescreen widgets for your budget, for Android! I didn't want to create a whole new native client app because I didn't feel like it was needed, nor could I guarantee indefinite support for it. Thankfully, this is much simpler and doesn't overwrite any of the awesome work the team has put into the PWA app, it only adds to the AB mobile experience!

There are two widgets that can breakdown your individual categories or category groups, or just give you a monthly summary of how much you've spent/budgeted/got remaining, etc. It supports light/dark mode, you can adjust the size & font from tiny to massive, and really customize how they appear to your liking (because I couldn't decide how I liked it either lol). Note this requires you to have an jhonderson/actual-http-api instance pointing to your Actual Budget instance.

Source is on Github: histefanhere/actual-budget-android-widgets, where you can also find an Obtanium install link or simply download the latest APK from the releases page.

AI Disclosure: I have an engineering background but don't know how to code in Kotlin, nor could I afford the time to learn with a full-time job. This project is heavily AI-coded, which has allowed me to make this useful tool for myself and others. You are more than welcome to choose not to use this app based on this.

Keen for any and all feedback or suggestions, I'm already thinking a widget that shows you just a single number from any custom ActualQL query to simulate the Summary card could be extremely useful... Much more to come!

(Oh and if you're on iOS and also only want widgets, check out TaylorJns/Actual-Budget-iOS-Widget, which this project was inspired from, or the many other native full-client apps :) )