KazyUI: The Documentation
Introduction
KazyUI is a collection of UI components and custom code snippets designed for funnels and websites. Primarily built for Systeme.io and compatible with GoHighLevel (GHL), Kajabi, and other builders. These are small, self‑contained code blocks you can paste into your page builder to extend what the default editor can do. The goal is to give creators simple ways to add effects, layouts, and styles that aren’t available out of the box.
Mission
The project exists to make funnel building easier and more flexible.
We focus on components that are lightweight, easy to copy‑paste, and quick to adjust without needing coding knowledge.
Core Principles
Scoped injection designed to minimize style conflicts
Each snippet is scoped to a block ID to reduce the risk of style leakage. Platform changes or other third‑party scripts may still cause conflicts; test components in Preview/Live.
Slider‑First Customization
Adjust colors, radius, glow, and animation speed using sliders before copying the code. These controls are designed to simplify customization and reduce the need for manual edits, but manual adjustments may sometimes be necessary.
Lightweight Code
Components are written in plain CSS and vanilla JS. They load fast and don’t add unnecessary weight to your funnel.
Available & Extended
Available tools include a limited selection of components and customization options. Extended tools, when offered, may provide additional layouts, effects, and design features. Availability of extended features is subject to change.
Compatibility & Behavior
KazyUI is primarily built for the Systeme.io editor while also fully compatible with GoHighLevel, Kajabi, and other page builders that support custom HTML and CSS injection. For platform-specific usage and selector information, see the How It Works section.
Components are generated using scoped selectors to help reduce style conflicts and unintended effects on other page elements. Generated selectors are optimized for Systeme.io and may require modification depending on the target platform, page structure, installed scripts, custom styling, or rendering behavior.
Users are responsible for testing components in their intended environment. Manual adjustments may be required for optimal functionality and appearance outside Systeme.io.
Best Practices
Less Is More
Use a handful of animated components per page. Too many effects can distract from your call‑to‑action.
Mobile Awareness
Dial down intensity for mobile traffic. Older devices handle simpler animations better.
Raw HTML Rule
Place each snippet in its own Raw HTML block. Avoid stacking multiple snippets in one block to keep things clean.
Test Before Launch
Preview your funnel on a mid‑range mobile device and a standard desktop. The code is lightweight, but it’s always good practice to check responsiveness and smoothness before going live.
Understanding Editor vs. Live View Behavior
When building with custom code, it is important to understand that the Systeme.io Editor and the Live View are two distinct technical environments. Seeing a layout behave differently in the editor is a normal part of the development process.
The Editor Environment (Inside the Iframe)
The Systeme.io editor operates inside an Iframe—essentially a "window within a window."
The Container Conflict: Because the editor needs to make every element selectable, draggable, and editable, it imposes its own structural rules on your HTML.
Viewport Dominance: In this mode, the editor often forces custom containers to expand to their maximum possible size so that you can easily click on the Raw HTML block.
The Result: A component might appear to "dominate" the screen or look stretched while you are designing. This is simply the editor providing a "workspace" version of your code to ensure it remains manageable within the interface.
The Live View (The Source of Truth)
On the actual live page (or in Preview mode), the editor's "management layer" and iframe constraints are completely removed.
Natural Flow: Your code is now free to follow the standard CSS and JavaScript rules of the browser.
Layout Stability: The component will automatically snap into the natural proportions of the Section or Row you placed it in.
The Result: Even if the editor view looks "blown out" or oversized, the live view will render the layout exactly as intended.
Why You Shouldn't Worry
If your component looks correct in the Preview, it is working perfectly. The layout shifts you see in the editor are temporary and only exist to help you move and edit the block. Once the page is published, the browser ignores the editor's workspace rules and executes your code in its pure, optimized form.
Service Disclaimers
No affiliation: KazyUI is independent and not affiliated with Systeme.io, GoHighLevel, or Kajabi.No warranty: Components are provided as‑is; test before publishing.