AI Builder & Drag Drop

Design once, deploy everywhere. An intuitive drag & drop interface lets you build websites and mobile apps — no coding required.

Intuitive Interface

The system provides a powerful drag & drop interface that allows you to design websites and mobile apps without coding knowledge. Simply drag elements, adjust layouts, and customize styles in real-time.

Cross Platform Deployment

With a single design, your interface is automatically optimized for Web, Android, and iOS. Save time and resources while ensuring a consistent user experience across all platforms.

AI Editor Integration

After building your interface with drag & drop — or adding new modules, payment methods, form fields, APIs, mail templates, or notifications — you can edit and customize everything directly at:

http://editor.vybev.com/

The AI-powered editor helps you quickly generate, refactor, and maintain code with just a few instructions.

Install on Server

Follow these steps to install VybeV on your server. The process takes about 10–15 minutes.

Requirements

PHP Modules Required

curl  fileinfo  gd  xml  xmlwriter  xmlreader  zip  mbstring  openssl

Step 1 — Upload & Extract

Upload the downloaded code.zip file to your server, inside the target directory (e.g. /var/www/{name_folder}/), then extract:

unzip code.zip -d /var/www/{name_folder}/

Step 2 — Nginx Configuration

Configure Nginx with increased upload limits and timeout settings. Replace your-domain.com with your domain:

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/laravel/public;

    index index.php index.html index.htm;

    client_max_body_size 200M;
    client_body_timeout 300s;
    client_header_timeout 300s;
    keepalive_timeout 300s;
    send_timeout 300s;
    fastcgi_read_timeout 300s;
    fastcgi_send_timeout 300s;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
        fastcgi_read_timeout 300s;
        fastcgi_send_timeout 300s;
    }

    location ~ /\.ht {
        deny all;
    }
}

Step 3 — Install Dependencies

composer install

Step 4 — Import Database

Create a new database manually (via phpMyAdmin or MySQL CLI), then import the SQL file:

mysql -u your_username -p your_database < initial-setup/database.sql

Step 5 — Configure .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database
DB_USERNAME=your_username
DB_PASSWORD=your_password

Step 5b — Configure Claude AI

Add the following to your .env file to enable AI Builder and Vibe Code features:

BACKEND_MODE=ai
AI_MODE=claude-sonnet-4-20250514
CLAUDE_KEY=your_claude_api_key_here

Step 6 — Set Permissions

chmod -R 777 storage/logs
chmod -R 777 storage/framework/cache
chmod -R 777 storage/framework/sessions
chmod -R 777 storage/framework/views
sudo chown -R www-data:www-data public/
sudo chown -R www-data:www-data resources/

Step 7 — Finalize Setup

php artisan key:generate

Once running, open http://localhost:8000 in your browser.

Setting Domain

Configure domains for your themes and apps. VybeV supports running multiple websites and apps simultaneously on multiple domains from one installation.

How It Works

Each domain can point to a different theme (website) or app. Domains can share the same database or use separate databases. This allows you to serve multiple clients from a single VybeV installation.

Steps

Push Notification

VybeV sends push notifications to mobile apps via Firebase Cloud Messaging (FCM).

Config Firebase

Set up your Firebase project and add the credentials to your VybeV admin panel under Settings → Firebase Config.

Send Notification

Create Topic for App (JavaScript)

Subscribe users to a topic in your app's JavaScript code so they can receive targeted notifications:

// Subscribe current user to a topic
firebase.messaging().subscribeToTopic(token, topicName)
  .then(() => console.log('Subscribed to topic:', topicName))
  .catch(err => console.error('Error:', err));

Change Name App

Checklist for renaming your React Native app before publishing to Google Play or App Store.

Android — Change Display Name

Open android/app/src/main/res/values/strings.xml and update:

<resources>
    <string name="app_name">YourNewAppName</string>
</resources>

iOS — Change Display Name

Open ios/YourProjectName/Info.plist and update:

<key>CFBundleDisplayName</key>
<string>YourNewAppName</string>

Icon App

Checklist for changing the app icon in your React Native project.

Prepare Your Icon

• Create a square icon — recommended size: 1024×1024 px
• Format: PNG
• Transparent background if needed

Android

Replace the icon files in android/app/src/main/res/:

iOS

Replace icon files in ios/YourProjectName/Images.xcassets/AppIcon.appiconset/. Update Contents.json if necessary.

Config Notification Backend

Get the Firebase Service Account file so your server can send push notifications.

Step 1 — Firebase Console

Send Mail

VybeV sends emails via Google Mail using customer-coded templates.

Create a Mail Template

Go to Admin → Mail Templates and create a new template. Code the HTML template using PHP variables for dynamic content.

Send Email API

$.ajax({
  type: "POST",
  url: "https://yourdomain.com/send/mail/welcome-email",
  contentType: "application/json",
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
  data: JSON.stringify({
    content: "Hello, welcome to VybeV!",
    email: "[email protected]"
  }),
  success: function(response) {
    console.log('Email sent:', response);
  }
});

