Home

Discord Embed Components Demo

Getting Started

Follow these simple steps to add Discord-style embeds to your project:

Add the script to your HTML:

<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsembed.js"></script>


<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsembedCreator.js"></script>
Create your first embed:
// Create a simple embed
const myEmbed = new EZEmbed(
    document.getElementById('embed-container'),
    {
        title: 'My First Embed',
        description: 'This is a simple embed created with EZComponents',
        color: '#5865F2'
    }
);

// Render the embed
myEmbed.render();

Static Embed Component

// Create a static embed
const staticEmbed = new EZEmbed(
    document.getElementById('static-embed-container'),
    {
        title: 'Static Embed Example',
        description: 'This is a static embed that displays content',
        color: '#ED4245',
        author: {
            name: 'Example Author',
            iconUrl: 'https://via.placeholder.com/64'
        },
        thumbnail: 'https://via.placeholder.com/150',
        fields: [
            { name: 'Field 1', value: 'Value 1' },
            { name: 'Field 2', value: 'Value 2' },
            { name: 'Long Field', value: 'This field spans the full width', inline: false }
        ],
        footer: {
            text: 'Footer Text',
            timestamp: true
        }
    }
);

staticEmbed.render();

Embed Creator Component

Create and customize an embed with the interactive creator:

Event Log:
// Events will appear here
// JSON output will appear here
// Initialize the embed creator
const creator = new EZEmbedCreator(
    document.getElementById('embed-creator'),
    {
        initialData: {
            title: 'Interactive Embed Creator',
            description: 'Create and customize embeds with this interactive tool',
            color: '#5865F2'
        },
        colorPresets: [
            '#5865F2', '#ED4245', '#FEE75C',
            '#57F287', '#EB459E', '#7289DA'
        ]
    }
);

// Initialize the creator
creator.init();

// Listen for updates
creator.on('update', (data) => {
    console.log('Embed updated:', data);
    const eventLog = document.getElementById('event-log');
    eventLog.textContent += `\nUpdate: ${JSON.stringify(data, null, 2)}`;
    // Auto-scroll to bottom
    eventLog.scrollTop = eventLog.scrollHeight;
});

// Export JSON button
document.getElementById('export-json').addEventListener('click', () => {
    const jsonOutput = document.getElementById('json-output');
    const embedData = creator.toJSON();
    jsonOutput.textContent = JSON.stringify(embedData, null, 2);
});