Template does not load using just components

I am trying to load an existing template. I believe that it should work with either components or HTML but it seems to work only through HTML. The following code does not work but code with the corresponding HTML does.
The LandingPage Json was taken from the dev toolbar panel

const LandingPage = {
        "html": null,
        "components": "[{'type':'text','attributes':{'id':'i0fq'},'components':[{'type':'textnode','removable':false,'draggable':false,'highlightable':0,'copyable':false,'selectable':true,'content':'Insert your text here','_innertext':false}]}]",
        "assets": "[]",
        "css": "* { box-sizing: border-box; } body {margin: 0;}#i0fq{padding:10px;}",
        "styles": "[{'selectors':['#i0fq'],'style':{'padding':'10px'}}]"
    }

    var editor = grapesjs.init({
        height: '100%',
        showOffsets: 1,
        noticeOnUnload: 0,
        container: '#gjs',
        fromElement: false,
        components: LandingPage.components ,
        // We might want to make the same check for styles
        style: LandingPage.style || LandingPage.css,
         storageManager: {
            autoload:true
        }

    });