Commonly Used API

Built-in APIs available in every VybeV installation for cart, favorites, comments, and data submission.

Add to Cart

$.ajax({
  type: "POST",
  url: "https://yourdomain.com/add/carts",
  contentType: "application/json",
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
  data: JSON.stringify({
    data: [{
      id: "product_id",
      name: "Product Name",
      image: "image_url",
      quantity: 1,
      type: "product",
      price: 100,
      sale: 0,
      color: "",
      size: "",
      option: ""
    }],
    note: { note: "", gift_wrap: "", country: "", zipCode: "" },
    plus: { gift_wrap: "", ship: 0 }
  }),
  success: function(response) { /* handle */ }
});

Delete from Cart

$.ajax({
  type: "POST",
  url: "https://yourdomain.com/delete/cart",
  contentType: "application/json",
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
  data: JSON.stringify({ id: cartItemId }),
  success: function(response) { /* handle */ }
});

Add / Delete Favourite

$.ajax({
  type: "POST",
  url: "https://yourdomain.com/add/favorite",
  contentType: "application/json",
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
  data: JSON.stringify({ id: productId }),
  success: function(response) { /* handle */ }
});

Add Comment

$.ajax({
  type: "POST",
  url: "https://yourdomain.com/add/comment",
  contentType: "application/json",
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
  data: JSON.stringify({
    id: itemId,
    email: "[email protected]",
    comment: "Great product!",
    composer: "product",
    author: "John Doe",
    rate: 5
  }),
  success: function(response) { /* handle */ }
});

Save Data to Composer

Use this for contact forms, subscriptions, or any custom composer:

$.ajax({
  type: "POST",
  url: "https://yourdomain.com/system/composer/subscribe/update",
  contentType: "application/json",
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
  data: JSON.stringify({
    type_save: 'ajax',   // always include this
    name: 'John Doe',
    email: '[email protected]'
    // other fields depend on your composer structure
    // do NOT send 'id' when creating new data
  }),
  success: function(response) { /* handle */ }
});

Functions for Developers

Global helper functions available in all modules, views, and fields across VybeV.

Global Helper Functions

The $help Variable

$help is an instance of HelpRepository, available in all modules. Use it to interact with the database and check user authentication.

Example Usage

<?php
// Get all products
$products = $help->table('product')->get();

// Get single product by slug
$product = $help->table('product')->where('slug', $slug)->first();

// Check login
if ($help->checkAuth()) {
    $user = $help->getUser();
}

// Get cart
$cart = $help->getCart();
?>

Commonly Used Variables

These variables are automatically available in all modules and can be used to build dynamic content.

$site

Retrieves all general configuration data from the system's global config. This includes site name, logo, contact info, SEO settings, and other global system values.

// Example usage
<h1>{{ $site->name }}</h1>
<img src="{{ $site->logo }}">
<p>{{ $site->phone }}</p>

// Debug all site config
{{ dd($site) }}

$config

Holds all settings and configurations created when users drag and drop modules. Contains customized options and config data specific to each module instance.

// Access module config
$title = $config['title'] ?? '';
$show_price = $config['show_price'] ?? true;

// Debug module config
{{ dd($config) }}

$data

Built based on the slug and composer selected when creating a page. Contains all related data for that page — blogs, products, or other linked content — enabling dynamic display based on the current page configuration.

// On a product detail page
<h1>{{ $data->name }}</h1>
<p>{{ $data->description }}</p>
<span>{{ __getPrice($data->price) }}{{ __getCurency() }}</span>

// Debug current page data
{{ dd($data) }}

Composers

Composers help create and customize functions in the VybeV system. They define your data structure, form fields, and list display.

What Composers Can Do

• Create data fields in the database
• Edit how data is displayed in the list screen
• Drag and drop fields to design data entry forms

How to Create a Composer

Go to Admin → Composers → New and fill in:

Creating Database Fields

After creating a composer, click Fields to add database columns:

Form Types

Form type controls how data is entered in the admin add/edit form:

Fields

Available input types — text, editor, textarea, or custom-coded fields. Used when creating a composer or linking configuration between database and module.

What Fields Are Used For

• Import data into a composer
• Add new items to a composer
• Configure module parameters in themes or Android/iOS apps

30+ Built-in Fields

VybeV includes over 30 built-in field types covering all common input patterns. In addition, you can create your own custom fields.

How to Create a Custom Field

1. Identify the type of field you want (text, radio, select, date picker, file uploader...)
2. Write HTML to display the field and apply CSS styling
3. Add JavaScript if the field requires dynamic interaction
4. Register the field in the Composer so it appears in the drag-and-drop interface
5. Test it in both the editor and the saved data output

Variables Available in Field Code

Views

Create views to be used throughout the backend system wherever needed.

What Views Are Used For

• Displayed in the composer section of the admin panel for functions that require custom coding
• Used when adding a new composer that needs a custom interface
• Used to add module configuration parameters in themes or Android/iOS apps

Accessing a View

Once created, a view is accessible at:

