← Back to Documentation Live Editor Guide

✏️ Live Editor Guide

Edit templates in real-time with Base47's powerful editor

🎯 What is the Live Editor?

The Live Editor is Base47's built-in code editor that lets you:

Edit templates directly in WordPress
See changes instantly with live preview
Manage files with a built-in file browser
Use professional tools like syntax highlighting
Save and backup your changes safely

🚀 Getting Started

Accessing the Live Editor

Go to Base47 > Live Editor in your WordPress admin
Select a template from the dropdown
Choose which file to edit (HTML, CSS, or JS)
Start editing!

Interface Overview

The Live Editor has three main sections:

File Browser (left) - Navigate template files
Code Editor (center) - Edit your code
Live Preview (right) - See changes instantly

📝 Editor Features

Basic Editor (Free)

Syntax highlighting
Line numbers
Find & replace
Undo/redo
Auto-save
File tabs

Monaco Editor (Pro)

VS Code experience
IntelliSense
Error detection
Code folding
Multiple cursors
Emmet support

📁 File Management

File Browser

Navigate your template files easily:

Template-Name/
├── 📄 index.html       # Main template
├── 🎨 style.css        # Styles
├── ⚡ script.js        # JavaScript
├── 📋 theme.json       # Metadata
└── 📁 assets/
    ├── 🖼️ images/
    └── 🔤 fonts/

File Operations

Open files - Click to open in editor
Switch files - Use tabs to switch between files
File status - See modified/saved status
File size - Monitor file sizes

👀 Live Preview

Real-time Updates

See your changes instantly:

Auto-refresh - Preview updates as you type
No page reload - Smooth, instant updates
Error handling - Graceful error display
Mobile preview - Test responsive design

Preview Controls

Refresh button - Manual refresh if needed
Device modes - Mobile, tablet, desktop views
Zoom controls - Zoom in/out for detail work
Full-screen - Expand preview to full screen

💾 Saving & Backups

Auto-save

Your work is automatically saved:

Every 30 seconds - Regular auto-saves
Before closing - Save when leaving editor
On file switch - Save when changing files
Manual save - Ctrl+S or Save button

Backup System (Pro)

Pro users get automatic backups:

Before editing - Backup original files
Daily backups - Regular backup schedule
Version history - Track all changes
Restore function - Restore previous versions

🎨 Template Editing

HTML Editing

Edit your template structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Template</title>
</head>
<body>
    <header class="hero-section">
        <h1>Welcome to My Site</h1>
        <p>This is my amazing template</p>
    </header>
</body>
</html>

CSS Styling

Customize your template appearance:

.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 20px;
    text-align: center;
}

.hero-section h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

JavaScript Functionality

Add interactive features:

document.addEventListener('DOMContentLoaded', function() {
    // Smooth scrolling for navigation links
    const links = document.querySelectorAll('a[href^="#"]');
    
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            target.scrollIntoView({ behavior: 'smooth' });
        });
    });
});

🔄 Template Duplication (Pro)

Clone Templates

Create variations of existing templates:

Open template in Live Editor
Click Duplicate button
Enter new name for the copy
Edit the copy without affecting original

Use Cases

A/B testing - Test different versions
Client variations - Customize for different clients
Seasonal versions - Holiday or seasonal themes
Language versions - Different language layouts

📱 Responsive Editing

Device Preview

Test your templates on different devices:

Mobile view - 375px width (iPhone)
Tablet view - 768px width (iPad)
Desktop view - 1200px width (laptop)

Responsive CSS

Use media queries for responsive design:

/* Mobile styles */
@media (max-width: 767px) {
    .hero-section h1 {
        font-size: 2rem;
    }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section {
        padding: 80px 40px;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    .hero-section {
        padding: 120px 60px;
    }
}

⌨️ Keyboard Shortcuts

Essential Shortcuts

Shortcut	Action
`Ctrl+S`	Save file
`Ctrl+Z`	Undo
`Ctrl+Y`	Redo
`Ctrl+F`	Find
`Ctrl+H`	Find & replace

Monaco Editor (Pro) Shortcuts

Shortcut	Action
`Ctrl+Space`	Trigger IntelliSense
`F12`	Go to definition
`Alt+Click`	Multiple cursors
`Ctrl+D`	Select next occurrence
`Shift+Alt+F`	Format document