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.

Watch a demo here

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