Reactive
Build your app
Catalog ›Personal life ›Home

Hearth — home and due dates

Due dates, expenses, documents and home maintenance — all in one file that stays yours.

💸 Quick expensesshared⏰ Due dates💶 Household expenses📄 Documents🔧 Maintenance

data space «casa-en» — the suite’s glue: on your device, multi-user with one invite (link or QR), end-to-end encrypted.

▶ Open the suite (5 micro apps)

or open it as a single app

Integrates with: Piggybank — same data space.

homedue datesbillsdocumentsmaintenancefamily

What it records

  • Car tax, inspection, insurance...
  • Category...
  • Bill, groceries, repair...
  • Category...
  • Amount (€)
  • Contract, certificate, warranty...
  • Boiler, air conditioner, car...
  • What was done / to do

Composed of 5 micro apps

One job each, over the same data: every micro app reads and writes the shared data space “casa-en” (with your consent, asked on first open). Everything stays on your device — and with a single invite the whole suite goes multi-user, end-to-end encrypted.

💸Quick expensesshared across solutions⏰Due dates💶Household expenses📄Documents🔧Maintenance

Shared micro apps are the bridge between solutions: the same data also powers Piggybank.

How it works

This is a Reactive app: a plain text document that your browser turns into a working app — forms, live data, tables, statistics and even charts, with nothing to install or configure.

  1. Use it right away. Hit “Use this app”: it opens right in your browser, ready to go, with data saved only on your device.
  2. Your data stays yours. Everything is stored locally on your device, kept separate for each app: no account, no server, nothing to set up.
  3. Make it your own. The text below is the entire app: copy it, tweak fields, views and words, and your changes become interactive instantly.
  4. Share it as a file. An app is a simple file: save it, export it or share it with a link; and with encrypted collaboration several people edit the same data in real time.
The app’s source
# 🏡 Hearth

Due dates, expenses, documents and home maintenance — all in one file that stays yours.

:::::page{title="Due dates" icon="⏰"}
## No more fines for forgetting

::::form{path="deadlines" id="fsc"}
::input{form="fsc" field="name" placeholder="Car tax, inspection, insurance..." required="true"}
::input{form="fsc" field="date" type="date" required="true" legend="Due on"}
:::select{form="fsc" field="category" placeholder="Category..."}
- Car
- Home
- Utilities
- Documents
- Other
:::
::add-form{form="fsc" path="deadlines" label="Add due date"}
::::

:::calendar{path="deadlines" field="date"}
{name}
:::

:::sort{path="deadlines" field="date" order="asc" as="list" deletable="true"}
{date} — **{name}** ({category})
:::
:::::

:::::page{title="Household expenses" icon="💶"}
## Where the house money goes

::::form{path="expenses" id="fspc"}
::input{form="fspc" field="date" type="date" legend="When"}
::input{form="fspc" field="item" placeholder="Bill, groceries, repair..." required="true"}
:::select{form="fspc" field="category" placeholder="Category..."}
- Utilities
- Groceries
- Maintenance
- Furnishing
- Other
:::
::input{form="fspc" field="amount" type="number" placeholder="Amount (€)" required="true"}
::add-form{form="fspc" path="expenses" label="Log expense"}
::::

**Total: € :sum[tsc]{path="expenses" field="amount"}**

:::group-by{path="expenses" field="category" as="table" headers="When,Item,Amount"}
{date} | {item} | € {amount}
:::
:::::

:::::page{title="Documents" icon="📄"}
## The important papers, at hand

::::form{path="documents" id="fdo"}
::input{form="fdo" field="name" placeholder="Contract, certificate, warranty..." required="true"}
::file{form="fdo" field="attachment" maxkb="500"}
::add-form{form="fdo" path="documents" label="File it"}
::::

:::list{path="documents" deletable="true"}
**{name}** — {attachment}
:::
:::::

:::::page{title="Maintenance" icon="🔧"}
## The history of interventions

::::form{path="maintenance" id="fma"}
::input{form="fma" field="appliance" placeholder="Boiler, air conditioner, car..." required="true"}
::input{form="fma" field="date" type="date" legend="Last intervention"}
::input{form="fma" field="notes" placeholder="What was done / to do"}
::add-form{form="fma" path="maintenance" label="Log intervention"}
::::

:::table{path="maintenance" headers="Appliance,Last intervention,Notes" deletable="true" editform="fma"}
**{appliance}** | {date} | {notes}
:::
:::::