# How to Add a New Style Preset to ImageStudio's Advanced Options

> Learn how to add a new style preset to ImageStudio's advanced options by editing the STYLE_PRESETS array. Effortlessly integrate custom styles with this simple code modification.

- Repository: [Anil Chandra Naidu Matcha/Open-Generative-AI](https://github.com/Anil-matcha/Open-Generative-AI)
- Tags: how-to-guide
- Published: 2026-04-24

---

**To add a new style preset to ImageStudio, edit the `STYLE_PRESETS` array in [`src/components/ImageStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/ImageStudio.js) and append your custom style string—the UI automatically generates a button and handles clicks without additional code.**

The **Open-Generative-AI** repository's ImageStudio component generates its style preset buttons dynamically from a single JavaScript array. By modifying this array in the core component file, you can extend the available artistic styles without touching the event handlers or rendering logic.

## Understanding ImageStudio's Style Preset Architecture

ImageStudio follows a **data-driven UI pattern** where the style options are decoupled from the presentation layer. The preset list, button generation, and click handling operate through three connected layers in [`src/components/ImageStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/ImageStudio.js).

### Where Presets Are Defined

The **source of truth** for all style presets lives in a constant array declared near line 360:

```javascript
// src/components/ImageStudio.js (line ~360)
const STYLE_PRESETS = ['None', 'Photorealistic', 'Anime', 'Cinematic', 'Oil Painting', 'Watercolor', 'Digital Art', 'Concept Art', 'Cyberpunk'];

```

According to the **Open-Generative-AI** source code, this array is the only location where the preset list is hardcoded. The component imports no external configuration files for style presets, making inline editing the standard extension method.

### How Presets Render in the UI

The advanced options panel generates buttons by mapping over `STYLE_PRESETS` at line 378:

```javascript
// src/components/ImageStudio.js (line ~378)
${STYLE_PRESETS.map(s => 
   `<button class="style-preset-btn" data-style="${s}">${s}</button>`
).join('')}

```

Because the UI iterates over the array directly, any string you add to `STYLE_PRESETS` immediately appears as a clickable button with the **text label** and **data-style attribute** set automatically.

## Step-by-Step Guide to Adding a Custom Style Preset

Follow these steps to extend ImageStudio with a new artistic style:

1. **Open** [`src/components/ImageStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/ImageStudio.js) in your editor.

2. **Locate** the `STYLE_PRESETS` declaration around line 360.

3. **Append** your new preset string to the array, preserving the existing order:

   ```javascript
   const STYLE_PRESETS = [
       'None',
       'Photorealistic',
       'Anime',
       'Cinematic',
       'Oil Painting',
       'Watercolor',
       'Digital Art',
       'Concept Art',
       'Cyberpunk',
       'Fantasy'  // <- Your new preset
   ];
   ```

4. **Save** the file. If running the Vite development server, the application hot-reloads and displays a **"Fantasy"** button in the Style Preset panel immediately.

5. **Verify** functionality by clicking the new button—the selection logic requires no modifications.

## Code Implementation Details

The click handler at lines 688-696 reads the `data-style` attribute generically, allowing any preset value to flow through to the generation logic:

```javascript
// src/components/ImageStudio.js (lines ~688-696)
advancedPanel.querySelectorAll('.style-preset-btn').forEach(btn => {
    btn.onclick = () => {
        selectedStyle = btn.dataset.style;  // Captures "Fantasy" or any new value
        // Update UI state...
    };
});

```

This implementation means **zero changes** are required to the event handling code when adding presets. The `selectedStyle` variable receives the string value directly from the DOM, ensuring immediate compatibility with custom styles.

## Customizing the Visual Appearance

While the default styling applies automatically to all preset buttons, you can target specific presets via CSS using the `data-style` attribute:

```css
/* Target the Fantasy preset specifically */
.style-preset-btn[data-style="Fantasy"] {
    background: linear-gradient(45deg, #8B5CF6, #C4B5FD);
    border-color: #7C3AED;
}

```

The **studio.css** file (or your Tailwind configuration) controls the base appearance, but attribute selectors provide per-preset customization without modifying the JavaScript.

## Summary

- **ImageStudio** defines available presets in the `STYLE_PRESETS` array located in [`src/components/ImageStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/ImageStudio.js) (line ~360).
- The UI renders buttons automatically via `Array.map()`, ensuring any array modification immediately updates the interface.
- Click handlers reference `btn.dataset.style`, making them compatible with any preset value without code changes.
- No additional JavaScript, state management, or build steps are required to add new style options.

## Frequently Asked Questions

### Where is the STYLE_PRESETS array located in the codebase?

The `STYLE_PRESETS` array is defined in **[`src/components/ImageStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/ImageStudio.js)** around line 360 according to the Open-Generative-AI source code. This is the single location where all preset strings are declared before being mapped to UI buttons.

### Do I need to modify the click handler when adding a new preset?

No. The click handler at lines 688-696 reads the `data-style` attribute dynamically using `btn.dataset.style`, so it automatically recognizes any new preset added to the `STYLE_PRESETS` array without requiring code changes.

### Will the new preset button inherit the existing styling?

Yes. All preset buttons receive the same base CSS classes during the map operation at line 378. If you need custom visuals for a specific preset, use a CSS attribute selector like `[data-style="YourPresetName"]` to target it specifically.

### Can I remove existing presets without breaking the application?

Yes. Removing entries from `STYLE_PRESETS` safely eliminates their buttons from the UI. Since the click handler only processes buttons that exist in the DOM, there are no orphaned event listeners or broken references.