https://yourdomain.com/admin/view/{{slug_of_view}}

Rows

Add custom columns to the composer list table in the admin screen to display more information or add extra features.

What Rows Are Used For

• Create additional display columns or action buttons in the composer list table
• Add multi-language support indicators to the list
• Show status indicators, custom badges, or quick action buttons
• Display computed or related data alongside each record

How to Create a Row

Go to Admin → Composers → [Select Composer] → Rows and add your custom column with HTML code for how each cell should render.

API

Besides the standard APIs for saving, deleting, and editing, you can code your own custom APIs and call them from anywhere.

Custom API Endpoint

Any custom API you create is accessible at:

POST {{your_domain}}/api/view/{{slug_of_api}}

How to Create a Custom API

Go to Admin → API and create a new API. Write your PHP logic in the code editor. The system will automatically expose it at the URL above.

$.ajax({
  type: "POST",
  url: "https://yourdomain.com/api/view/my-custom-api",
  contentType: "application/json",
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
  data: JSON.stringify({ param1: "value1" }),
  success: function(response) {
    console.log(response);
  }
});

Database

A theme or app can select one database to use. VybeV supports running multiple websites and apps simultaneously for multiple domains — each with its own or shared database.

Multi-Database Support

Each domain can point to a website or Android/iOS app that either shares the same database or uses a different one. This feature allows you to create dedicated databases for each customer or theme.

What Databases Are Used For

• Add new features to a specific website
• Add new features to Android and iOS apps
• Isolate customer data for multi-tenant setups
• Create separate data environments for different themes

How to Add a Database

Go to Admin → Database → New. Create a new database entry and assign it to a theme or app in the theme/app settings.

Themes

Theme is where you manage the entire website interface — pages, design, domain, and database assignment.

Theme Configuration

Create Pages

Go to the Theme's Pages section and add new pages. For website pages, you can set the route, title, and layout. For app pages, use the drag-and-drop Page Builder.

Apps

Apps work the same way as Themes, but target Android and iOS mobile applications.

How Apps Work

The App configuration (domain, database, pages) follows the same pattern as Themes. The key difference is that the output is rendered inside the React Native WebView shell instead of a web browser.

Preview & Debug

VybeV provides a companion app you can install on your device. Use it to scan the QR code from your admin panel to preview and debug your app in real time — without building and deploying to the App Store or Google Play.

Pages in Apps

All app pages are created via the drag-and-drop App Page Builder. Switch to App mode in the Page Builder to see the phone frame preview and mobile-specific modules.

Modules

Modules are the UI building blocks of VybeV — self-contained components that render content on your pages.

How Modules Work

Each module is a Laravel Blade component (50–100 lines) that does one job. Modules are dragged into pages in the Page Builder. When the page loads, each module fetches its own data and renders independently via AJAX.

Module Types

Module Configuration

Click the edit icon on any placed module to open its configuration panel. The config form is built from Fields and can include any input type — text, image upload, composer link, etc. Configuration is saved per-module-instance on the page.

Create a New Module

Go to Admin → Modules → New. Write the Blade/PHP code for the module. The module will then appear in the Page Builder sidebar and can be dragged onto any page.

Script

Manage JavaScript libraries and scripts that are loaded globally or per-theme/app.

How Scripts Work

Scripts are loaded in the page <head> or before the closing </body> tag. You can assign different script bundles to different themes or apps.

Adding a Script Library

Go to Admin → Script and create a new entry. Paste in the CDN URL or upload a local JS file. Then assign the script to the themes or apps that need it.

Config

Global system configuration — site name, logo, contact info, payment settings, SMTP, and more.

What You Can Configure

• Site name, logo, favicon
• Contact info: phone, email, address
• Social media links
• SMTP mail settings
• Payment gateway credentials (Stripe, PayPal, COD, Bank Transfer)
• Default language and currency
• Mobile app type (WebView or Native)
• After-save hooks and automation

Access config at Admin → Config. All values are available in every module via the $site variable.

Language

VybeV supports multi-language content for both websites and mobile apps.

How Language Works

The current language is stored in a cookie and available via __getlanguage(). When a user switches language, VybeV automatically serves translated content from the database if it exists.

Translate Content

For each composer that supports multi-language, records are stored with a language and group column. The same content in different languages shares the same group ID.

Translate Labels

Use __trans($language, $key) in your module code to output translated UI strings:

// Output translated string
{{ __trans($language, 'add_to_cart') }}
// → "Add to Cart" in English
// → "Thêm vào giỏ" in Vietnamese

Add a Language

Go to Admin → Languages and add a new language with its code (e.g. vi, fr, ja). Then add translations for each key in the language editor.

SEO

Configure SEO settings for each page — title, meta description, keywords, and Open Graph tags.

Global SEO

Set default SEO values in Admin → Config. These are used as fallbacks when page-specific SEO is not set.

Page-Level SEO

Each composer can have an seo form type field. When configured, users can enter custom title, description, and keywords per record — for product pages, blog posts, category pages, etc.

SEO Fields Available