Skip to content

Flex Components#

Flex Components provide a modular way to build reusable content blocks in Miva’s Page Builder. They allow developers to define structured input forms and render logic that end-users can interact with, all while ensuring tight control over layout, style, and functionality.

This documentation outlines how to build, style, and deploy Flex Components using flex.json, Miva templates, and optional CSS and JavaScript.

What is a Flex Component?#

A Flex Component is a user-configurable content block composed of:

  • Input properties defined in flex.json
  • Templates that output Miva template language
  • Optional scripts and styles
  • Configuration defaults and logic

Once installed, Flex Components appear in Page Builder as configurable elements for store admins and content editors.

Component Files#

Each Flex Component consists of the following:

File Purpose
flex.json Defines properties, templates, versioning, and behavior
instance.mvt Rendered for each instance of the component on a page
init.mvt Rendered once per page to include global resources
styles.css Optional styles for layout and customization
script.js Optional JavaScript logic for interactivity
images/ Optional assets (e.g. icons or placeholders)

These files are bundled and imported via the Miva Admin as a .tar.bz2 archive.

When to Use Flex Components#

Use Flex Components when you need to:

  • Standardize the structure of common page content (e.g. banners, grids, sliders)
  • Provide configurable properties such as headings, images, colors, and links
  • Manage component logic using Miva templates and scoped CSS
  • Allow editors to reuse the same component in multiple places

Component Structure Overview#

A typical component contains:

  • A configuration file (flex.json)
  • Templates for initialization and instance rendering
  • Definitions for properties (fields, groups, lists)
  • Optional scripts, styles, and image assets

More details are available in the Getting Started section.

To start building Flex Components, see the following: