The Component Editor is where you customize the individual building blocks that make up your brand guide. Whether you're editing a hero banner, gallery, paragraph, logo section, or a reusable content block, this is where every detail comes together.
If the Page Editor is where you build a page, the Component Editor is where you customize each piece of it.
From the Component Editor, you can:
Every component has its own editing experience, showing only the options that are relevant to that type of content.
The Component Editor is designed to keep everything you need within easy reach.
At the top of the editor you'll see the name of the component you're editing, such as:
This helps you quickly identify where you are while building your guide.
A built-in preview displays your component exactly as it will appear within the finished page.
As you edit text, images, settings, or layouts, the preview updates so you can immediately review your changes.
Every component includes its own set of editing options.
For example:
Hero
Gallery
Paragraph
Icon Cards
Layout Rows
Only the settings that apply to the selected component are displayed, helping keep the editor clean and focused.
MyStyleGuide.io supports two types of components.
Local Components belong only to the page where they were created.
Changes made to a Local Component affect only that page.
They're ideal for:
Global Components are reusable building blocks shared throughout your brand.
When a Global Component is updated, every page using that component is updated automatically.
Global Components work well for:
When editing a Global Component, you'll see a reminder that your changes will affect every page where it's used.
You can also rename or delete the Global Component directly from the editor.
You can switch between Local and Global Components at any time.
Converts the current component into a reusable Global Component.
Choose this when you want to reuse the same content across multiple pages while managing it from a single location.
Creates an independent copy of a Global Component.
Future edits will affect only this page, leaving the original Global Component unchanged.
This is useful when you need a one-off variation without changing every page.
Many components support images and videos.
Use Media Upload to add files directly into the component.
Supported media types include:
Uploaded media is inserted automatically, and the preview updates so you can immediately review the result.
Some components, such as Layout Rows, contain other components inside them.
Nested Components work exactly like standard components.
You can:
This allows you to build flexible, multi-column page layouts while maintaining the same editing experience throughout.
Click Save Component whenever you're ready to apply your updates.
Saving stores the component's content and refreshes the preview so you can verify your changes before returning to the Page Editor.
Global Components can be permanently removed from your brand's reusable component library.
Deleting a Global Component:
Because Global Components may appear throughout your guide, be sure they're no longer needed before deleting them.
Owners and Managers can create, edit, convert, and manage components.
Users with view-only access can browse published brand guides but cannot modify component content.
The Component Editor gives you complete control over the individual pieces that make up your brand guide.
From here you can customize content, upload media, create reusable components, build complex layouts, and preview your work—all within a focused, visual editing experience.
