Advice for building custom components with the studio sdk

[msencenb]

Hi team!

We are porting over our project to studio sdk and I'm currently working on migrating custom components. One thing I'm trying to get away from is custom html, which requires a custom stylesheet, and attempting to push all the logic into the editor itself.

For example, if I drop a basic 3 column and put image boxes in each one (e.g. for a very simple grid of images in our starter template to our customers) I can put the resulting html into a template and it seems to render pretty well:

                <div data-gjs-type="gridRow" draggable="true" class="gjs-grid-row">
                  <div data-gjs-highlightable="true" data-gjs-type="gridColumn" draggable="true" class="gjs-grid-column">
                    <div data-gjs-type="imageBox" draggable="true" class="gjs-image-box" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+');background-size:contain;background-position:center center;background-attachment:scroll;background-repeat:no-repeat;">
                    </div>
                  </div>
                  <div data-gjs-highlightable="true" data-gjs-type="gridColumn" draggable="true" class="gjs-grid-column">
                    <div data-gjs-type="imageBox" draggable="true" class="gjs-image-box" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+');background-size:contain;background-position:center center;background-attachment:scroll;background-repeat:no-repeat;">
                    </div>
                  </div>
                  <div data-gjs-highlightable="true" data-gjs-type="gridColumn" draggable="true" class="gjs-grid-column">
                    <div data-gjs-type="imageBox" draggable="true" class="gjs-image-box" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+');background-size:contain;background-position:center center;background-attachment:scroll;background-repeat:no-repeat;">
                    </div>
                  </div>
                </div>

Do you have any specific advice for writing components that play well with the Studio SDK basic layout, or layout plugins, so that I can give my users a great starting point but not mess them up with hidden styling?

Is simply playing with the editor and lifting out HTML after I've built something with grapesjs a good idea? Or is that API unstable and I'm actually better off writing custom css for my custom components to ensure future stability?

Thank you for your thoughts, the Studio SDK is phenomenal so far!