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

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

• 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
• Write page scripts (mirroring vue <script setup>) to add reactive state, computed values, watchers & handlers, usable across props, styles and events
• Generate and modify pages with the built-in AI assistant
• Use custom Vue components from the studio folder of your app in your bench
• Export apps to your app's source and build them for production, served by Studio at their own route

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

1. Setup Bench. Studio needs Node >=20.19 (or >=22.12).

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

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

To use the AI assistant, set your OpenRouter API key in Studio Settings.

For Frontend Development & Exported Apps

You need this setup to work on Studio's frontend, and to build standard (exported) apps, whose pages and scripts live in your Frappe app's studio folder — the editor loads them off disk through the vite dev server.

1. Enable developer mode, allow the dev server's requests, and install dev dependencies:

   bench set-config -g developer_mode 1
   bench --site studio.localhost set-config ignore_csrf 1
   bench setup requirements --dev

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

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

3. Now, you can access the site on vite dev server at http://studio.localhost:8080 (the port shifts along with your bench's webserver_port)

4. In one more terminal session, you can start the watcher and keep it running alongside bench start:

   bench --site studio.localhost watch-studio

It watches the studio folder of every installed app and imports changed app/page/component JSON into the database, so apps edited on disk (by hand, the CLI or an AI agent) show up in the editor without a bench migrate. Deletions are not synchronized, so remove the corresponding database record separately. Page scripts don't need it — vite hot-reloads the .ts files straight off disk.

Note: Exported apps can only be edited on a local setup with the dev server running. On a production site they only run, they can't be edited. We will be adding customization support for standard apps soon.

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

bench build-studio-app <app-name>   # build an app for production
bench --site <site-name> watch-studio # long running watcher to sync app/page/component JSON edited in files to DB