Real-time theme editing with instant preview

Theme Live Editor

Edit themes visually or with JSON, see changes instantly, and export your customized theme for use in your application.

Theme Live Editor Component

ThemeLiveEditor provides a powerful editing environment with visual controls, JSON editor, live preview, and export capabilities for rapid theme development.

Overview

The ThemeLiveEditor component combines visual editing tools with a JSON editor to provide a flexible theme creation experience. Changes are reflected instantly in the preview, making it easy to experiment and iterate quickly.

Key Features

Visual Editor - Edit common properties with color pickers and inputs
JSON Editor - Advanced editing with syntax highlighting and validation
Live Preview - Instant updates as you make changes
Export Theme - Download theme as JSON file
Copy to Clipboard - Copy theme JSON for quick integration
Syntax Validation - Real-time error checking
Debounced Updates - Smooth editing experience

Basic Usage

Simple Editor

TSX

import { ThemeLiveEditor } from '@shohojdhara/atomix/theme/devtools';
import { createTheme } from '@shohojdhara/atomix/theme';

const initialTheme = createTheme({
  name: 'My Theme',
  palette: {
    primary: { main: '#7AFFD7' },
    secondary: { main: '#FF5733' },
  },
});

function App() {
  const handleThemeChange = (newTheme) => {
    console.log('Theme updated:', newTheme);
  };

  return (
    <ThemeLiveEditor
      initialTheme={initialTheme}
      onChange={handleThemeChange}
    />
  );
}

23 lines502 characters

With State Management

TSX

import { useState } from 'react';

function ThemeBuilder() {
  const [theme, setTheme] = useState(initialTheme);

  return (
    <div>
      <ThemeLiveEditor
        initialTheme={theme}
        onChange={setTheme}
      />
      
      <button onClick={() => saveTheme(theme)}>
        Save Theme
      </button>
    </div>
  );
}

18 lines331 characters

Props API

Prop	Type	Default	Description
`initialTheme`	`Theme`	Required	Initial theme to edit
`onChange`	`(theme: Theme) => void`	Required	Callback when theme changes
`className`	`string`	-	Custom CSS class name
`style`	`CSSProperties`	-	Inline styles object

Editor Features

Visual Editor

The visual editor provides intuitive controls for common theme properties:

Color Pickers - Visual color selection for palette colors
Font Selectors - Choose from available font families
Size Inputs - Adjust font sizes, spacing, and other numeric values
Preset Options - Quick selection of common values

JSON Editor

For advanced editing, switch to JSON mode:

Syntax Highlighting - Color-coded JSON for readability
Auto-completion - Suggestions for property names
Error Detection - Real-time validation and error highlighting
Format/Beautify - Auto-format JSON for consistency

Export Options

Export your theme in multiple ways:

Download JSON - Save theme as a .json file
Copy to Clipboard - Copy theme JSON for quick pasting
Generate Code - Get createTheme() code snippet

Advanced Examples

Theme Builder Application

Create a complete theme builder with save/load functionality:

TSX

import { ThemeLiveEditor, ThemePreview } from '@shohojdhara/atomix/theme/devtools';
import { useState } from 'react';

function ThemeBuilderApp() {
  const [theme, setTheme] = useState(defaultTheme);
  const [savedThemes, setSavedThemes] = useState([]);

  const handleSave = () => {
    const themeName = prompt('Enter theme name:');
    if (themeName) {
      setSavedThemes([
        ...savedThemes,
        { name: themeName, theme: theme }
      ]);
    }
  };

  const handleLoad = (savedTheme) => {
    setTheme(savedTheme.theme);
  };

  return (
    <div className="theme-builder">
      <div className="sidebar">
        <h3>Saved Themes</h3>
        {savedThemes.map((saved) => (
          <button
            key={saved.name}
            onClick={() => handleLoad(saved)}
          >
            {saved.name}
          </button>
        ))}
      </div>

      <div className="editor">
        <ThemeLiveEditor
          initialTheme={theme}
          onChange={setTheme}
        />
        <button onClick={handleSave}>Save Theme</button>
      </div>

      <div className="preview">
        <ThemePreview theme={theme} />
      </div>
    </div>
  );
}

49 lines1167 characters

Collaborative Editing

Sync theme changes across multiple users:

TSX

import { useEffect, useState } from 'react';

function CollaborativeThemeEditor({ roomId }) {
  const [theme, setTheme] = useState(defaultTheme);

  // Sync with backend
  useEffect(() => {
    const socket = connectToRoom(roomId);
    
    socket.on('theme-update', (newTheme) => {
      setTheme(newTheme);
    });

    return () => socket.disconnect();
  }, [roomId]);

  const handleChange = (newTheme) => {
    setTheme(newTheme);
    // Broadcast to other users
    broadcastThemeUpdate(roomId, newTheme);
  };

  return (
    <ThemeLiveEditor
      initialTheme={theme}
      onChange={handleChange}
    />
  );
}

29 lines620 characters

Undo/Redo Support

Add undo/redo functionality to the editor:

TSX

function ThemeEditorWithHistory() {
  const [history, setHistory] = useState([defaultTheme]);
  const [currentIndex, setCurrentIndex] = useState(0);

  const currentTheme = history[currentIndex];

  const handleChange = (newTheme) => {
    const newHistory = history.slice(0, currentIndex + 1);
    setHistory([...newHistory, newTheme]);
    setCurrentIndex(newHistory.length);
  };

  const undo = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 1);
    }
  };

  const redo = () => {
    if (currentIndex < history.length - 1) {
      setCurrentIndex(currentIndex + 1);
    }
  };

  return (
    <div>
      <div className="controls">
        <button onClick={undo} disabled={currentIndex === 0}>
          Undo
        </button>
        <button onClick={redo} disabled={currentIndex === history.length - 1}>
          Redo
        </button>
      </div>

      <ThemeLiveEditor
        initialTheme={currentTheme}
        onChange={handleChange}
      />
    </div>
  );
}

42 lines1001 characters

Best Practices

Start with Visual Editor

Use the visual editor for quick adjustments to common properties. Switch to JSON mode for advanced customization or bulk edits.

Save Frequently

Export your theme regularly during development. Use the copy to clipboard feature for quick backups or sharing with team members.

Validate Before Exporting

The editor validates syntax in real-time, but always test your exported theme with ThemeInspector to catch any logical errors or accessibility issues.

Performance Note

Updates are debounced for smooth editing. The onChange callback fires after a short delay to prevent excessive re-renders during rapid typing.

Keyboard Shortcuts

Shortcut	Action
`Cmd/Ctrl + S`	Export theme
`Cmd/Ctrl + C`	Copy theme JSON to clipboard
`Cmd/Ctrl + F`	Format JSON (in JSON mode)
`Cmd/Ctrl + Z`	Undo (if implemented)
`Cmd/Ctrl + Shift + Z`	Redo (if implemented)

Related Tools

Combine ThemeLiveEditor with other devtools:

✨ Try Live Editor - Interactive theme editor example → Theme Preview - Preview your edited theme → Theme Inspector - Validate your theme → Theme Studio - Full theme creation environment ← Back to Devtools Overview

Real-time theme editing with instant preview

Theme Live Editor

Edit themes visually or with JSON, see changes instantly, and export your customized theme for use in your application.