🚀 Getting Started

Plugin Structure

Every plugin is just a folder with 2 files:

plugins/
  my-plugin/
    index.js      ← Your JavaScript code
    style.css     ← Your styles (optional)

Your First Plugin (5 Minutes)

Let's create a Click Counter plugin. When users click an element, it shows how many times it was clicked.

Step 1: Create the Plugin File

File: plugins/click-counter/index.js

export default {
    name: 'click-counter',
    version: '1.0.0',
    
    mount: function(element, options) {
        var count = 0;
        
        element.addEventListener('click', function() {
            count = count + 1;
            element.textContent = 'Clicks: ' + count;
        });
        
        return { count: count };
    }
};

Step 2: Add Styling (Optional)

File: plugins/click-counter/style.css

[data-cb-type="click-counter"] {
    cursor: pointer;
    padding: 10px 20px;
    background: #f0f0f0;
    border-radius: 5px;
    display: inline-block;
}

[data-cb-type="click-counter"]:hover {
    background: #e0e0e0;
}

Step 3: Register the Plugin

const runtime = new ContentBoxRuntime({
    plugins: {
        'click-counter': {
            url: '/assets/plugins/click-counter/index.js',
            css: '/assets/plugins/click-counter/style.css'
        }
    }
});

runtime.init();

Step 4: Use in HTML

<div data-cb-type="click-counter">
    Click me!
</div>

Done! 🎉