The Component Editor is where you fine‑tune the individual pieces that make up your brand guide pages — things like hero banners, galleries, paragraphs, icon cards, layout rows, and more. Every component has its own editor, its own settings, and its own live preview.

If the Page Manager is where you arrange your content, the Component Editor is where you shape it.

🌟 What You Can Do in the Component Editor

Inside this editor, you can:

• Edit any component on a page
• Preview your changes instantly
• Upload images or videos directly into a component
• Save your updates
• Convert components between local and global
• Rename or delete global components
• Navigate back to the Page Editor at any time

It’s designed to be focused, visual, and easy to use — even for complex layouts.

🧭 Page Overview

When you open the Component Editor, you’ll see:

1. Component Title

At the top, you’ll see the type of component you’re editing (e.g., Hero, Gallery, Paragraph).

2. Live Preview

A real‑time preview appears in an embedded frame. As you edit fields, the preview refreshes so you can see exactly how your changes will look.

3. Component Settings Panel

Below the preview is the editor UI for that specific component type.
Each component has its own fields — for example:

• Hero: headline, subheadline, background image
• Gallery: images, captions, layout
• Paragraph: text content, alignment
• Icon cards: icons, titles, descriptions
• Layout row: columns, spacing, nested components

You only see the fields relevant to the component you’re editing.

4. Action Buttons (fixed in bottom‑right corner)

These stay visible as you scroll:

• Save Component
• Make Global / Convert to Local
• Delete Global Component (if applicable)
• Media Upload
• Back to Page Editor

This makes it easy to save or navigate without losing your place.

🧱 Local vs. Global Components

MyStyleGuide.io supports two types of components:

Local Components

These belong only to the page you’re editing.
Changes affect only that page.

Use local components when:

• The content is unique to a single page
• You want full freedom to customize without affecting other pages

Global Components

These live in your brand’s shared component library.
Changes update every page that uses that component.

Use global components when:

• You want consistent, reusable sections
• You’re maintaining brand‑wide elements
• You want to update multiple pages at once

When editing a global component:

You’ll see a warning message:

“This is a GLOBAL component. Editing it will update all pages that use it.”

You can also:

• Rename the global component
• Delete the global component
• Convert it back to a local component

🔄 Converting Components

Make Global

Turns a local component into a reusable global one.

This is great for:

• Reusing a hero section across multiple pages
• Creating a shared brand element
• Maintaining consistency

Convert to Local

Breaks the link to the global library and creates a standalone copy.

Use this when:

• You want to customize a single instance
• You don’t want changes to affect other pages

🖼 Uploading Media Inside a Component

Many components support images or videos.

Click Media Upload to:

• Upload JPG, PNG, WEBP, or MP4
• Automatically insert the uploaded file into the component
• Immediately see it in the preview

This makes it easy to update visuals without leaving the editor.

👁 Live Preview

The preview window shows your component exactly as it will appear in the final brand guide.

It updates when you:

• Change text
• Adjust settings
• Upload images
• Edit JSON (advanced users)
• Reorder nested items

This gives you instant feedback and helps you design confidently.

🧱 Nested Components

Some components — like layout rows — contain other components inside them.

The Component Editor fully supports nested editing:

• You can open a component inside a column
• Edit it just like any other component
• Save and return to the parent layout

This allows for flexible, modular page design.

🗑 Deleting Global Components

If you delete a global component:

• It is removed from the global library
• All pages using it will have that component removed
• The system automatically cleans up references

This action cannot be undone, so use it carefully.

🔐 Permissions

Only owners and editors can access the Component Editor.

If a user does not have permission for a brand, they cannot edit its components.

🎯 Summary

The Component Editor is the heart of MyStyleGuide.io’s content‑building experience. It gives you:

• A focused workspace for editing individual components
• Real‑time previews
• Easy media uploads
• Support for nested layouts
• A powerful global component system
• Smooth navigation back to the Page Editor

It’s flexible enough for designers, simple enough for clients, and powerful enough for teams building polished brand guides.