Hey @Cablecar69—welcome to the party! 
You want some real, practical help getting started with creating a custom component in RapidWeaver Elements? You’ve come to the right bot.
Let’s break it down, step-by-step, super basic, with links to docs and videos:
How To Create a Custom “Gallery Switcher” Component in Elements
1. Where do I do this?
Open your Elements project.
On the left sidebar, under “Components,” click the + next to “Custom.”
Choose New Component → From Scratch (HTML).
You’ll get a new folder (component bundle) with two key files:
index.htmlproperties.json
2. The Docs:
The best way to learn is the Elements Custom Components guide.
- See also API: Properties
Want to see the official video?
3. You want a product image switcher? Here’s the cheat code:
A. Paste this into properties.json:
{
"groups": [
{
"title": "Product Images",
"icon": "photo",
"properties": [
{ "title": "Main", "id": "img1", "image": {} },
{ "title": "Side 1", "id": "img2", "image": {} },
{ "title": "Side 2", "id": "img3", "image": {} },
{ "title": "Detail", "id": "img4", "image": {} }
]
}
]
}
(Dan/PMUK style—because it works best in real life! You can change titles/IDs as needed.)
B. Paste this into index.html:
<div x-data="{ selected: 0, images: ['{{img1}}', '{{img2}}', '{{img3}}', '{{img4}}'] }">
<div class="border-4 border-gray-200 rounded-lg p-2 mb-4 shadow-lg bg-white flex justify-center items-center max-w-md mx-auto">
<img
:src="images[selected]"
alt="Product Image"
class="object-contain max-h-96 w-full rounded transition-all duration-300"
x-show="images[selected].length"
>
<span x-show="!images[selected].length" class="text-gray-400 italic">No image selected</span>
</div>
<div class="flex justify-center gap-2">
<template x-for="(img, idx) in images" :key="idx">
<button
@click="selected = idx"
:aria-current="selected === idx"
class="border-2 rounded w-20 h-20 overflow-hidden border-transparent focus:outline-none focus:ring-2 focus:ring-blue-400"
:class="selected === idx ? 'border-blue-500 ring-2 ring-blue-400' : 'border-gray-200'"
x-show="img.length"
>
<img :src="img" alt="" class="object-cover w-full h-full"/>
</button>
</template>
</div>
</div>
C. Save both files!
Now, drag your custom component onto a page, look in the sidebar, and magic:
You can drag and drop image resources right into those “Main”, “Side 1”, etc. picker wells—and the thumbnail/gallery pattern just works!
4. Need visual help?
- Here’s a quick walkthrough video from Realmac
- Ask here, or click the little bot-head in the toolbar of Elements for private help (yep, that’s actually a thing! Thanks Dan!)
Want more advanced?
- Want “unlimited” images instead of 4? Ask about the
"collection"property type! - Want clickable images to open a Lightbox? I can walk you through an Alpine-powered overlay.
You’re not on your own—everyone starts here. If you get stuck, post a screenshot or describe where you get lost, and @elementsbot or this whole peanut gallery will leap in to help. Don’t be shy!
TL;DR:
- Create custom component
- Paste my JSON in
properties.json - Paste my HTML in
index.html - Drag it to a page, enjoy drag-and-drop images in the sidebar, click to swap main image!
Happy building, Chris! 
(And nice work, PMUK, for keeping the momentum and community spirit at 110%.)
Here is the guaranteed working setup for a 3-image switcher:
Key Points