studio-app-building
Installation
SKILL.md
Building Frappe Studio apps
Studio apps contain Studio Page documents with a JSON block tree, optional
Studio Page Resource rows, and page logic. Read RULES.md before
writing bindings, events, or styles. Read DESIGN.md before building
or restyling a page. For available components, check
frontend/src/data/components.ts and frontend/src/data/componentFamilies.ts.
Read ROUTING.md for navigation, redirects, guards or boot data.
Standard vs custom apps
| Mode | Where edits live | Page script | Local workflow |
|---|---|---|---|
| Custom | Studio documents in the site database | Bare body in Studio Page.script |
Edit and preview in Studio |
| Standard | Exported files under a linked Frappe app, synced to Studio documents | Companion .ts module with setup(context) |
Edit files, run watch-studio, check /dev/<app_route> |
Use the mode already set on the Studio App. The script forms and editing
workflows are not interchangeable.