HTML Setup

HTML Setup

On HTML Setup tab page you can set look and feel of your application html frontend page.

Main HTML Setup

Add Logo
Upload and adjust the logo image for your application.

  • Load Image
    Select and upload a logo image file.
  • Logo Width (px)
    Adjust the width of the logo image. This will automatically calculate image height respecting aspect ratio of the image.
  • Logo Height (px)
    The height of the image is automatically calculated using image aspect ratio, but you can adjust the height of the logo image. Do this after you set desired width.

Add Favicon
Upload a small icon for browser tabs.

  • Load Favicon Image
    Select and upload the favorite icon file. Supported file formats are: ICO, PNG, GIF, JPEG or SVG.
  • Select Menu Position
    Choose where the main menu appears on application frontend. When positioned on the left or right, the Main Menu appears as an accordion. When positioned at the top or bottom, it displays as tabs.
    You can show or hide Main Menu on “Project Setup” tab page.
  • Select Predefined Color Scheme
    Allows you to import a predefined application theme and apply its color scheme instantly. This serves as a starting point for customizing all HTML colors and properties.
  • Color picker
    For any color setting on the HTML Setup page, you can use the advanced color picker to customize your colors. You can read more about on Color Picker page.

Colors

You can fine tune colors and other properties of html elements in your application frontend. You can create and save, for later use, your own presets or choose from predefined themes.
With Advanced Color Picker you can choose colors more easily and save selections for later use.

Although the application does not support transparency in form elements directly, all color values, including those with alpha channels, are preserved and exported to the CSS file for use in the HTML frontend.
All color fields support RGB, RGBA, and Hex formats. You can also use named web colors, such as red, lightblue, or darkorange, etc.

Examples: All values in rgb and rgba goes from 0 to 255 and alpha channel (opacity) goes from 0 to 1

RGB Format: rgb(255, 255, 255) / rgb(red, green, blue)

RGBA Format: rgba(255, 255, 255, 0.8) / rgba(red, green, blue, alpha)

HEX Format: #FFFFFF

Named Color: Like Red, White, Teal …. You can find all named colors on https://www.w3schools.com/tags/ref_colornames.asp

On color double click you can open basic color dialog and choose color you want.

Create Preset

You can save any color combination for later use. Just enter preset name and click save button. After preset is saved, it will appear in “Select Preset” dropdown list.
You can also remove saved preset by selecting desired preset and clicking remove (“X”) button.

  • Preset Name
    Name your preset for easy access.
  • Save Preset
    Store the current configuration for future use.
  • Select Saved Preset
    Choose from previously saved presets.
  • Remove Preset
    Remove selected preset.

Colors and Animation

  • Animation Duration
    This setting controls the transition duration for animated CSS properties, measured in milliseconds. This timing also applies to flyout menus in the HTML frontend. You can configure flyout menus on the 3D Model and Materials tab page.
  • Easing Type
    This setting specifies the easing function used in CSS animations, which controls how the animation progresses over time. If none selected, default is Quadratic easing function. You can view all easing types in action on this page. This is also used for Flyout Menus in the HTML frontend.

Background Colors

  • Primary Background Color
    Sets the main background of the application.
  • Secondary Background Color
    Defines a complementary background shade.
  • Accent Background Color
    Highlights key areas with a contrasting color.

Font & Link Colors

  • Font Color
    Sets the default text color.
  • Accent Font Color
    Adds emphasis with a contrasting font color.
  • Link Color
    Defines the color of all hyperlinks.
  • Link Hover Color
    Specifies the color when hovering over links.

Button Styling

Normal State

  • Background Color
    Sets the default button background color.
  • Font Color
    Defines the default button text color.

Hover / Active State

  • Background Color
    Changes the button background on hover or click.
  • Font Color
    Updates the button text color during interaction.

Border

  • Border Color
    Sets the default border color.
  • Border Hover Color
    Defines the border color on hover.
  • Size (px)
    Specifies border thickness in pixels.
  • Radius (px)
    Controls how rounded the button corners appear.

Form Element Styling

Copy Colors and Settings from Button
Applies button styles to form fields for visual consistency.

Background

  • Background Color
    Sets the background color of form fields.
  • Font Color
    Defines the text color within form inputs.

Borders

  • Color
    Sets the border color for form elements.
  • Size (px)
    Specifies border thickness.
  • Radius (px)
    Adjusts corner roundness for form borders.

Loader Setup

  • Loader Overlay Color
    Set full screen overlay background, color behind your loader and modal elements in your html page.
  • Loader Text Color
    Defines the text color of a loader element (e.g. “Loading…”) in your HTML frontend.
  • Loader Font Size
    Defines font size of loading text in em units.

