MSZ Studio

Professional Flutter & Dart IDE
Built with Electron, Monaco Editor, and Node.js

Official site: mszstudio.sbs • By @h7jb

---

Overview

MSZ Studio is a custom desktop IDE focused on Flutter and Dart development.
It is designed to give developers a fast, clean, and lightweight coding environment with:

• a modern editor
• project/file explorer
• terminal support
• Flutter/Dart tooling
• AI assistant support
• build and packaging workflows
• a dark developer-first UI

This project is built as a dedicated environment for Flutter work, so you do not need to depend on a separate VS Code + Flutter extension setup for the core workflow. MSZ Studio already includes the app shell, editor, terminal, Flutter actions, and installer logic needed for a dedicated development experience.

---

Key Features / المميزات

English

• Monaco Editor for a smooth coding experience
• Flutter / Dart focused workflow
• File explorer with open, refresh, create, rename, and delete actions
• Built-in terminal for running commands directly
• Flutter environment detection
• Flutter installer support
• Run / Build / Clean / Doctor tools
• Dart format and analyze
• Gemini AI assistant support
• Extensions search
• Custom dark theme
• Windows installer support
• Portable / unpacked build support
• Custom app branding

العربية

• محرر Monaco لتجربة كتابة سلسة
• واجهة مخصصة لتطوير Flutter / Dart
• مستكشف ملفات لفتح وإضافة وإعادة تسمية وحذف الملفات
• طرفية داخلية لتشغيل الأوامر مباشرة
• فحص حالة Flutter و Dart
• دعم تثبيت Flutter داخل التطبيق
• أدوات Run / Build / Clean / Doctor
• تنسيق وتحليل ملفات Dart
• دعم مساعد Gemini AI
• البحث عن الإضافات
• ثيم داكن احترافي
• دعم تثبيت Windows
• دعم النسخ المحمولة
• هوية بصرية خاصة بالمشروع

---

Why MSZ Studio?

MSZ Studio is built for developers who want a focused Flutter environment without unnecessary clutter.
It helps you:

• start projects faster
• manage files more easily
• run Flutter commands from one place
• keep the UI simple and clean
• reduce dependence on a separate general-purpose editor for everyday Flutter work

---

What is inside this project?

Based on the codebase, the main parts are:

• main.js → Electron main process
• preload.js → safe bridge between Electron and UI
• index.html → main interface
• styles.css → visual design
• src/editor.js → editor logic
• src/sidebar.js → explorer and panels
• src/terminal.js → terminal and environment tools
• src/api.js → AI + extension features
• installer.iss → Windows installer script
• setup_extensions.ps1 → setup automation
• Start MSZ Studio Code.bat → launcher helper

---

Requirements

For development

• Windows 10 / 11
• Node.js
• npm
• Git
• Flutter SDK
• Dart SDK

For the AI assistant

• Gemini API key

For installation / packaging

• Electron
• electron-builder
• Optional Inno Setup for custom installer flows

---

Installation

1) Clone the project

git clone https://github.com/h7jb/apps-studio-coder
cd apps-studio-coder

2) Install dependencies

npm install

3) Run in development mode

npm start

4) Build a Windows installer

npm run build

5) Build an unpacked folder

npm run build:dir

6) Build all targets

npm run build:all

---

Development Workflow

Open a Flutter project

• Launch MSZ Studio
• Open the project folder
• The explorer loads the file tree
• Select .dart files to edit
• Use the terminal for Flutter commands

Common actions

• Create files and folders
• Edit Dart, JSON, YAML, HTML, CSS, JS, and more
• Save with Ctrl + S
• Use the terminal for custom commands
• Use Flutter tools like:
  • flutter run
  • flutter build
  • flutter pub get
  • flutter clean
  • flutter doctor

---

Features in detail

Editor

• Monaco-based editor
• Dart syntax support
• Dark custom theme
• Font and layout tuning
• Smart coding behaviors such as wrapping, folding, and bracket helpers

Explorer

• Load project folders
• Browse directories
• Create, rename, and delete files
• Refresh tree view
• Open project from a single folder

Terminal

• Run shell commands inside the app
• Stop running processes
• View live output
• Keep development flow inside one workspace

Flutter tools

• Detect Flutter and Dart
• Install Flutter automatically
• Run Flutter projects
• Build Flutter targets
• Clean and fetch packages
• Analyze and format Dart code

AI assistant

• Gemini API integration
• Context-aware help
• Flutter/Dart-focused prompts
• Useful for code explanations and quick guidance

Extensions

• Search extension marketplace entries
• Install helper tooling for the workflow

---

The included SVG illustrations in this package can also be used as lightweight README visuals:

• assets/readme-banner.svg
• assets/readme-logo.svg
• assets/readme-preview.svg

---

Branding

Official project branding:

• Name: MSZ Studio
• Site: mszstudio.sbs
• Author: @h7jb
• Product name: MSZ Studio

---

License

This project uses the MIT License.

That means people can use, modify, and distribute it freely as long as the license notice stays included.

---

Project structure

apps-studio-coder/
├─ main.js
├─ preload.js
├─ index.html
├─ styles.css
├─ src/
│  ├─ api.js
│  ├─ dom.js
│  ├─ editor.js
│  ├─ sidebar.js
│  └─ terminal.js
├─ assets/
├─ installer.iss
├─ setup_extensions.ps1
├─ package.json
└─ Start MSZ Studio Code.bat

---

Credits

• MSZ Studio — the project
• @h7jb — author / branding
• Electron — desktop shell
• Monaco Editor — code editor engine
• Flutter / Dart — target development platform

---

Support

Official site: mszstudio.sbs