Frappe Studio

Visual App Builder for the Frappe Framework

⚠️ WARNING: This project is in a very early development stage. Expect breaking changes, incomplete features, and bugs. Not recommended for production use yet.

Vision

Frappe Studio aims to improve how developers build applications with the Frappe Framework.

Current Features

• Drag & drop layout builder with frappe-ui components
• Wire Frappe Framework data sources in the app using minimum configurations
• Edit props and slots for any component with the powerful editor
• Faster layout creation with form and CRUD utilities
• Build reactive apps with dynamic variables, scripts & watcher support

Under the Hood

• Frappe Framework: A full-stack web application framework.
• Frappe UI: A Vue-based UI library, to provide a modern user interface.

Installation

Local Setup

1. Setup Bench.
2. In the frappe-bench directory, run bench start and keep it running.
3. Open a new terminal session and cd into frappe-bench directory and run following commands:

bench get-app studio
bench new-site studio.localhost --install-app studio
bench browse studio.localhost --user Administrator

1. Access the studio page at studio.localhost:8000/studio in your web browser.

For Frontend Development

1. Open a new terminal session and run the following commands:

cd frappe-bench/apps/studio
yarn install
yarn dev --host

1. Now, you can access the site on vite dev server at http://studio.localhost:8080

Note: You'll find all the code related to Studio's frontend inside frappe-bench/apps/studio/frontend