Mobile Maker

A Low-Code Platform for Building Interactive H5 Pages

English | 中文

Mobile Maker is a free and open-source low-code platform that enables rapid creation of interactive H5 pages through drag-and-drop functionality. The project focuses on exploring core features of low-code platforms, providing a complete production workflow (editing-preview-publishing) with online component packaging capabilities. It's an excellent learning resource for understanding low-code platform architecture.

Comfortable Development, Efficient Production

• 🎨 Drag-and-Drop Editor: Intuitive visual editor for building H5 pages without coding
• 📱 Mobile-First Design: Optimized for mobile devices with responsive layouts
• 🔧 Component System: Extensible component library with built-in common components
• 👀 Live Preview: Real-time preview of pages during editing
• 📦 Component Packaging: Online component building and packaging
• 🎯 TypeScript: Type-safe development experience
• ⚡ Modern Tech Stack: Built with Vue 3, Vite, and latest frontend technologies
• 🏗️ Monorepo Architecture: Well-organized monorepo structure using pnpm workspace
• 🔄 Complete Workflow: Full pipeline from editing to preview to publishing

• Package Management: pnpm workspace
• Build Tool: Turbo
• Frontend: Vue 3 + Element Plus + Vue Router + Pinia + Vite
• Backend: Node.js + Koa + TypeScript + MongoDB
• Code Quality: ESLint + Prettier + TypeScript

mobile-maker/
├── apps/
│   ├── server/
│   │   ├── data-server/           # Main backend service (TypeScript + Koa)
│   │   └── build-server/          # Build service (Node.js + Koa)
│   └── web/
│       ├── admin/                 # Admin management interface (Vue 3)
│       ├── editor/                # Page editor (Vue 3)
│       └── generator/             # Page generator/preview (Vue 3)
├── packages/                      # Shared packages
│   ├── api/                       # API utilities
│   ├── components/                # Component library
│   ├── editor-core/               # Editor core
│   ├── editor-helper/             # Editor helpers
│   ├── stores/                    # State management
│   └── utils/                     # Utility functions
├── scripts/                       # Build scripts
│   └── mk/                        # Custom CLI tool
├── pnpm-workspace.yaml          # pnpm workspace config
├── package.json                  # Root package.json
├── turbo.json                    # Turbo config
└── tsconfig.json                 # TypeScript config

• Node.js >= 22
• pnpm >= 8.0
• MongoDB (for backend services)

1. Get the project code

git clone https://github.com/iamwhj/mobile-maker.git
cd mobile-maker

2. Install dependencies

# Install pnpm globally (if not installed)
npm i -g corepack

# Enable corepack
corepack enable

# Install all dependencies
pnpm install

# Start all services (admin + data-server)
pnpm dev

# Start specific services
pnpm dev:editor      # Start editor only
pnpm dev:generator   # Start generator only

# For more scripts look at the package.json

# Build all projects for development
pnpm build
# Build all projects for prodution
pnpm build:prod

# Build specific projects
pnpm build:server     # Build backend services
pnpm build:admin      # Build admin interface
pnpm build:editor     # Build editor
pnpm build:components # Build component library
pnpm build:generator  # Build generator

• Port: 8080 (default)
• Tech Stack: Vue 3 + Element Plus + Vue Router + Pinia
• Features: Activity management, component management, page editing

• Tech Stack: Vue 3 + Element Plus
• Features: Drag-and-drop page building, component configuration, live preview

• Tech Stack: Vue 3 + Element Plus
• Features: Generate interactive H5 pages, mobile adaptation, static resource serving

• Port: 3000 (default)
• Tech Stack: Node.js + Koa + TypeScript + MongoDB
• Features: API services, data management, page generation

• Tech Stack: Node.js + Koa
• Features: Component building, static resource generation

The project uses pnpm catalog feature to centrally manage dependency versions. All common dependencies are defined in the catalog section of pnpm-workspace.yaml.

• Root-level configuration files apply to all sub-projects
• Sub-projects can have their own configuration files to override root settings
• TypeScript configuration supports inheritance and path mapping

The Chrome 80+ browser is recommended for local development

Supports modern browsers, not IE

Edge	Firefox	Chrome	Safari
last 2 versions	last 2 versions	last 2 versions	last 2 versions

You are very welcome to join! Raise an issue or submit a Pull Request.

Pull Request Process:

1. Fork the code
2. Create your branch: git checkout -b feat/xxxx
3. Submit your changes: git commit -am 'feat(function): add xxxxx'
4. Push your branch: git push origin feat/xxxx
5. Submit pull request

Reference Vue specification (Angular)

• feat Add new features
• fix Fix the problem/BUG
• style The code style is related and does not affect the running result
• perf Optimization/performance improvement
• refactor Refactor
• revert Undo edit
• test Test related
• docs Documentation/notes
• chore Dependency update/scaffolding configuration modification etc.
• ci Continuous integration
• types Type definition file changes

MIT © 2024

@iamwhj