Welcome to the Site Package Manager (SPM) official home. SPM is an open-source, data-driven web modernization platform that enables developers to reconstruct legacy web interfaces using modern UI stacks (React 18 + Shadow DOM) without modifying the original host website's source code.
Explore our interactive documentation, Veneer Spec syntax manuals, and live React UI component explorer: 👉 https://spm-ecosystem.github.io/spm-portal/
The SPM ecosystem is split into 6 core decoupled repositories:
| Repository | Purpose | Primary Tech |
|---|---|---|
spm-portal |
Official unified documentation portal and live component explorer website. | React 19, Tailwind CSS, Vite |
site-package-manager |
The Chrome extension core loading layout manifests, injecting DOM interceptors, and mounting React components inside isolated Shadow DOM hosts. | TypeScript, React, Vite |
spm-cli |
C++ developer toolchain compiling Veneer Spec (.vnr) design configurations, validating variables, and hosting real-time WebSocket hot-reload servers. | C++17, WebSockets |
spm-vscode |
Official VS Code extension providing autocompletion, hover documentation, syntax styling, and schema verification for .vnr scripts. |
TypeScript, VS Code API |
spm-websites |
The GitOps Theme registry storing layout configurations, style overrides, and .vnr templates with automated edge deployment pipelines. |
Veneer Spec, CSS |
spm-components |
Reusable React UI component library containing visual primitives and dedicated layout templates. | React 18, CSS |
The diagram below outlines how the compiler, extension, registry, and edge CDN work together during development and production:
sequenceDiagram
autonumber
actor Developer
participant Local Workspace
participant VS Code (spm-vscode)
participant Dev Server (spm-cli)
participant Chrome Extension (site-pkg-mgr)
participant GitHub (spm-websites)
participant Worker (Edge CDN)
VS Code (spm-vscode)->>Local Workspace: IntelliSense & Linter Check
Developer->>Local Workspace: Writes Veneer Spec (.vnr)
Developer->>Dev Server (spm-cli): Starts watcher (spm dev)
Dev Server (spm-cli)->>Chrome Extension (site-pkg-mgr): Broadcasts Sync Payloads (WebSockets)
Chrome Extension (site-pkg-mgr)->>Developer: Real-time visual Hot-Reload
Developer->>Local Workspace: Git Commit (Auto-compiles manifest)
Developer->>GitHub (spm-websites): Open Pull Request with .vnr & manifest.json
Note over GitHub (spm-websites): Code Review & Merge to main
GitHub (spm-websites)->>Worker (Edge CDN): CI/CD Deploy (Filters out .vnr, uploads compiled outputs only)
Worker (Edge CDN)->>Chrome Extension (site-pkg-mgr): Delivers production layouts to end-users
We welcome contributions across all parts of the ecosystem! To ensure consistency, code quality, and security, all contributors must align with the following standards:
- Language: All code comments, error logs, documentation manuals, and commit messages must be written in English.
- Commit Styling: Commits must follow the Conventional Commits specification (e.g.,
feat:,fix:,docs:,refactor:,chore:). - Strict Type Safety: All TypeScript code must pass strict checks (no implicit
any, no unused local variables). - No Regressions: All modifications must pass their respective unit test suites before being merged (
npm run testor C++ binary assertions). - Agnostic Documentation: Never use real website names (such as Safebooru or Google) in examples. Keep all layout references generic (e.g.
example-site.com). - MIT License: All projects are licensed under the MIT License. Contributions are automatically licensed under the same terms.
For detailed setups and step-by-step guides on how to contribute to different parts of the ecosystem, check the Contribution Guide in site-package-manager.
