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))
}