Define default configuration parameters for your plugin.
Public Methods
3
Methods will be generated with placeholder bodies.
Features
Frequently Asked Questions
A Vanilla JS plugin is a reusable JavaScript module built without any third-party libraries (like jQuery). It uses pure (vanilla) JavaScript and can be embedded into any web project. Vanilla plugins are lightweight, have zero dependencies, and work across all modern browsers.
IIFE is best for direct browser inclusion via a script tag. UMD offers maximum compatibility, working with AMD, CommonJS, and browser globals – ideal for npm packages. ES6 Class Module is perfect for modern projects using import/export and bundlers like Webpack, Rollup, or Vite. Factory Function suits functional programming styles and tree-shaking optimization.
After generating your plugin code, save it as index.js, create a package.json file with npm init, add your plugin as the main entry point, and run npm publish. For UMD format, make sure to set the "main" field correctly. Consider also adding a "module" field for ES6 consumers.
The Event System adds on(event, callback), off(event, callback), and emit(event, data) methods to your plugin. This allows external code to subscribe to plugin events (like 'initialized', 'destroyed', 'updated') without modifying the plugin internals – a powerful pattern for extensible plugins.
Absolutely! The code generated by this tool is 100% yours. There are no restrictions, licenses, or attribution requirements. You can use it in personal, open-source, or commercial projects without any limitations. Think of it as your personal boilerplate generator.
While this generator outputs plain JavaScript, you can easily add TypeScript types. Create a .d.ts declaration file alongside your plugin, or convert the generated code to .ts and add type annotations. The UMD and ES6 Class formats are especially easy to migrate to TypeScript. We may add native TS output in a future update.
');
lines.push('');
} else if (format === 'es6-class') {
lines.push('// Import the plugin');
lines.push('import ' + pluginName + ' from \'./' + fileName + '\';');
lines.push('');
lines.push('// Select the target element');
lines.push('const element = document.querySelector(\'.my-element\');');
lines.push('');
lines.push('// Create a new plugin instance');
lines.push('const instance = new ' + pluginName + '(element, {');
var opts2 = getOptionsData();
if (opts2.length > 0) {
for (var j = 0; j < Math.min(3, opts2.length); j++) {
var o2 = opts2[j];
var val2 = formatOptionValue(o2.type, o2.value);
lines.push(' ' + o2.name + ': ' + val2 + ',');
}
lines.push(' // ... other options');
}
lines.push('});');
lines.push('');
lines.push('// Call public methods');
lines.push('// instance.update();');
lines.push('// instance.destroy();');
} else if (format === 'factory') {
lines.push('// Import the factory function');
lines.push('import ' + namespace + ' from \'./' + fileName + '\';');
lines.push('');
lines.push('// Select the target element');
lines.push('const element = document.querySelector(\'.my-element\');');
lines.push('');
lines.push('// Create plugin instance via factory');
lines.push('const plugin = ' + namespace + '(element, {');
var opts3 = getOptionsData();
if (opts3.length > 0) {
for (var k = 0; k < Math.min(3, opts3.length); k++) {
var o3 = opts3[k];
var val3 = formatOptionValue(o3.type, o3.value);
lines.push(' ' + o3.name + ': ' + val3 + ',');
}
lines.push(' // ... other options');
}
lines.push('});');
lines.push('');
lines.push('// Use public API');
lines.push('// plugin.update();');
lines.push('// plugin.destroy();');
lines.push('// console.log(plugin.getSettings());');
}
return lines.join('\n');
}
function updateCodePreview() {
if (activeTab === 'code') {
$codeOutput.text(generatePluginCode());
} else {
$codeOutput.text(generateUsageExample());
}
}
function triggerUpdate() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(function() {
updateCodePreview();
saveConfig();
}, 300);
}
// ── Initialization ────────────────────────────────
function initialize() {
var loaded = loadConfig();
if (!loaded) {
restoreOptions(defaultOptionsData);
restoreMethods(defaultMethodsData);
}
updateCodePreview();
updateOptionCount();
updateMethodCount();
}
// ── Event Bindings ────────────────────────────────
$pluginName.on('input', function() {
var name = $(this).val().trim();
if (name && $namespace.val() === name.charAt(0).toLowerCase() + name.slice(1) || $namespace.val() === '') {
// Only auto-update namespace if it matches the previous pattern or is empty
}
triggerUpdate();
});
$namespace.on('input', triggerUpdate);
$version.on('input', triggerUpdate);
$author.on('input', triggerUpdate);
$format.on('change', function() {
// Auto-update namespace when switching formats
triggerUpdate();
});
$strictMode.on('change', triggerUpdate);
$jsdoc.on('change', triggerUpdate);
$eventSystem.on('change', triggerUpdate);
$chainable.on('change', triggerUpdate);
// Add option
$('#pb-add-option').on('click', function() {
$optionsContainer.append(createOptionRow());
updateOptionCount();
triggerUpdate();
});
// Remove option
$optionsContainer.on('click', '.pb-remove-option', function() {
$(this).closest('.pb-option-row').remove();
updateOptionCount();
triggerUpdate();
});
// Option changes
$optionsContainer.on('input change', 'input, select', function() {
triggerUpdate();
});
// Add method
$('#pb-add-method').on('click', function() {
$methodsContainer.append(createMethodRow());
updateMethodCount();
triggerUpdate();
});
// Remove method
$methodsContainer.on('click', '.pb-remove-method', function() {
$(this).closest('.pb-method-row').remove();
updateMethodCount();
triggerUpdate();
});
// Method changes
$methodsContainer.on('input', 'input', function() {
triggerUpdate();
});
// Code tabs
$codeTabs.on('click', function() {
var tab = $(this).data('tab');
if (tab === activeTab) return;
activeTab = tab;
$codeTabs.removeClass('active');
$(this).addClass('active');
updateCodePreview();
});
// Copy button
$copyBtn.on('click', function() {
var code = $codeOutput.text();
if (!code || code.trim() === '') return;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(code).then(function() {
showToast('Code copied to clipboard!', 'fa-circle-check');
}).catch(function() {
fallbackCopy(code);
});
} else {
fallbackCopy(code);
}
});
function fallbackCopy(text) {
var $ta = $('
UD5 Toolkit