SRGB Component Builder

Component Properties

Product Name

Display Name

Brand

Component Type

Device Image (Optional)

Max 400x400 pixels.

Click to paste image

Click the above box and use Ctrl + V to paste, or press Delete to remove. You can also use drag-and-drop.

Shapes

0 LEDs

Most motherboard ARGB headers support ~120 LEDs. You are adding more at your own risk!

---, ---

Comments

Comments are public. Please be respectful and courteous.

Loading comments...

Save this component to the cloud to enable comments.

Add a comment

Please sign in to post a comment.

Notification

...

Help & Quick Guide

Welcome to the SRGB Component Builder. Here are the basics to get you started.

Pan Canvas: Hold the Middle Mouse Button and drag.
Zoom Canvas: Use the Mouse Wheel to zoom in and out.
Reset View: Click the (Reset Zoom) button or press `0`.

Select Tool (V): Used to select LEDs.
- Click an LED to select it.
- Hold Shift while clicking to add/remove LEDs from your selection.
- Click and drag on an empty area to create a selection box.
- Click and drag a selected LED to move the entire selection.
Image Guide Tool (I): Used to position, scale, and rotate a persistent background image guide. The image guide is always **underneath the grid** and is **saved across sessions** until explicitly removed.
- Use the button to load an image. The image will be resized on upload.
- Click and drag the image to reposition it.
- Drag the bottom-right handle (Scale handle) to scale the image.
- Drag the top-left handle (Rotate handle) to rotate the image (snaps to 15°).
- Use L or right-click to Lock/Unlock the image position.
- Use H to Hide/Show the image.
- Use the button to remove the image guide completely.
Place LED Tool (P): Click on the grid to place an LED. Each subsequent click will place a new LED and automatically wire it to the previous one in a chain.
- Right-click to stop the current chain.
Wiring Tool (W): Used to manually connect LEDs.
- Click an unwired LED or the end-point of a chain to start a wire.
- Click another valid LED (unwired or an end-point) to complete the connection.
- Right-click an LED to remove it from its wire chain.
- Right-click a wire segment to break the circuit in two at that point.

V - Activate Select Tool
I - Activate Image Guide Tool
P - Activate Place LED Tool
W - Activate Wiring Tool
L - Toggle Image Lock/Unlock
H - Toggle Image Hide/Show

G - Toggle Grid
S - Scale Selected LEDs
Delete / Backspace - Delete Selected
+ (Numpad) - Zoom In
- (Numpad) - Zoom Out
0 (Numpad) - Reset Zoom

Actions

Click Button: Rotate selected 90° counter-clockwise.
Shift + Click Button: Rotate selected 90° clockwise.

You must be signed in to save components to the cloud.

New: Clears the canvas. It will ask for confirmation if you have unsaved changes. *Note: The Image Guide remains loaded unless explicitly removed.*
Save: Saves your current component and the Image Guide to the cloud under your account. If you loaded a community component, this will "fork" it and save a new copy for you.
Import JSON: Lets you load a component from a `.json` file from your computer.
Export JSON: Generates a `.json` file for use in SignalRGB. All LEDs must be wired for the export to be valid.

About SRGB Component Builder

SRGB Component Builder is a web-based visual tool designed to simplify the creation of custom component .json files for the SignalRGB platform.

Built by José A. Miranda Vélez in the beautiful island of Puerto Rico, this project aims to provide an intuitive, grid-based interface for designers and enthusiasts to map out LEDs for their custom devices.

Version: 1.0
Project Home: View on GitHub
Related Tool: Effect Builder
Terms & Privacy: Terms of Usage | Privacy Policy

Credits & Technology

This tool is built using Firebase for cloud storage and authentication, and Bootstrap for the user interface.

Terms of Usage

By using this Interactive Effect Builder (the "Tool"), you agree to the following terms:

1. No Warranty

This Tool is provided "as-is", without any warranties of any kind, express or implied. The developer makes no guarantees regarding its functionality, reliability, or suitability for any particular purpose.

2. Limitation of Liability

In no event shall the developer be liable for any claim, damages, or other liability arising from the use of, or inability to use, the Tool.

3. User Responsibility

You are solely responsible for the effects you create and their use. It is your responsibility to ensure they comply with the terms of service of any platform or application they are used with, including SignalRGB.

4. Content Disclaimer

The developer is not responsible for any content, including effects, created or shared by users of this Tool. Some user-generated effects may be inappropriate or unsuitable for certain audiences. Use caution when sharing or loading effects from others.

5. License

This project is licensed under the GNU General Public License v3.0. You may copy, distribute and modify the software as long as you track changes/dates in source files and keep modifications under the same license. The software is provided "as is", without warranty of any kind. For the full license text, please see the official GNU GPLv3 page.

6. Public Content and Licensing

By saving or sharing an effect, you are making it public. You grant a perpetual, worldwide, non-exclusive, royalty-free license to other users and to this website to use, display, reproduce, and distribute your created effect. This allows features like the Community Gallery to function.

Privacy Policy

Last Updated: November 3, 2025

This Privacy Policy describes how we handle information in the SRGB Component Builder (the "Tool").

Information We Collect

Account Information: If you choose to sign in with Google, we collect your public profile information, including your name, photo, and unique user ID.
User-Generated Content: We collect the components you save to the cloud, which includes all configuration data, names, and descriptions you provide.
Browser Storage: The Tool uses your browser's `localStorage` to remember that you have accepted the Terms of Usage, so you are not prompted on every visit, and to save your progress until you save a component to the cloud.

How We Use Information

To associate your saved components with your user profile.
To display your public display name and profile photo next to your creations in the Community Gallery.
To operate and maintain the Tool and its features, such as the cloud-saving and sharing functionalities.

Information Sharing

Your saved components and your public display name are visible to other users when they browse the Community Gallery. We do not share or sell your personal information with third parties.

Your Rights

You have the right to delete your saved effects. This can be done from the "Community Gallery" section when you are signed in.

Terms & Privacy

By using this tool, you agree to the Terms of Usage and acknowledge our Privacy Policy.

Open Component

Type

Brand

LEDs

Share Component

Anyone with this link can view and fork this component. Your original component will not be affected.

Export Component

Export Format:

SignalRGB (Standard)

WLED (Matrix Map)

NollieRGB

Your component JSON preview:

{...}

Add LED Matrix

A grid of LEDs will be created at the center of your view.

Columns

Rows

Wiring Direction

Serpentine Wiring

If checked, wiring snakes back and forth. If unchecked, each line starts from the beginning.

Add LED Strip

LED Count

Orientation

Add LED Circle

LED Count

Radius (grid units)

Add L-Shape

Creates an L-shape with the corner at the bottom-left. Wiring runs top-to-bottom, then left-to-right.

Side A (Vertical)

Side B (Horizontal)

Add U-Shape

Wiring runs down Side A, across Side B, and up Side C.

Side A (Left)

Side B (Bottom)

Side C (Right)

Add LiLi Logo Shape

Based on the icon, this creates two vertical strips and one circle as three separate wiring circuits.

Strip LEDs

Circle LEDs

Circle Radius

Spacing

Add Hexagon

LEDs per Side

Add Triangle

LEDs per Side

Scale Selected LEDs

Scale the selection relative to its **geometric center**.

Scale Factor