Vvveb is an open‑source CMS built in PHP with a powerful visual page builder and support for MySQL, PostgreSQL, and SQLite.

Its architecture follows an MVCC pattern (Model–View–Controller–Component), with a distinctive approach to the Model and View layers:

For Models SQL code is used directly rather than abstracted away, and for View HTML templates remain clean and logic‑free without any template markup.

This design preserves the strengths of both languages and leads to clearer separation of concerns, easier maintenance, and faster development.

Application Structure

Vvveb is organized into main applications, app, admin, rest, graphql and install, alongside shared system directories.

  • app is the public‑facing frontend that renders pages for site visitors.
  • admin is the backend interface (typically accessed at /admin, though this path can be changed for security) used for content and site management.
  • rest serve Rest API requests
  • graphql serve GraphQL API requests
  • install runs automatically when no database configuration exists (config/db.php), guiding new installations through setup.

Shared directories such as system, public, plugins, and config support all applications.

Directory Layout

The directory structure is designed for clarity, modularity, and maintainability:

├── app
│   ├── controller          # Frontend controllers
│   ├── component           # Frontend components (PHP logic)
│   ├── template            # Frontend templates (Vtpl)
│   ├── sql                 # SQL queries for models
│   └── validate            # Validation rules
├── admin
│   ├── controller          # Admin controllers
│   ├── component           # Admin components (PHP logic)
│   ├── template            # Admin templates (Vtpl)
│   ├── sql                 # SQL queries for admin models
│   └── validate            # Validation rules
├── install
│   ├── controller          # Installer controllers
│   ├── template            # Installer templates
│   └── sql                 # Installer SQL scripts
├── plugins
│   ├── contact-form
│   └── insert-scripts
├── system                  # Core framework files
├── config
│   └── db.php              # Database configuration
├── storage
│   ├── digital_assets      # Uploaded files
│   ├── model               # Compiled model files
│   │   ├── app
│   │   ├── admin
│   │   └── install
│   ├── backup              # Backups
│   ├── sqlite              # SQLite database files
│   ├── compiled-templates  # Cached Vtpl templates
│   └── cache               # General cache
├── public
│   ├── themes              # Frontend themes
│   │   ├── landing
│   │   └── blog-default
│   ├── admin               # Admin theme
│   │   └── default
│   ├── media               # Public media files
│   ├── js                  # Public JavaScript
│   ├── page-cache          # Static page cache
│   ├── install             # Installer public assets
│   └── plugins             # Public plugin assets
│       ├── contact-form
│       └── insert-scripts
├── plugins                # Plugins fles
├── graphql                # Graphql API
├── rest                   # Rest API
└── locale                  # Language files

Architectural Principles

SQL as the Model Layer

Instead of hiding SQL behind ORM abstractions, Vvveb encourages writing SQL directly in the sql directory. This keeps data logic explicit, predictable, and easy to optimize.

HTML as the View Layer

Views are pure HTML enhanced with Vtpl, a template engine that uses CSS selectors to inject dynamic content. This ensures:

  • HTML remains clean and designer‑friendly
  • No PHP logic is mixed into templates
  • Themes can be replaced without touching backend code

Components as the Glue

Components provide the dynamic data for templates. Each component has:

  • A PHP file (app/component/...) that fetches data
  • A Vtpl template (app/template/components/...) that binds data to HTML

This structure keeps logic modular and reusable.

Application Flow

  1. Request arrives
    The router determines whether the request belongs to the frontend (app), backend (admin), restis api, graphql api or installer (install).

  2. Controller executes
    Component services load components, run SQL queries, and prepare data. Controller is selected for matching route (based on config/app-routes.php0) and run.

  3. Template renders
    Vtpl inserts dynamic data into HTML using CSS selectors.

  4. Response is delivered
    The final HTML is sent to the browser, optionally cached for performance.

Development Workflow

  • Frontend developers work in public/themes/... and app/template/..., modifying HTML and templates without touching PHP.
  • Backend developers work in app/controller, app/component, and app/sql, writing logic and queries.
  • Plugin developers extend functionality via the plugins directory.
  • Administrators manage content through the /admin interface.

This separation allows teams to work independently without stepping on each other’s code.

Vvveb’s structure is designed to stay flexible even as a project grows.-