Designing screens without code

In the design, SaaS.Studio edits the same leaseclock.com records a developer edits in code, by prompt and by canvas. You add a renewal calendar screen, fill a slot on the Lease record page, and preview both as one Change.

What you buildCopy Anchor Link

leaseclock.com tracks lease renewal dates for small property managers. Its App at /app has two Personas, manager and owner, over the Property and Lease Nouns of The leaseclock.com sample.

You give the manager Persona a Renewals screen: a calendar of every lease by its end date. Then you fill the record.aside slot of the Lease record page with a countdown to endsOn. Neither part derives from the definition, so both are screens you design.

StepsCopy Anchor Link

1. To start, open leaseclock.com/studio and sign in as the founder. The management part lists the Startup's Apps: /api, /mcp, /dashboard, /admin and /app.
2. To open the canvas, choose /app, then the manager Persona. The canvas shows the manager's Lease and Property screens as the rules derive them.
3. To ask for the calendar, type the request into the prompt:

   Copy Text

   Add a renewal calendar to the manager's home screen. Show each lease on its end date, named by the resident.

4. Read the Change the prompt proposes. It adds one screen to the App record and changes no Noun:

   Copy Text

    {
      "$type": "App",
      "path": "/app",
      "personas": ["manager", "owner"],
   +  "screens": [
   +    { "id": "renewals", "title": "Renewals", "shows": "Calendar", "noun": "Lease", "on": "endsOn", "personas": ["manager"] }
   +  ],
      "slots": {}
    }

   To keep it, choose Accept. SaaS.Studio opens Change 14 with the new screen.
5. To place the screen, drag Renewals to the top of the manager's home screen on the canvas. Each lease shows on its endsOn date, named by residentName, by representation.
6. To fill the slot, open a Lease record page on the canvas and select the record.aside slot beside the fields.
7. Choose the Countdown Component from the Component list, and bind its until prop to endsOn. The canvas writes the binding to the same Change:

   Copy Text

   -  "slots": {}
   +  "slots": {
   +    "record.aside": { "noun": "Lease", "component": "Countdown", "props": { "until": "endsOn" } }
   +  }

8. To preview, choose Preview. SaaS.Studio opens change-14.leaseclock.com/app and lists the screens the Change alters.
9. To check the other Persona, switch the preview to owner. The Renewals screen is absent, and the countdown shows on every Lease record page.
10. To publish, choose Publish. Once the Change merges, App.publish builds a new Version, and leaseclock.com/app serves it from the next request.

ResultCopy Anchor Link

Change 14 adds one screen and fills one slot, and touches no Noun file. The API, SDK, CLI and MCP server are byte for byte the same as before.

A developer who pulls the definition finds the same two edits in apps/app.json. Editing that file in code updates the canvas the same way.

Next stepsCopy Anchor Link

• SaaS.Studio: what it adds over code: every part SaaS.Studio adds over code.
• Slots: every named slot and what may fill it.
• Screens the definition cannot derive: why a calendar is a screen you design.
• App previews and Versions: how a Change is previewed, published and rolled back.