Add your compelling subheadline or description text here to engage your visitors.
Get StartedDescription of your first amazing feature goes here.
Description of your second amazing feature goes here.
Description of your third amazing feature goes here.
Hear from our satisfied customers
"This product has completely transformed how we work. The results speak for themselves."
"Exceptional quality and outstanding customer service. I couldn't be happier with my experience."
"A game-changer for our business. The ROI has been incredible from day one."
Choose the plan that's right for you
Perfect for individuals
Best for growing teams
For large organizations
Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.
Join thousands of satisfied customers and take your business to the next level.
Insert your text here. You can edit this content directly.
', attributes: { class: 'gjs-fonts gjs-f-text' } }); // Heading Block blockManager.add('heading', { label: 'Heading', category: 'Basic', content: 'We offer a 30-day money-back guarantee on all purchases. If you're not satisfied, contact our support team for a full refund.
Standard shipping takes 5-7 business days. Express shipping is available for 2-3 business day delivery.
Yes! Our support team is available 24/7 via email and live chat. Phone support is available Mon-Fri, 9am-5pm EST.
You can cancel your subscription at any time from your account settings. No cancellation fees apply.
The talented people behind our success
CEO & Founder
Visionary leader with 15+ years of experience.
Lead Designer
Award-winning designer creating beautiful experiences.
CTO
Full-stack engineer building scalable systems.
Subscribe to our newsletter for the latest updates and exclusive offers.
No spam, unsubscribe anytime.
Trusted by leading companies
No links container found
'; return; } // Get all link components const links = linksContainer.components().filter(c => c.get('tagName')?.toLowerCase() === 'a'); // Clear and rebuild list navLinksList.innerHTML = ''; links.forEach((link, index) => { const item = document.createElement('div'); item.className = 'nav-link-item'; const textSpan = document.createElement('span'); textSpan.className = 'nav-link-text'; textSpan.textContent = link.getEl()?.textContent || 'Link'; const deleteBtn = document.createElement('button'); deleteBtn.className = 'nav-link-delete'; deleteBtn.innerHTML = ''; deleteBtn.title = 'Remove link'; deleteBtn.addEventListener('click', () => { link.remove(); loadNavLinks(component); }); item.appendChild(textSpan); item.appendChild(deleteBtn); navLinksList.appendChild(item); }); if (links.length === 0) { navLinksList.innerHTML = 'No links in navigation
'; } } // Helper to apply style to selected component function applyStyle(property, value) { const selected = editor.getSelected(); if (selected) { selected.addStyle({ [property]: value }); } } // ========================================== // Color Preset Handlers // ========================================== // Text color presets document.querySelectorAll('.color-preset.text-color').forEach(btn => { btn.addEventListener('click', () => { applyStyle('color', btn.dataset.color); document.querySelectorAll('.text-color').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Background color presets document.querySelectorAll('.color-preset.bg-color').forEach(btn => { btn.addEventListener('click', () => { const selected = editor.getSelected(); if (selected) { // Remove gradient when applying solid color selected.addStyle({ 'background-color': btn.dataset.color, 'background-image': 'none', 'background': btn.dataset.color }); } document.querySelectorAll('.bg-color').forEach(b => b.classList.remove('active')); document.querySelectorAll('.gradient-preset').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Gradient presets document.querySelectorAll('.gradient-preset').forEach(btn => { btn.addEventListener('click', () => { const gradient = btn.dataset.gradient; const selected = editor.getSelected(); if (selected) { if (gradient === 'none') { // Remove gradient selected.addStyle({ 'background-image': 'none', 'background': '' }); } else { // Apply gradient selected.addStyle({ 'background': gradient, 'background-image': gradient }); } } document.querySelectorAll('.gradient-preset').forEach(b => b.classList.remove('active')); document.querySelectorAll('.bg-color').forEach(b => b.classList.remove('active')); if (gradient !== 'none') { btn.classList.add('active'); } }); }); // Divider color presets document.querySelectorAll('.color-preset.divider-color').forEach(btn => { btn.addEventListener('click', () => { applyStyle('border-top-color', btn.dataset.color); document.querySelectorAll('.divider-color').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Button background color presets document.querySelectorAll('.color-preset.btn-bg-color').forEach(btn => { btn.addEventListener('click', () => { applyStyle('background-color', btn.dataset.color); // Also update text color for contrast const color = btn.dataset.color; if (color === '#ffffff' || color === '#f9fafb') { applyStyle('color', '#1f2937'); } else { applyStyle('color', '#ffffff'); } document.querySelectorAll('.btn-bg-color').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // ========================================== // Font Preset Handlers // ========================================== document.querySelectorAll('.font-preset').forEach(btn => { btn.addEventListener('click', () => { applyStyle('font-family', btn.dataset.font); document.querySelectorAll('.font-preset').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Font weight presets document.querySelectorAll('.weight-preset').forEach(btn => { btn.addEventListener('click', () => { applyStyle('font-weight', btn.dataset.weight); document.querySelectorAll('.weight-preset').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Text size presets document.querySelectorAll('.size-preset').forEach(btn => { btn.addEventListener('click', () => { applyStyle('font-size', btn.dataset.size); document.querySelectorAll('.size-preset').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Spacing presets document.querySelectorAll('.spacing-preset').forEach(btn => { btn.addEventListener('click', () => { applyStyle('padding', btn.dataset.padding); document.querySelectorAll('.spacing-preset').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Border radius presets document.querySelectorAll('.radius-preset').forEach(btn => { btn.addEventListener('click', () => { applyStyle('border-radius', btn.dataset.radius); document.querySelectorAll('.radius-preset').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Line thickness presets (for dividers/hr) document.querySelectorAll('.thickness-preset').forEach(btn => { btn.addEventListener('click', () => { applyStyle('border-top-width', btn.dataset.thickness); document.querySelectorAll('.thickness-preset').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // ========================================== // Heading Level Controls // ========================================== setupHeadingLevelButtons(); // ========================================== // Background Image Controls // ========================================== // Update background image URL const updateBgImage = debounce(() => { const selected = editor.getSelected(); if (selected) { const url = bgImageUrlInput.value.trim(); if (url) { selected.addStyle({ 'background-image': `url(${url})` }); } else { selected.addStyle({ 'background-image': 'none' }); } } }, 300); bgImageUrlInput.addEventListener('input', updateBgImage); // Background size bgSizeSelect.addEventListener('change', () => { const selected = editor.getSelected(); if (selected) { selected.addStyle({ 'background-size': bgSizeSelect.value }); } }); // Background position bgPositionSelect.addEventListener('change', () => { const selected = editor.getSelected(); if (selected) { selected.addStyle({ 'background-position': bgPositionSelect.value }); } }); // Remove background image removeBgImageBtn.addEventListener('click', () => { const selected = editor.getSelected(); if (selected) { selected.addStyle({ 'background-image': 'none', 'background-color': '#ffffff' }); bgImageUrlInput.value = ''; } }); // ========================================== // Overlay Controls // ========================================== // Overlay color presets document.querySelectorAll('.overlay-color').forEach(btn => { btn.addEventListener('click', () => { currentOverlayColor = btn.dataset.color; const selected = editor.getSelected(); if (selected) { const opacity = currentOverlayOpacity / 100; selected.addStyle({ 'background': `rgba(${currentOverlayColor},${opacity})` }); } document.querySelectorAll('.overlay-color').forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // Overlay opacity slider overlayOpacitySlider.addEventListener('input', () => { currentOverlayOpacity = parseInt(overlayOpacitySlider.value); overlayOpacityValue.textContent = currentOverlayOpacity + '%'; const selected = editor.getSelected(); if (selected && isOverlay(selected)) { const opacity = currentOverlayOpacity / 100; selected.addStyle({ 'background': `rgba(${currentOverlayColor},${opacity})` }); } }); // ========================================== // Navigation Controls // ========================================== // Sync navigation with pages syncNavPagesBtn.addEventListener('click', () => { const selected = editor.getSelected(); if (!selected || !isNavigation(selected)) return; // Find the nav-links container const linksContainer = selected.components().find(c => { const classes = c.getClasses(); return classes.includes('nav-links'); }); if (!linksContainer) { alert('Navigation structure not recognized. Please use the Navigation block.'); return; } // Get CTA button if exists (keep it) const existingLinks = linksContainer.components(); let ctaLink = null; existingLinks.forEach(link => { const classes = link.getClasses(); if (classes.includes('nav-cta')) { ctaLink = link.clone(); } }); // Clear existing links linksContainer.components().reset(); // Add links for each page pages.forEach((page, index) => { linksContainer.components().add({ tagName: 'a', attributes: { href: page.slug === 'index' ? '#' : `#${page.slug}` }, style: { 'color': '#4b5563', 'text-decoration': 'none', 'font-size': '15px', 'font-family': 'Inter, sans-serif' }, content: page.name }); }); // Re-add CTA if existed if (ctaLink) { linksContainer.components().add(ctaLink); } // Refresh the links list UI loadNavLinks(selected); }); // Add new link to navigation addNavLinkBtn.addEventListener('click', () => { const selected = editor.getSelected(); if (!selected || !isNavigation(selected)) return; // Find the nav-links container const linksContainer = selected.components().find(c => { const classes = c.getClasses(); return classes.includes('nav-links'); }); if (!linksContainer) { alert('Navigation structure not recognized. Please use the Navigation block.'); return; } // Find position to insert (before CTA if exists) const links = linksContainer.components(); let insertIndex = links.length; links.forEach((link, index) => { const classes = link.getClasses(); if (classes.includes('nav-cta')) { insertIndex = index; } }); // Add new link linksContainer.components().add({ tagName: 'a', attributes: { href: '#' }, style: { 'color': '#4b5563', 'text-decoration': 'none', 'font-size': '15px', 'font-family': 'Inter, sans-serif' }, content: 'New Link' }, { at: insertIndex }); // Refresh the links list UI loadNavLinks(selected); }); // ========================================== // Link Editing // ========================================== // Debounce helper function debounce(fn, delay) { let timeoutId; return (...args) => { clearTimeout(timeoutId); timeoutId = setTimeout(() => fn(...args), delay); }; } // Update link href const updateLinkHref = debounce(() => { const selected = editor.getSelected(); if (selected && (selected.get('tagName')?.toLowerCase() === 'a' || selected.get('tagName')?.toLowerCase() === 'button')) { selected.addAttributes({ href: linkUrlInput.value }); } }, 300); linkUrlInput.addEventListener('input', updateLinkHref); // Update link target linkNewTabCheckbox.addEventListener('change', () => { const selected = editor.getSelected(); if (selected && selected.get('tagName')?.toLowerCase() === 'a') { if (linkNewTabCheckbox.checked) { selected.addAttributes({ target: '_blank', rel: 'noopener noreferrer' }); } else { selected.removeAttributes('target'); selected.removeAttributes('rel'); } } }); // ========================================== // Save Status Indicator // ========================================== editor.on('storage:start', () => { saveStatus.classList.add('saving'); saveStatus.classList.remove('saved'); statusText.textContent = 'Saving...'; }); editor.on('storage:end', () => { saveStatus.classList.remove('saving'); saveStatus.classList.add('saved'); statusText.textContent = 'Saved'; }); editor.on('storage:error', (err) => { saveStatus.classList.remove('saving'); statusText.textContent = 'Error saving'; console.error('Storage error:', err); }); // ========================================== // Keyboard Shortcuts // ========================================== document.addEventListener('keydown', (e) => { // Only handle if not typing in an input if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; // Ctrl/Cmd + Z = Undo if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) { e.preventDefault(); editor.UndoManager.undo(); } // Ctrl/Cmd + Shift + Z = Redo (or Ctrl + Y) if ((e.ctrlKey || e.metaKey) && ((e.key === 'z' && e.shiftKey) || e.key === 'y')) { e.preventDefault(); editor.UndoManager.redo(); } // Delete/Backspace = Remove selected if (e.key === 'Delete' || e.key === 'Backspace') { const selected = editor.getSelected(); if (selected && !e.target.isContentEditable) { e.preventDefault(); selected.remove(); } } // Escape = Deselect if (e.key === 'Escape') { editor.select(null); } }); // ========================================== // Update guided controls when selection changes // ========================================== // Video Section Trait Change Listener // ========================================== // Global listener for video URL trait changes editor.on('component:update', (component) => { // Check if this is a video section const attrs = component.getAttributes(); if (attrs && attrs['data-video-section'] === 'true') { const videoUrl = attrs.videoUrl; if (videoUrl) { console.log('Video section updated with URL:', videoUrl); // Find the bg-video-wrapper child const videoWrapper = component.components().find(c => c.getAttributes()['data-bg-video'] === 'true' ); if (videoWrapper) { console.log('Applying video URL to wrapper'); videoWrapper.addAttributes({ videoUrl: videoUrl }); applyVideoUrl(videoWrapper, videoUrl); } else { console.error('Video wrapper not found!'); } } } }); // ========================================== editor.on('component:selected', (component) => { // Show context-aware UI sections showSectionsForElement(component); if (!component) return; const styles = component.getStyle(); // Reset all active states document.querySelectorAll('.color-preset, .size-preset, .spacing-preset, .radius-preset, .thickness-preset, .font-preset, .weight-preset, .gradient-preset') .forEach(btn => btn.classList.remove('active')); // Set active text color const textColor = styles['color']; if (textColor) { document.querySelectorAll('.text-color').forEach(btn => { if (btn.dataset.color === textColor) btn.classList.add('active'); }); } // Set active background color or gradient const bgColor = styles['background-color']; const bgImage = styles['background-image'] || styles['background']; // Check for gradient first if (bgImage && bgImage.includes('gradient')) { document.querySelectorAll('.gradient-preset').forEach(btn => { // Normalize gradient strings for comparison const btnGradient = btn.dataset.gradient?.replace(/\s/g, ''); const elGradient = bgImage.replace(/\s/g, ''); if (btnGradient && elGradient.includes(btnGradient.replace(/\s/g, ''))) { btn.classList.add('active'); } }); } else if (bgColor) { document.querySelectorAll('.bg-color, .btn-bg-color').forEach(btn => { if (btn.dataset.color === bgColor) btn.classList.add('active'); }); } // Set active divider color const borderTopColor = styles['border-top-color']; if (borderTopColor) { document.querySelectorAll('.divider-color').forEach(btn => { if (btn.dataset.color === borderTopColor) btn.classList.add('active'); }); } // Set active font family const fontFamily = styles['font-family']; if (fontFamily) { document.querySelectorAll('.font-preset').forEach(btn => { if (fontFamily.includes(btn.dataset.font.split(',')[0].trim())) { btn.classList.add('active'); } }); } // Set active font weight const fontWeight = styles['font-weight']; if (fontWeight) { document.querySelectorAll('.weight-preset').forEach(btn => { if (btn.dataset.weight === fontWeight) btn.classList.add('active'); }); } // Set active font size const fontSize = styles['font-size']; if (fontSize) { document.querySelectorAll('.size-preset').forEach(btn => { if (btn.dataset.size === fontSize) btn.classList.add('active'); }); } // Set active padding const padding = styles['padding']; if (padding) { document.querySelectorAll('.spacing-preset').forEach(btn => { if (btn.dataset.padding === padding) btn.classList.add('active'); }); } // Set active border radius const borderRadius = styles['border-radius']; if (borderRadius) { document.querySelectorAll('.radius-preset').forEach(btn => { if (btn.dataset.radius === borderRadius) btn.classList.add('active'); }); } // Set active thickness const borderTopWidth = styles['border-top-width']; if (borderTopWidth) { document.querySelectorAll('.thickness-preset').forEach(btn => { if (btn.dataset.thickness === borderTopWidth) btn.classList.add('active'); }); } }); // Handle deselection editor.on('component:deselected', () => { showSectionsForElement(null); }); // ========================================== // Context Menu // ========================================== const contextMenu = document.getElementById('context-menu'); let clipboard = null; // Store copied component // Hide context menu function hideContextMenu() { contextMenu.classList.remove('visible'); } // Show context menu at position function showContextMenu(x, y) { const selected = editor.getSelected(); if (!selected) return; // Update disabled states const pasteItem = contextMenu.querySelector('[data-action="paste"]'); if (pasteItem) { pasteItem.classList.toggle('disabled', !clipboard); } // Position the menu contextMenu.style.left = x + 'px'; contextMenu.style.top = y + 'px'; // Make sure menu doesn't go off screen contextMenu.classList.add('visible'); const rect = contextMenu.getBoundingClientRect(); if (rect.right > window.innerWidth) { contextMenu.style.left = (x - rect.width) + 'px'; } if (rect.bottom > window.innerHeight) { contextMenu.style.top = (y - rect.height) + 'px'; } } // Listen for right-click on canvas editor.on('component:selected', (component) => { if (!component) return; // Get the component's element in the canvas const el = component.getEl(); if (!el) return; // Remove any existing listener el.removeEventListener('contextmenu', handleContextMenu); // Add context menu listener el.addEventListener('contextmenu', handleContextMenu); }); function handleContextMenu(e) { e.preventDefault(); e.stopPropagation(); const selected = editor.getSelected(); if (!selected) return; // Get canvas iframe offset const canvas = editor.Canvas; const canvasEl = canvas.getElement(); const iframe = canvasEl.querySelector('iframe'); const iframeRect = iframe.getBoundingClientRect(); // Calculate position relative to main window const x = e.clientX + iframeRect.left; const y = e.clientY + iframeRect.top; showContextMenu(x, y); } // Close context menu when clicking elsewhere document.addEventListener('click', hideContextMenu); document.addEventListener('keydown', (e) => { if (e.key === 'Escape') hideContextMenu(); }); // Handle context menu actions contextMenu.addEventListener('click', (e) => { const item = e.target.closest('.context-menu-item'); if (!item || item.classList.contains('disabled')) return; const action = item.dataset.action; const selected = editor.getSelected(); if (!selected && action !== 'paste') { hideContextMenu(); return; } switch (action) { case 'edit': // Trigger inline editing if available if (selected.get('editable') !== false) { const el = selected.getEl(); if (el) { el.setAttribute('contenteditable', 'true'); el.focus(); } } break; case 'duplicate': const parent = selected.parent(); if (parent) { const index = parent.components().indexOf(selected); const clone = selected.clone(); parent.components().add(clone, { at: index + 1 }); editor.select(clone); } break; case 'copy': clipboard = selected.clone(); break; case 'paste': if (clipboard) { const targetParent = selected.parent() || editor.getWrapper(); if (targetParent) { const index = selected ? targetParent.components().indexOf(selected) + 1 : undefined; const pasted = clipboard.clone(); targetParent.components().add(pasted, { at: index }); editor.select(pasted); } } break; case 'move-up': const parentUp = selected.parent(); if (parentUp) { const components = parentUp.components(); const indexUp = components.indexOf(selected); if (indexUp > 0) { components.remove(selected); components.add(selected, { at: indexUp - 1 }); editor.select(selected); } } break; case 'move-down': const parentDown = selected.parent(); if (parentDown) { const components = parentDown.components(); const indexDown = components.indexOf(selected); if (indexDown < components.length - 1) { components.remove(selected); components.add(selected, { at: indexDown + 1 }); editor.select(selected); } } break; case 'select-parent': const parentEl = selected.parent(); if (parentEl && parentEl.get('type') !== 'wrapper') { editor.select(parentEl); } break; case 'wrap': const wrapParent = selected.parent(); if (wrapParent) { const wrapIndex = wrapParent.components().indexOf(selected); // Create wrapper div const wrapper = wrapParent.components().add({ tagName: 'div', style: { padding: '20px' }, components: [] }, { at: wrapIndex }); // Move selected into wrapper selected.move(wrapper, {}); editor.select(wrapper); } break; case 'delete': selected.remove(); break; case 'delete-section': // Find the topmost parent section/container (not wrapper) { let sectionTarget = selected; let sectionParent = sectionTarget.parent(); while (sectionParent && sectionParent.get('type') !== 'wrapper') { sectionTarget = sectionParent; sectionParent = sectionTarget.parent(); } if (confirm('Delete this entire section and all its children?')) { sectionTarget.remove(); } } break; } hideContextMenu(); }); // Add keyboard shortcuts for copy/paste/duplicate document.addEventListener('keydown', (e) => { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) return; const selected = editor.getSelected(); if (!selected) return; // Ctrl/Cmd + C = Copy if ((e.ctrlKey || e.metaKey) && e.key === 'c') { clipboard = selected.clone(); } // Ctrl/Cmd + V = Paste if ((e.ctrlKey || e.metaKey) && e.key === 'v' && clipboard) { e.preventDefault(); const targetParent = selected.parent() || editor.getWrapper(); if (targetParent) { const index = targetParent.components().indexOf(selected) + 1; const pasted = clipboard.clone(); targetParent.components().add(pasted, { at: index }); editor.select(pasted); } } // Ctrl/Cmd + D = Duplicate if ((e.ctrlKey || e.metaKey) && e.key === 'd') { e.preventDefault(); const parent = selected.parent(); if (parent) { const index = parent.components().indexOf(selected); const clone = selected.clone(); parent.components().add(clone, { at: index + 1 }); editor.select(clone); } } }); // ========================================== // Add default content if empty // ========================================== editor.on('load', () => { const components = editor.getComponents(); if (components.length === 0) { // Add a starter section editor.addComponents(`Drag and drop components from the left panel to build your website. Click on any element to edit its content and style.
Get Started❌ No templates available
${e.message}
Make sure HTTP server is running
