Server rendering

For server rendering, Vev is using Mustache, which is a generic templating language which can be used with a wide range of programming languages like PHP, Java, .NET and JavaScript.

Example implementations

This is a Vev example project, built using variables.

NodeJS

import Mustache from "mustache";
import fs from "fs/promises";
const template = await fs.readFile("/template/p8S9MxkirVE.mustache", "utf8");
const renderedHTML = Mustache.render(template, {
  // primary
  "c--hWX11RLvP": "#000 | rgba(0,0,0,0.5) | hsl(0,0%,0%) | hsla(0,0%,0%,0.5)",
  // Hero image
  "i-JZiYWYXa7J": {
    src: "https://img.url",
    alt: "Image alt text",
    srcset: "https://img.url 300w, https://img.url 600w, https://img.url 900w",
  },
  // Hero title
  "t-4RyfGtGYj2": "Text",
  // Hero CTA url
  "t-8ec2OwGaF_": "Text",
  // Hero CTA text
  "t-DzxChO2qSm": "Text",
  // Hero subtitle
  "t-hd1jsFgPV5": "Text",
});
res.send(renderedHTML);

PHP

<?php
require 'vendor/autoload.php'; // Assuming you have installed Mustache via Composer

use Mustache_Engine;
use Mustache_Loader_FilesystemLoader;

// Configure Mustache
$mustache = new Mustache_Engine([
    'loader' => new Mustache_Loader_FilesystemLoader('/template') // Set the template directory
]);

// Read the Mustache template file
$templateFile = 'p8S9MxkirVE.mustache';
$template = file_get_contents(__DIR__ . "/template/" . $templateFile);

// Define data for the template
$data = [
    // primary
    'c--hWX11RLvP' => "#000 | rgba(0,0,0,0.5) | hsl(0,0%,0%) | hsla(0,0%,0%,0.5)",
    // Hero image
    'i-JZiYWYXa7J' => [
        "src" => "https://img.url",
        "alt" => "Image alt text",
        "srcset" => "https://img.url 300w, https://img.url 600w, https://img.url 900w"
    ],
    // Hero title
    't-4RyfGtGYj2' => "Text",
    // Hero CTA url
    't-8ec2OwGaF_' => "Text",
    // Hero CTA text
    't-DzxChO2qSm' => "Text",
    // Hero subtitle
    't-hd1jsFgPV5' => "Text",
];

// Render the template
$renderedHTML = $mustache->render($template, $data);

// Send the response
header('Content-Type: text/html');
echo $renderedHTML;
?>

Go

package main

import (
    "io/ioutil"
    "log"
    "net/http"
    "github.com/hoisie/mustache"
)

func handler(w http.ResponseWriter, r *http.Request) {
    // Read the Mustache template file
    template, err := ioutil.ReadFile("/template/p8S9MxkirVE.mustache")
    if err != nil {
        log.Fatalf("Error reading template file: %v", err)
        http.Error(w, "Internal Server Error", http.StatusInternalServerError)
        return
    }

    // Define the data to pass into the template
    data := map[string]interface{}{
        "c--hWX11RLvP": "#000 | rgba(0,0,0,0.5) | hsl(0,0%,0%) | hsla(0,0%,0%,0.5)",
        "i-JZiYWYXa7J": map[string]string{
            "src":    "https://img.url",
            "alt":    "Image alt text",
            "srcset": "https://img.url 300w, https://img.url 600w, https://img.url 900w",
        },
        "t-4RyfGtGYj2": "Text",
        "t-8ec2OwGaF_": "Text",
        "t-DzxChO2qSm": "Text",
        "t-hd1jsFgPV5": "Text",
    }

    // Render the template with the data
    renderedHTML := mustache.Render(string(template), data)

    // Write the rendered HTML to the response
    w.Header().Set("Content-Type", "text/html")
    _, err = w.Write([]byte(renderedHTML))
    if err != nil {
        log.Printf("Error writing response: %v", err)
    }
}

func main() {
    http.HandleFunc("/", handler)
    log.Println("Server is running on port 8080...")
    log.Fatal(http.ListenAndServe(":8080", nil))
}