Designer Use Guide

Last Updated: 2026-01-14 22:41:52
Introduction

The designer plugin is a high-performance visual development environment. It bridges the gap between raw HTML structure and dynamic data through a unique interface of panels, logic nodes, and professional-grade asset tools.

1. The GUI & Navigation

The interface is designed to maximize your "on-canvas" time. The Top Toolbar handles global state such as Undo/Redo, Fullscreen, viewport testing ( Desktop/Tablet/Mobile ), and visibility toggles like the "Hide Maple Syntax" and "Toggle Images" modes.

2. Canvas Objects & Building Blocks

Your design begins in the Right Side Panel, which houses two primary libraries:

  • HTML5 Blocks: Raw semantic tags ( div, section, span ) for building custom layouts from scratch.
  • Managed Objects: High-level, themeable structures like hero and cards objects that easily allow you to set a theme as a starting point.

When you click any object on the canvas, a Dynamic Toolbar appears, allowing you to move, clone, edit image properties, or wrap the component in Security Roles.

3. The Maple Logic Engine

Dynamic functionality is represented by Maple Dots. These nodes act as visual anchors for your code logic:

  • ● Blue ( imported templates ): Reusable custom and system template partials.
  • ● Red ( conditions ): Logic-based visibility ( E.g. if variable exists ).
  • ● Orange ( loops/iterations ): Data-driven repetition. Only the first iteration is editable, ensuring high performance while designing complex lists.

4. Styling, Properties & Layers

Once your objects are on the canvas, the Right Utility Tabs allow for deep customization:

  • Styles: A full CSS suite for managing Flexbox, Typography, Dimensions, and Spacing.
  • Properties: Define element IDs, titles, and non-visual attributes of an Html block.
  • Structure: A tree-view of your document. This is essential for seeing how Logic Dots wrap around your Html blocks.

5. API & Plugin Management

The Left Side Panel connects your design to the Fliddo ecosystem. Here, you can manage API Calls for live data and import plugin specific html objects. These objects are automatically tired to specific system/plugin ( E.g. blog, shop ) templates and render skeletons on your canvas for immediate styling.

6. Asset Management

The Asset Manager provides a central repository for media. It features an instant Search Filter to find files by name and integrates advanced image manipulation ( cropping, filtering, masking, etc ) directly within the editor.

Was this guide helpful?

Add Your Feedback