Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Plugins

Dynamic Preview

Dynamic Preview enables real-time HTML template customization and browsing in both local and server environments, powered by Python and Flask, with support for structured partials for seamless integration into any framework.

Overview

Metronic provides a powerful tool built with Python and Flask, designed for dynamic preview of HTML templates in your browser on either your local machine or server environment. This tool offers the following features:
Dynamic Preview - Easily view changes to HTML templates in real-time within your browser, streamlining the development process.
Structured Partials - Utilize structured partials to efficiently build layouts and generate HTML pages, ensuring consistent and modular code.
Framework Integration - Simplifies the integration of HTML code into various frameworks and server-side languages, making it versatile for different development environments.
Local and Server Support - Whether you're working locally or deploying on a server, this tool adapts to your workflow, providing flexibility and convenience.

Installation

Follow the guide below to get started with the Dynamic Preview.
1

Install Python

Ensure you have the latest version of Python installed. Download it from the official Python website. To verify the installation, open your terminal and run: 
				
					python --version
In some operating systems, Python 3 is used instead of Python. If you have Python 3 installed, you can verify the installation by running the following command: 
				
					python3 --version
If Python is installed, it will display the version number.
2

Download

Download the latest Metronic from Themeforest.
3

Launch Terminal

Start a command prompt window or terminal and change directory to the package's root directory. 
				
					cd site-generator
4

Make run.sh script executable

If you are using Windows, you can skip this step.
To make the run.sh file executable on Unix/Linux, you can run the following command in the terminal: 
				
					chmod +x run.sh
The command makes the run.sh file executable, which means that you can run it as a script. Running the script will start the Flask development server and build the preview.
5

Run the script

To start the development server and build the preview, run the following command in the terminal:
For Windows: 
				
					run.bat
For Unix/Linux: 
				
					./run.sh
The run script will install Flask and other dependencies needed for the preview to run for the first time. This may take some time, please wait while the installation is in progress. The preview will be accessible at http://localhost:8001/ after the installation is complete.

Troubleshooting

This section provides common issues and solutions for installing Metronic Dynamic Preview and running it.

Common Issue:

The issue usually happens on Windows. Python is not recognized as an internal or external command, operable program or batch file. This error occurs when the Python executable is not added to the system's PATH.

Solution:

Check if Python is installed on your system by typing python --version or python3 --version in your command prompt or terminal. If Python is installed, it will display the version number.
If Python is not installed, download the latest version from the official Python website and install it.

When running the installer, make sure to tick the box that says "Add Python to environment variables". This will ensure that Python is added to the system's PATH variable.

If Python is installed but still not recognized, you may need to add Python to your system's PATH variable. Here's how to do it on Windows:
1
Search for Environment Variables in the Windows search bar and select Edit the system environment variables.
2
Click on Environment Variables.
3
Under System variables, find the Path variable, select it, and click on Edit.
4
Click on New and add the path where Python is installed. By default, it is C:\PythonXX, where XX is the version number.
5
Click on OK to close all dialog boxes and restart your command prompt or terminal.

App Settings

The Preview Tool utilizes the config/app.yaml file for global settings as listed in the below table.
Property Value Default
keenicons.default
Sets the default icon style for KeenIcons.
enum
"filled" | "duotone" | "outline" | "solid"
"outline"
keenicons.demo1
Sets the KeenIcons icon style for demo1.
enum
"filled" | "duotone" | "outline" | "solid"
"outline"
container.default
Specifies the default layout container type.
enum
"fixed" | "fluid"
"fixed"
container.demo1
Specifies the default layout container type for demo1.
enum
"fixed" | "fluid"
"fixed"

Menu Settings

The Preview Tool utilizes the config/menu.yaml file for menu settings used in generating menus like the sidebar menu and megamenu. This configuration file contains multiple menu settings defined with the following common properties.
Property Value Default
section
Defines the title of the section that groups menu items.
string -
title
Defines the title of the menu item.
string -
path
Specifies the URL path for the menu items link.
string -
icon
Defines the icon name of the menu item.
string -
children
An array of submenu items.
[] -

Views

Views represent the HTML structure and are located in the views directory, which contains the layouts, pages, and partials used to generate HTML pages.

Layout Views

Layout Views represent the HTML structure for page layouts that wrapps contents during the page generation. views/layouts contains multiple layouts where each layout used for varouse cases such as, application, authentication or error pages. For application pages multiple layouts are supported as demo1, demo2, etc where each layout has unique structure and design.
Path Description
views/layouts/base.html The base layout code serves as the foundation for generating all HTML pages. It includes essential structural tags and assets ensuring a consistent layout across the entire application.
views/layouts/auth Contains the layout code designed for authentication pages, offers a tailored structure and styling optimized for login, registration, and password reset functionalities.
views/layouts/error Contains the layout code designed for error pages, designed to provide a specific structure and styling for displaying error messages like 404 and 500 pages.
views/layouts/demo1 Contains the layout code required for rendering the main content and features of the application.

Partial Views

Partial views, residing in the views/partials directory, encapsulate reusable HTML structures for various components or sections of pages within the application.

Page Views

Page views, located in the views/pages directory, contain HTML code specific to individual pages within the application, providing a structured representation of each page's content. Each page is launched from the entry file index.html within its respective directory in the application's structure.

Theme API

The Preview Tool utilizes the config/app.yaml file for global settings as listed in the below table.
Property Value Default
keenicons.default
Sets the default icon style for KeenIcons.
enum
"filled" | "duotone" | "outline" | "solid"
"outline"