Flyout Menu

This group of controls lets you fine-tune the flyout menu and how images appear and behave within the menu box.

Flyout Menu Box Settings

  • Back Color
    Sets the background color of the element that contains all images.
  • Flyout Size
    Defines the size of the flyout box as a percentage relative to the scene container.
  • Show Close Button
    Enables or disables the close button for the menu box.
    Although the menu box automatically closes when clicking outside of it, you may prefer a dedicated close button for better UX.
  • Close Button Color
    Sets the color of the close button.

Flyout Images

Images in the Flyout menu begin with zero visibility and are positioned outside the flyout box. This section allows you to fine-tune their appearance, animation behavior, and sequencing.

Animation Settings

  • Start Flyout Images From
    Select the position on the HTML page where images begin to appear.
  • Animation Duration
    Specifies how long the transition takes for each image to move from its initial state to its final position. Set in milliseconds (ms).
  • Animation Delay
    Defines the delay before each image starts its animation. Also set in milliseconds (ms). This controls the chaining effect between images.

Appearance Settings

  • Image Count
    Determines how many images are displayed per row in the flyout box.
  • Size (px)
    Sets the border thickness around each image, in pixels.
  • Radius (%)
    Sets the border radius of each image, in percentage units, allowing for rounded corners.
  • Border Color
    The image border color is automatically inherited from the button’s border color.

Other border properties are inherited from the button setup, including the button’s border color and hover state.

Tooltips Setup

  • Back Color
    Set background tooltip color.
  • Font Color
    Set font tooltip color.
  • Font Size (em)
    Set tooltip font size in em value.
  • Border Size (px)
    Set tooltip border tickness in pixels (px).
  • Border Radius (px)
    Set tooltip border radius in pixels (px).

Other tooltip border properties are inherited from the button setup, including the button’s border color and hover state.
This ensures visual consistency between tooltips and their associated controls.

Custom HTML Elements

With this group of controls, you can add, edit, or update existing HTML and CSS code. Your code will be inserted into the appropriate sections of the project’s HTML, allowing you to extend functionality and customize your project further. Each text field that outputs to the frontend HTML can be populated with plain text or HTML code. However, the two fields that affect the CSS style file must be filled with valid CSS selectors and properties.

Magnify Button & Form

You can use the Magnify button to expand editing tabs into a separate form when working on your import code.
This provides a larger workspace and better visibility for complex edits.

On the Magnify Form, you’ll also find buttons with predefined HTML and CSS code blocks to help you quickly scaffold your custom code.
These templates simplify setup and reduce manual typing.

Add text to <header> HTML element.
This text appears at the top of your HTML page, on the right side of logo, and is assigned to the “.userHeaderContent” class.

Add text to <head> HTML element
If you have custom content to import into your HTML page, you can add the code here. This may include your own fonts, icons, or any external libraries that suit your needs.

Add Copyright Text
This text appears at the very bottom of your HTML page and is assigned to the .footer class. It is the last visible element on the page. You can add copyright information or any other content you wish.

Add text to the bottom of the HTML page
This text appears at the bottom of your HTML page and is assigned to the “.footerUserContent” class. It serves as an additional section near the bottom of the visible page and is positioned directly above the copyright element.

CSS
Text entered in this field will be written directly to your project’s CSS file. Use it to define custom styles, including selectors, properties, and values. This allows you to override default styles, add new visual rules, or integrate external design systems.

Custom Loader HTML
Add your custom loader HTML code in this field to personalize how the loading animation or indicator appears on the frontend. This is useful when you want to replace default progress bar with a branded or visually unique loader.

Custom Loader CSS
Add CSS styling here to customize the appearance of your loader. This field lets you define styles for the HTML elements you’ve added in the Custom Loader HTML section, giving you full control over layout, animation, colors, and responsiveness.

  • Hide Built-in: This option gives you control to enable or disable built-in loader.

✨ Looking for inspiration? You can find a variety of stylish and creative CSS loaders at this nice collection. Perfect for adding a touch of flair to your loading screens.

JavaScript
Text entered in this field will be written directly to your project’s main.js file. You can use it to add custom JavaScript code that introduces new functionality or extends existing features within your project.This is ideal for: overriding default behaviors, adding event listeners or custom UI interactions etc.

⚠️ Be cautious when editing this file—syntax errors or unsafe code may affect your entire project.

Update HTML

Click update HTML button to save all settings used on “HTML Setup” page to your project file. After this, your changes should be visible in web browser preview window on right side of application.