San CLI UI: A Graphical Interface for San CLI – Feature Overview

The theme of this session is the graphical interface of San CLI, called San CLI UI. It is divided into three parts—features, principles, and practice—following the order “function – principle – practice”. The series introduces basic functions, analyzes the overall architecture and implementation principles, focuses on the plugin system, and demonstrates custom plugin development.

What is San CLI UI? San CLI UI is the visual operation interface of San CLI, providing a visual management of San CLI projects. It is inspired by popular visual tools such as Vue‑CLI‑UI and JSUI, aiming to lower the entry barrier and improve user experience.

San CLI itself is a command‑line tool that bundles Webpack for front‑end engineering, supports customization, and offers built‑in features such as modern browser bundling, deployment, bundle analysis, performance analysis, documentation site generation, and a plugin mechanism that allows developers to define custom commands.

San CLI UI adds a graphical and plugin‑based layer on top of San CLI, offering:

Simple, beginner‑friendly operation

Visual project management

Integrated configuration semantics

Intuitive build process visualization

Customizable toolsets

Overall introduction

Feature Overview

San CLI UI’s core functions are divided into six parts: project management, configuration management, plugin management, dependency management, built‑in build tasks, and dashboard widgets.

The functions can be grouped into three categories:

Project Management

Project Build

Tool Extension

Project Management

On the home page, users can search, star, open in editor, rename, or delete (without removing local files) projects. Deleted projects can be re‑imported.

Project Build

San CLI provides commands for each stage of the development lifecycle—creation, development, testing, and deployment—greatly improving development efficiency.

Project Creation

Click the “+” button on the top‑right navigation to open the project creation page, which executes the san init command. The command checks the local directory, pulls a scaffold template, prompts the user for configuration, generates the project, and optionally installs dependencies.

Main steps:

Select directory

Choose scaffold

Enter configuration

Install dependencies

Finish creation

The UI also provides a file‑browser with directory switching, bookmarking, and new‑folder creation.

Project Import

Existing San projects can be imported into the San CLI UI workspace.

Configuration Management

San CLI uses san.config.js placed at the project root. The UI converts each configuration item into a form, displaying semantic explanations so users can modify settings without consulting documentation.

Dependency and Plugin Management

Both dependencies and plugins are managed visually through npm. Users can search, install, update, or uninstall packages directly from the UI.

Dependency Management

View installed dependencies, search, update, or uninstall them. The “Install Dependency” button allows keyword search of all published npm packages.

Plugin Management

View installed plugins, search, update, or uninstall them. The “Install Plugin” button lists San CLI plugins and San CLI UI plugins for easy discovery.

Task Management

San CLI tasks such as san serve , san build , npm run start , etc., are exposed in the UI with visual controls. An additional “inspect” task shows the underlying webpack configuration.

san serve // local build + server
san build // production build
npm run start // build + start server
npm run build // build for release
npm run analyzer // bundle analysis
npm run build:modern // modern mode build

The UI visualizes build statistics, provides ring charts for bundle size, and displays raw CLI output directly on the page.

Tool Extensions

Extensions appear on the dashboard as widgets.

Built‑in Widgets

Welcome widget – shows a brief introduction.

Terminate Port widget – stops a local server port.

Run Task widget – configures and runs tasks such as start .

News widget – displays RSS feeds.

Custom Dashboard

Click the “Customize” button to add, remove, or rearrange widgets, and to install or develop personalized widgets.

In summary, this article (the “features” part) introduces San CLI UI as a graphical workbench for San CLI, covering project management, configuration management, dependency management, plugin management, task management, and dashboard widgets. The UI implements the visual layer of San CLI while leveraging a plugin architecture for extensibility.