How to load a component using json same as we load a project/page?

[FaisalShaikhHA]

For loading the project, we use editor.loadData(pageJson/projectJson) and everything is loaded properly, but what if we want to save a component (editable-area) along with its child components, child component styles, etc., and then load back it again (editable-area) with all the details.
I have tried the below code to save editable component JSON and load it back.

// save
let editableComponent = editor.getWrapper().findType("editable")[0];
let editableJson = editableComponent.components();
// returns css
let CSS = editor.getCss({component: editableComponent, onlyMatched: true});

// load
editableComponent.components(editableJson);
editor.addStyle(CSS);

My custom components have component-related styles defined and on each save it gets duplicated because the editor loads components styles first and then I load saved CSS using editor.addStyle.
So is there a proper way to achieve this?

[artf]

editor loads components styles first and then I load saved CSS using editor.addStyle

I'm not sure how you structured your save logic as it sounds like you're loading stuff twice. Anyway, instead of editor.addStyle try to use editor.Css.addRules API