Komutheme
Check Out Our Community
Share your custom themes and see what others are shipping.See Docs
Need a guide - Meet DocsExplore Our Snippets
Explore our snippetsTry This
Pal
Having trouble? Just Ask PalSnipppet Gallery
Don't know where to start?Explore our Gallery
Component Gallery
Account Settings
Appearance
Join the Community
Connect, share, and build with other developers.
Introduction
Welcome to Komutheme, a modular component system designed to let you drop rich, interactive web components into any website (WordPress, Shopify, React, or plain HTML) without worrying about CSS conflicts or complex build steps.
Why use Komutheme?
Traditional UI libraries require you to install heavy dependencies. Komutheme uses Isolated Iframes combined with a smart Loader Script. This ensures that our styles never break your site, and your site's styles never break our components.
Quick Start
Getting a component onto your page takes less than a minute:
- Go to the Themes tab in this dashboard.
- Browse and select the snippets you want (e.g., Navbar, Pricing Card).
- Click Get Selected to generate your custom code block.
- Copy the code and paste it into your HTML file (inside the
<body>tag).
<script> tag at the bottom. You must include this script for the components to load and resize correctly.
How It Works
Komutheme relies on a "Data Attribute" architecture. Instead of writing complex JavaScript configuration, you simply add data- attributes to an empty iframe.
The Loader Script
When the page loads, our script finds all iframes with a data-base-url. It reads your attributes and converts them into a URL.
<!-- You write this: -->
<iframe
data-base-url="..."
data-title="Hello World"
data-color="red">
</iframe>
<!-- The script converts it to this: -->
<iframe src="...?title=Hello%20World&color=red"></iframe>Customization & Styling
Every snippet supports specific data- attributes for customization. Common ones include:
data-accent_color: Sets the primary color (hex code without #).data-bg_color: Sets the background color.data-title,data-description: Text content.data-radius: Border radius in pixels.
Pro Tip: You can pass HTML into text attributes!
Example: data-cta_text="<b>Click Me</b>".
Responsive & Mobile
Iframes are notoriously hard to make responsive. Komutheme solves this with two mechanisms:
1. Dynamic Height (Auto-Resize)
The component inside the iframe calculates its own height and sends a message to the parent page. The loader script listens for this and updates the iframe height instantly, preventing scrollbars.
2. Mobile Widths
You can control the width of the iframe using standard CSS on the iframe itself, or use our helper attributes:
<iframe
width="100%"
data-android_width="90%" ...>
</iframe>Advanced: Events & API
Komutheme components are not static. They can communicate with your website.
Receiving Data (e.g., Form Submissions)
When a user submits a form inside an iframe (like the Input snippet), it emits a message. You can listen for it:
window.addEventListener("message", function(event) {
if (event.data.action === 'input_submitted') {
console.log("User typed:", event.data.value);
}
});Troubleshooting
- Iframe is blank: Ensure the
srcattribute is empty (src="") in your HTML. The loader script fills it. If you manually put a URL insrc, the loader will skip it. - Height is wrong/Scrollbars appear: Ensure
data-frame-idon the iframe matches theidattribute exactly. The resizer needs this link to work. - Changes not showing: If you updated a
data-attribute dynamically via JS, you may need to reload the iframe source or callinitializeKomuthemeSnippets()again.
Component Reference
Select a theme and component to view available customization parameters.