Skip to main content

Client Rendering

For client-side rendering, we use the Vev Embed. Vev Embed provides a super lightweight and fast way to render a Vev project on the client side.

Vev Embed​

The Vev Embed is a optimized way to render a project client side. The embed will insert HTML synchronous, and then defer the hydration until HTML is fully rendered hydrate the project. If blocking render is not desired, you can add asyn to the script tag to prevent this

  • Variable Replacement: Supports the dynamic replacement of any Vev variable directly in the browser.
  • Performance Optimized: Designed to be lightweight and fast, ensuring minimal impact on page load times.

Example​

This is a Vev example project, built using variables.

  • Project Overview: This project demonstrates how variables are utilized to create dynamic content.
  • Dynamic Updates: Variables in this project can be updated dynamically, showcasing client-side rendering in action.
<script src="embed/U1TM1EJXg9.js">
  {
    // 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",
  }
</script>

Codesandbox​

This is a live working example.