Local Edit Server & UI Tools
Relevant source files
The following files were used as context for generating this wiki page:
The Local Edit Server and UI Tools provide a development environment that bridges the gap between the static documentation site and the local filesystem. These tools enable features like direct source code editing from the browser and automated AI code quality checks during local development.
UI Development Tools
The system integrates specialized UI components into the Docusaurus theme to assist developers. These tools appear within the documentation layout to facilitate editing and AI-related tasks.
Inline Editor
The InlineEditor component enables a "VS Code jump" feature. When a developer views a document in the browser during local development, this tool maps the current page to its local source file. Right-clicking or selecting the tool triggers a request to open the specific file in VS Code.
Sources: src/theme/DocItem/Layout/index.tsx:64-67, src/components/DevTools/InlineEditor.tsx
Mitemite Panel
The MitemitePanel specifically serves the AI knowledge base (/knowledge-base). It identifies and manages .hx-mitemite.md files, which function as answer sheets or triage documents for AI-generated content. This panel only renders when the user browses the AI documentation directory.
Sources: src/theme/DocItem/Layout/index.tsx:68-70, src/components/DevTools/MitemitePanel.tsx
Architecture and Data Flow
The local development tools operate via a service layer that communicates between the React frontend and the local development server.
The diagram shows the interaction between the browser UI components and the local development environment.
Service Layer
The useDevService hook manages the communication logic for development actions. It abstracts the API calls required to perform filesystem operations or editor triggers, ensuring that these features only activate in the development environment.
Sources: src/components/DevTools/useDevService.ts
Local Development Workflow
The local server runs through a standard script, typically initialized via ./run.sh. This environment supports iterative optimization and quality checks.
Code Quality Hooks
Local development includes a system of hooks that intercept actions after AI tools execute "write" or "bash" commands. These hooks perform the following actions:
- Validate code quality against the project's red-line standards.
- Check formatting using a local cache in
scripts/.hx_code_quality. - Compare file MD5 hashes to identify unformatted or modified files quickly.
Sources: blog/2026/10/07/01-AI代码质量.md:120-130, README.md:120-122
Environment Configuration
The local development environment requires specific Node.js and Docusaurus versions to maintain compatibility with the UI tools.
| Component | Required Version |
|---|---|
| Docusaurus | 3.7 (Strict) |
| Node.js | 18 |
| React | ^19.2.3 |
| TypeScript | ~5.6.2 |
Sources: README.md:105-115, docusaurus.config.ts
Development Sequence
When a developer interacts with the documentation, the following sequence occurs for source file editing:
This sequence illustrates how the InlineEditor uses metadata from the Docusaurus context to locate and open files.
Sources: src/theme/DocItem/Layout/index.tsx:60-70, src/components/DevTools/useDevService.ts
Summary
The Local Edit Server & UI Tools integrate the browser-based documentation with local development workflows. By using the InlineEditor and MitemitePanel, developers can jump directly to source files and manage AI triage documents. The system relies on a local development server and specific environment configurations to ensure automated hooks and editor integrations function correctly.