JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<pre style={{ backgroundColor: '#f5f5f5', padding: '10px', borderRadius: '5px', overflowX: 'auto' }}>
            <code>"[{\"operationName\":\"getPersonalisations\",\"variables\":{},\"query\":\"query getPersonalisations {\\n  personalisations(components: [{reference: \\\"my-sky-tv.downgrade\\\"}, {reference: \\\"my_sky_tv.hero.cta\\\"}]) {\\n    reference\\n    experience\\n    __typename\\n  }\\n}\\n\"},{\"operationName\":\"getPersonalisations\",\"variables\":{\"reference_LOG\":\"my-sky-tv.recontract\"},\"query\":\"query getPersonalisations($reference_LOG: String!) {\\n  personalisations(components: [{reference: $reference_LOG}]) {\\n    reference\\n    experience\\n    __typename\\n  }\\n}\\n\"},{\"operationName\":\"experiments\",\"variables\":{\"project\":\"PACKAGE_MANAGEMENT\",\"experimentNames\":[\"pacman_experiment_reactive_recommendation_modal\"]},\"query\":\"query experiments($project: Project!, $experimentNames: [String!]!) {\\n  experimentation {\\n    experiments(input: {project: $project, experimentNames: $experimentNames}) {\\n      experimentName\\n      decision\\n      __typename\\n    }\\n    __typename\\n  }\\n}\\n\"},{\"operationName\":\"GetTvCatalogue\",\"variables\":{},\"query\":\"query GetTvCatalogue {\\n  sales {\\n    tvEntertainment: catalogue(context: BUY, filter: {catalogueName: \\\"pacman-tv-entertainment\\\"}) {\\n      products {\\n        reference\\n        owned\\n        addable\\n        removable\\n        inBasket\\n        inBasketActions\\n        impactedBy {\\n          reference\\n          action\\n          __typename\\n        }\\n        cost {\\n          currency\\n          recurring {\\n            price {\\n              main\\n              fractional\\n              __typename\\n            }\\n            undiscountedPrice {\\n              main\\n              fractional\\n              __typename\\n            }\\n            differentialBasketPrice {\\n              main\\n              fractional\\n       ...

JavaScript

var x = "[{\"operationName\":\"getPersonalisations\",\"variables\":{},\"query\":\"query getPersonalisations {\\n  personalisations(components: [{reference: \\\"my-sky-tv.downgrade\\\"}, {reference: \\\"my_sky_tv.hero.cta\\\"}]) {\\n    reference\\n    experience\\n    __typename\\n  }\\n}\\n\"},{\"operationName\":\"getPersonalisations\",\"variables\":{\"reference_LOG\":\"my-sky-tv.recontract\"},\"query\":\"query getPersonalisations($reference_LOG: String!) {\\n  personalisations(components: [{reference: $reference_LOG}]) {\\n    reference\\n    experience\\n    __typename\\n  }\\n}\\n\"},{\"operationName\":\"experiments\",\"variables\":{\"project\":\"PACKAGE_MANAGEMENT\",\"experimentNames\":[\"pacman_experiment_reactive_recommendation_modal\"]},\"query\":\"query experiments($project: Project!, $experimentNames: [String!]!) {\\n  experimentation {\\n    experiments(input: {project: $project, experimentNames: $experimentNames}) {\\n      experimentName\\n      decision\\n      __typename\\n    }\\n    __typename\\n  }\\n}\\n\"},{\"operationName\":\"GetTvCatalogue\",\"variables\":{},\"query\":\"query GetTvCatalogue {\\n  sales {\\n    tvEntertainment: catalogue(context: BUY, filter: {catalogueName: \\\"pacman-tv-entertainment\\\"}) {\\n      products {\\n        reference\\n        owned\\n        addable\\n        removable\\n        inBasket\\n        inBasketActions\\n        impactedBy {\\n          reference\\n          action\\n          __typename\\n        }\\n        cost {\\n          currency\\n          recurring {\\n            price {\\n              main\\n              fractional\\n              __typename\\n            }\\n            undiscountedPrice {\\n              main\\n              fractional\\n              __typename\\n            }\\n            differentialBasketPrice {\\n              main\\n              fractional\\n              negative\\n              __typename\\n            }\\n            __typename\\n          }\\n         ...