Skip to content

Customize

How to change what an App shows, from one slot to a whole screen to custom code, while everything you leave alone keeps compiling.

Make the smallest edit you can, and everything you leave alone keeps compiling. An App takes four kinds of Change, smallest first: the definition, a slot, a view override, and code.

The definition

Most changes are a line in the declaration. Add a Verb to a Persona's may list, and its button appears. Add a property to Lease, and every list, record, form, route and export carries it on the next merge.

Slots

Every compiled screen names its slots: list.toolbar, list.empty, record.header, record.aside, record.actions, record.tab, form.after and dashboard.section. A slot takes any Component whose props bind to the record in view.

Leaseline puts a Timeline in record.aside, so each lease shows its notices and answers beside the record:

apps/portal/app.mdx
---
kind: saas
nouns: [Lease]
slots:
  record.aside: Timeline
---

A slot never widens what the reader may do. A Component in record.actions calls Verbs through the same Permissions as the compiled form.

View overrides

A view.mdx file replaces one compiled screen with Components, and every other screen keeps compiling. Views has the file's keys. Override the screen your Customers spend their day on, and leave the rest.

Theme

The App wears the Startup's Brand. Its Theme sets color, type, spacing, radius and motion for every Component, light and dark. A Customer never sees the platform's name or styling.

Code

When no Verb fits, the code/ folder holds a program, and a route sends one path to it. Code covers the folder. Code is the last resort: it does not compile from the definition, so it is yours to keep in step.

Embed in a customer's product

Status planned. A Customer places one App screen inside its own product, signed in as its own user, under the Customer's Theme. The screen keeps every rule and Permission of the App it comes from.

Next

Mobile and offline covers the App on phones.