{"_id":"@amplience/dc-integration-stylitics","_rev":"10-28092e76f76c74d3cc1194a624641c41","name":"@amplience/dc-integration-stylitics","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"@amplience/dc-integration-stylitics","version":"0.1.0","author":"","license":"Apache-2.0","_id":"@amplience/dc-integration-stylitics@0.1.0","maintainers":[{"name":"rezakalfane","email":"reza.kalfane@gmail.com"},{"name":"rs-amp","email":"rsimpson@amplience.com"},{"name":"techiedarren","email":"npm@dmlee.me"},{"name":"srweeks","email":"sweeks@amplience.com"},{"name":"amplience-admin","email":"operations@amplience.com"},{"name":"petercoulton-human","email":"petercoulton@gmail.com"},{"name":"easen-amp","email":"measen@amplience.com"},{"name":"ccorbett","email":"ccorbett@amplience.com"},{"name":"liliiamykhailova","email":"lmykhailova@amplience.com"},{"name":"gbrown-amp","email":"gbrown@amplience.com"},{"name":"nsmith-amp","email":"nsmith@amplience.com"},{"name":"amp-automation","email":"opssupport@amplience.com"}],"dist":{"shasum":"30984dd79c0bfcd0f34d0bae867d9b63322bb350","tarball":"https://registry.npmjs.org/@amplience/dc-integration-stylitics/-/dc-integration-stylitics-0.1.0.tgz","fileCount":88,"integrity":"sha512-hiiF9EIhBW64DypJTMq/Vx/ZgkXHA9UXEZVDCRBHGcwGcz5Ja06byD6JhFKXwgeOd4TWq12FR05DA/LnPvEwAA==","signatures":[{"sig":"MEUCIGm0fDkNhbBkAIR6co2AsspqDBzE0eZM5LFUwQ5n/rTEAiEAnUksJ6shN7Zk6JkM2DnUSqPbJzEO4nqpAD64xYHMMos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":851311},"main":"build/main/index.js","types":"build/main/index.d.ts","module":"build/module/index.js","gitHead":"8dc4b9979cfe45aab5cb2ca83a10fe44b273e96f","scripts":{"lint":"eslint","test":"jest --silent --verbose","build":"run-s clean && run-s build-ts && run-s build-dist","clean":"rimraf build && rimraf dist","import":"ts-node scripts/amplience/index.ts import","prepack":"npm ci && npm run build","prepare":"eslint && npm run clean && tsc","build-ts":"eslint && run-p build-ts:*","build-dist":"run-p build-dist:*","build-ts:main":"tsc -p tsconfig.json","version:major":"standard-version --release-as major","version:minor":"standard-version --release-as minor","version:patch":"standard-version --release-as patch","build-dist:dev":"NODE_ENV=development webpack","build-dist:prod":"NODE_ENV=production webpack","build-ts:module":"tsc -p tsconfig.module.json","prepare-major-release":"run-s build version:major","prepare-minor-release":"run-s build version:minor","prepare-patch-release":"run-s build version:patch"},"typings":"build/main/index.d.ts","_npmUser":{"name":"amp-automation","email":"opssupport@amplience.com"},"_npmVersion":"9.6.7","description":"Library of utilities to make using Amplience and Stylitics together simpler.","directories":{},"_nodeVersion":"18.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","axios":"^0.27.2","eslint":"^8.45.0","lodash":"^4.17.21","nanoid":"^3.3.4","rimraf":"^5.0.1","core-js":"^3.31.1","ts-jest":"^29.1.1","ts-node":"^10.9.1","webpack":"^5.88.2","typescript":"^5.1.6","@babel/core":"^7.22.9","@types/jest":"^29.5.3","npm-run-all":"^4.1.5","ts-node-dev":"^2.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/polyfill":"^7.12.1","standard-version":"^9.5.0","@amplience/dc-cli":"^0.19.0","@babel/preset-env":"^7.22.9","dc-management-sdk-js":"^1.17.1","@typescript-eslint/parser":"^6.1.0","@typescript-eslint/eslint-plugin":"^6.1.0"},"_npmOperationalInternal":{"tmp":"tmp/dc-integration-stylitics_0.1.0_1690910600274_0.3348723467868484","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@amplience/dc-integration-stylitics","version":"0.1.1","author":"","license":"Apache-2.0","_id":"@amplience/dc-integration-stylitics@0.1.1","maintainers":[{"name":"rezakalfane","email":"reza.kalfane@gmail.com"},{"name":"rs-amp","email":"rsimpson@amplience.com"},{"name":"techiedarren","email":"npm@dmlee.me"},{"name":"srweeks","email":"sweeks@amplience.com"},{"name":"amplience-admin","email":"operations@amplience.com"},{"name":"petercoulton-human","email":"petercoulton@gmail.com"},{"name":"easen-amp","email":"measen@amplience.com"},{"name":"ccorbett","email":"ccorbett@amplience.com"},{"name":"liliiamykhailova","email":"lmykhailova@amplience.com"},{"name":"gbrown-amp","email":"gbrown@amplience.com"},{"name":"nsmith-amp","email":"nsmith@amplience.com"},{"name":"amp-automation","email":"opssupport@amplience.com"}],"dist":{"shasum":"a973d9122bc2dea991b478ec04abd2da228614d6","tarball":"https://registry.npmjs.org/@amplience/dc-integration-stylitics/-/dc-integration-stylitics-0.1.1.tgz","fileCount":104,"integrity":"sha512-Pu0p1Aw0FScgxb1y82LBT1+X7LYhbz4UNKjV95s7vmJSG8LDRZSKw+jzS+fOEkk2BqDTluAKcGXBuIMLLdHMRQ==","signatures":[{"sig":"MEUCIHwlVsvXkywuvIisa/txwB9iHPltNV6dwf346/Hly1cDAiEA3EIcI0OBdAA8PXLWmCk1KTcS+i6ix1JAnhWNiIaX0G0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":868558},"main":"build/main/index.js","types":"build/main/index.d.ts","module":"build/module/index.js","gitHead":"d7f4c9c36d3af8c78d817cbafb8fb857374f4a0f","scripts":{"lint":"eslint","test":"jest --silent --verbose","build":"run-s clean && run-s build-ts && run-s build-dist","clean":"rimraf build && rimraf dist","import":"ts-node scripts/amplience/index.ts import","prepack":"npm ci && npm run build","prepare":"eslint && npm run clean && npm run build","build-ts":"eslint && run-p build-ts:*","build-dist":"run-p build-dist:*","build-ts:main":"tsc -p tsconfig.json","version:major":"standard-version --release-as major","version:minor":"standard-version --release-as minor","version:patch":"standard-version --release-as patch","build-dist:dev":"NODE_ENV=development webpack","build-dist:prod":"NODE_ENV=production webpack","build-ts:module":"tsc -p tsconfig.module.json","prepare-major-release":"run-s build version:major","prepare-minor-release":"run-s build version:minor","prepare-patch-release":"run-s build version:patch"},"typings":"build/main/index.d.ts","_npmUser":{"name":"amp-automation","email":"opssupport@amplience.com"},"_npmVersion":"9.6.7","description":"Library of utilities to make using Amplience and Stylitics together simpler.","directories":{},"_nodeVersion":"18.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","axios":"^0.27.2","eslint":"^8.45.0","lodash":"^4.17.21","nanoid":"^3.3.4","rimraf":"^5.0.1","core-js":"^3.31.1","ts-jest":"^29.1.1","ts-node":"^10.9.1","webpack":"^5.88.2","typescript":"^5.1.6","@babel/core":"^7.22.9","@types/jest":"^29.5.3","npm-run-all":"^4.1.5","ts-node-dev":"^2.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/polyfill":"^7.12.1","standard-version":"^9.5.0","@amplience/dc-cli":"^0.19.0","@babel/preset-env":"^7.22.9","dc-management-sdk-js":"^1.17.1","@typescript-eslint/parser":"^6.1.0","@typescript-eslint/eslint-plugin":"^6.1.0"},"_npmOperationalInternal":{"tmp":"tmp/dc-integration-stylitics_0.1.1_1690967944347_0.33133623895621733","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@amplience/dc-integration-stylitics","version":"0.1.2","author":"","license":"Apache-2.0","_id":"@amplience/dc-integration-stylitics@0.1.2","maintainers":[{"name":"rezakalfane","email":"reza.kalfane@gmail.com"},{"name":"rs-amp","email":"rsimpson@amplience.com"},{"name":"techiedarren","email":"npm@dmlee.me"},{"name":"srweeks","email":"sweeks@amplience.com"},{"name":"amplience-admin","email":"operations@amplience.com"},{"name":"petercoulton-human","email":"petercoulton@gmail.com"},{"name":"easen-amp","email":"measen@amplience.com"},{"name":"ccorbett","email":"ccorbett@amplience.com"},{"name":"liliiamykhailova","email":"lmykhailova@amplience.com"},{"name":"gbrown-amp","email":"gbrown@amplience.com"},{"name":"nsmith-amp","email":"nsmith@amplience.com"},{"name":"amp-automation","email":"opssupport@amplience.com"}],"dist":{"shasum":"7e470e408aa49e6ced7871818230c04fb8887a88","tarball":"https://registry.npmjs.org/@amplience/dc-integration-stylitics/-/dc-integration-stylitics-0.1.2.tgz","fileCount":111,"integrity":"sha512-enlz8nGRR4WyxL9Iz0z23KJo1cS/+C8zInl5dlyn2SP2uidyOPRzhdg/AxNB9M5Xq8Y9QXw0dIFrZovjIOg15A==","signatures":[{"sig":"MEUCIQDY+PRkT3XTv7S0Cjj7b6KLonkwiNOZeSIEni/5z7GwKQIgWtkCQd/5h1KwmoNdJ92eNpwa0lefuIer6TJEI9fmAXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1764204},"main":"build/main/index.js","types":"build/main/index.d.ts","module":"build/module/index.js","gitHead":"e8d96b99c2aa22f40e602d21785609f5f14dbdde","scripts":{"lint":"eslint","test":"jest --silent --verbose","build":"run-s clean && run-s build-ts && run-s build-dist","clean":"rimraf build && rimraf dist","import":"ts-node scripts/amplience/index.ts import","prepack":"npm ci && npm run build","prepare":"eslint && npm run clean && npm run build","build-ts":"eslint && run-p build-ts:*","build-dist":"run-p build-dist:*","build-ts:main":"tsc -p tsconfig.json","version:major":"standard-version --release-as major","version:minor":"standard-version --release-as minor","version:patch":"standard-version --release-as patch","build-dist:dev":"NODE_ENV=development webpack","build-dist:prod":"NODE_ENV=production webpack","build-ts:module":"tsc -p tsconfig.module.json","prepare-major-release":"run-s build version:major","prepare-minor-release":"run-s build version:minor","prepare-patch-release":"run-s build version:patch"},"typings":"build/main/index.d.ts","_npmUser":{"name":"amp-automation","email":"opssupport@amplience.com"},"_npmVersion":"9.6.7","description":"Library of utilities to make using Amplience and Stylitics together simpler.","directories":{},"_nodeVersion":"18.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","axios":"^0.27.2","eslint":"^8.45.0","lodash":"^4.17.21","nanoid":"^3.3.4","rimraf":"^5.0.1","core-js":"^3.31.1","ts-jest":"^29.1.1","ts-node":"^10.9.1","webpack":"^5.88.2","typescript":"^5.1.6","@babel/core":"^7.22.9","@types/jest":"^29.5.3","npm-run-all":"^4.1.5","ts-node-dev":"^2.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/polyfill":"^7.12.1","standard-version":"^9.5.0","@amplience/dc-cli":"^0.19.0","@babel/preset-env":"^7.22.9","dc-management-sdk-js":"^1.17.1","@typescript-eslint/parser":"^6.1.0","@typescript-eslint/eslint-plugin":"^6.1.0"},"_npmOperationalInternal":{"tmp":"tmp/dc-integration-stylitics_0.1.2_1690977304131_0.789277193276767","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@amplience/dc-integration-stylitics","version":"0.2.0","author":"","license":"Apache-2.0","_id":"@amplience/dc-integration-stylitics@0.2.0","maintainers":[{"name":"rezakalfane","email":"reza.kalfane@gmail.com"},{"name":"rs-amp","email":"rsimpson@amplience.com"},{"name":"techiedarren","email":"npm@dmlee.me"},{"name":"srweeks","email":"sweeks@amplience.com"},{"name":"amplience-admin","email":"operations@amplience.com"},{"name":"petercoulton-human","email":"petercoulton@gmail.com"},{"name":"easen-amp","email":"measen@amplience.com"},{"name":"ccorbett","email":"ccorbett@amplience.com"},{"name":"liliiamykhailova","email":"lmykhailova@amplience.com"},{"name":"gbrown-amp","email":"gbrown@amplience.com"},{"name":"nsmith-amp","email":"nsmith@amplience.com"},{"name":"amp-automation","email":"opssupport@amplience.com"}],"dist":{"shasum":"7808a7558f7d62cd2672dc3e902c770d16963c90","tarball":"https://registry.npmjs.org/@amplience/dc-integration-stylitics/-/dc-integration-stylitics-0.2.0.tgz","fileCount":113,"integrity":"sha512-/JAhmcvf5hCHMYjgrZYxZS0Hn6UfqcSdXWRW8eGAVmzaEAX0RbeC+rHf6GAsQLfAmZ86jMkTPrA8wgckLC9cZw==","signatures":[{"sig":"MEYCIQDytaZ4fBpi3+BqFz1fc1ynmmrQCuvZ8Ae5d0MJOkxBxgIhAKTAj5rJ2fL4XvkvdEY26crf6ulRD5eOZhiL/Oqb520Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1791119},"main":"build/main/index.js","types":"build/main/index.d.ts","module":"build/module/index.js","gitHead":"982c4c732b328663c1ab8118b128ac17b5074fed","scripts":{"lint":"eslint","test":"jest --silent --verbose","build":"run-s clean && run-s build-ts && run-s build-dist","clean":"rimraf build && rimraf dist","import":"ts-node scripts/amplience/index.ts import","prepack":"npm ci && npm run build","prepare":"eslint && npm run clean && npm run build","build-ts":"eslint && run-p build-ts:*","build-dist":"run-p build-dist:*","build-ts:main":"tsc -p tsconfig.json","version:major":"standard-version --release-as major","version:minor":"standard-version --release-as minor","version:patch":"standard-version --release-as patch","build-dist:dev":"NODE_ENV=development webpack","build-dist:prod":"NODE_ENV=production webpack","build-ts:module":"tsc -p tsconfig.module.json","prepare-major-release":"run-s build version:major","prepare-minor-release":"run-s build version:minor","prepare-patch-release":"run-s build version:patch"},"typings":"build/main/index.d.ts","_npmUser":{"name":"amp-automation","email":"opssupport@amplience.com"},"_npmVersion":"9.6.7","description":"Library of utilities to make using Amplience and Stylitics together simpler.","directories":{},"_nodeVersion":"18.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","axios":"^0.27.2","eslint":"^8.45.0","lodash":"^4.17.21","nanoid":"^3.3.4","rimraf":"^5.0.1","core-js":"^3.31.1","ts-jest":"^29.1.1","ts-node":"^10.9.1","webpack":"^5.88.2","typescript":"^5.1.6","@babel/core":"^7.22.9","@types/jest":"^29.5.3","npm-run-all":"^4.1.5","ts-node-dev":"^2.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/polyfill":"^7.12.1","standard-version":"^9.5.0","@amplience/dc-cli":"^0.19.0","@babel/preset-env":"^7.22.9","dc-management-sdk-js":"^1.17.1","@typescript-eslint/parser":"^6.1.0","@typescript-eslint/eslint-plugin":"^6.1.0"},"_npmOperationalInternal":{"tmp":"tmp/dc-integration-stylitics_0.2.0_1691766268583_0.05749596173882021","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@amplience/dc-integration-stylitics","version":"1.0.0","author":"","license":"Apache-2.0","_id":"@amplience/dc-integration-stylitics@1.0.0","maintainers":[{"name":"rezakalfane","email":"reza.kalfane@gmail.com"},{"name":"rs-amp","email":"rsimpson@amplience.com"},{"name":"techiedarren","email":"npm@dmlee.me"},{"name":"srweeks","email":"sweeks@amplience.com"},{"name":"amplience-admin","email":"operations@amplience.com"},{"name":"petercoulton-human","email":"petercoulton@gmail.com"},{"name":"easen-amp","email":"measen@amplience.com"},{"name":"ccorbett","email":"ccorbett@amplience.com"},{"name":"liliiamykhailova","email":"lmykhailova@amplience.com"},{"name":"gbrown-amp","email":"gbrown@amplience.com"},{"name":"nsmith-amp","email":"nsmith@amplience.com"},{"name":"amp-automation","email":"opssupport@amplience.com"}],"dist":{"shasum":"2fef017f1ecb9694b8bbdc3cd6d35b3e2ac61536","tarball":"https://registry.npmjs.org/@amplience/dc-integration-stylitics/-/dc-integration-stylitics-1.0.0.tgz","fileCount":121,"integrity":"sha512-S4JExJeiMoQsxJwmN1PSP4PSQ2ik4TCnbvRChgFzzRe8NVm6E/FY4jdZCBVs2nyFO8JzkjuSAsut6orvpfITeA==","signatures":[{"sig":"MEUCIHi8C3C3lSgSdQ/OaMoU12KOuhfrhIpPLa3kuSKgju6/AiEA/gvVdwrGAz+imylCDlAxF6UP89m5TBnlMzNg8tGpnvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3070479},"main":"build/main/index.js","types":"build/main/index.d.ts","module":"build/module/index.js","gitHead":"6ebe6fc774b4f95e3cfd92c46edb68e40fdf38a2","scripts":{"lint":"eslint","test":"jest --silent --verbose","build":"run-s clean && run-s build-ts && run-s build-dist","clean":"rimraf build && rimraf dist","import":"ts-node scripts/amplience/index.ts import","prepack":"npm ci && npm run build","prepare":"eslint && npm run clean && npm run build","build-ts":"eslint && run-p build-ts:*","build-dist":"run-p build-dist:*","build-ts:main":"tsc -p tsconfig.json","version:major":"standard-version --release-as major","version:minor":"standard-version --release-as minor","version:patch":"standard-version --release-as patch","build-dist:dev":"NODE_ENV=development webpack","build-dist:prod":"NODE_ENV=production webpack","build-ts:module":"tsc -p tsconfig.module.json","prepare-major-release":"run-s build version:major","prepare-minor-release":"run-s build version:minor","prepare-patch-release":"run-s build version:patch"},"typings":"build/main/index.d.ts","_npmUser":{"name":"amp-automation","email":"opssupport@amplience.com"},"_npmVersion":"9.6.7","description":"Library of utilities to make using Amplience and Stylitics together simpler.","directories":{},"_nodeVersion":"18.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.1","axios":"^0.27.2","eslint":"^8.45.0","lodash":"^4.17.21","nanoid":"^3.3.4","rimraf":"^5.0.1","core-js":"^3.31.1","ts-jest":"^29.1.1","ts-node":"^10.9.1","webpack":"^5.88.2","typescript":"^5.1.6","@babel/core":"^7.22.9","@types/jest":"^29.5.3","npm-run-all":"^4.1.5","ts-node-dev":"^2.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/polyfill":"^7.12.1","standard-version":"^9.5.0","@amplience/dc-cli":"^0.19.0","@babel/preset-env":"^7.22.9","dc-management-sdk-js":"^1.17.1","@typescript-eslint/parser":"^6.1.0","@typescript-eslint/eslint-plugin":"^6.1.0"},"_npmOperationalInternal":{"tmp":"tmp/dc-integration-stylitics_1.0.0_1692180665482_0.10424758958073466","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-08-01T17:23:20.201Z","modified":"2025-06-16T11:31:16.539Z","0.1.0":"2023-08-01T17:23:20.562Z","0.1.1":"2023-08-02T09:19:04.552Z","0.1.2":"2023-08-02T11:55:04.408Z","0.2.0":"2023-08-11T15:04:28.873Z","1.0.0":"2023-08-16T10:11:05.710Z"},"license":"Apache-2.0","description":"Library of utilities to make using Amplience and Stylitics together simpler.","maintainers":[{"email":"operations@amplience.com","name":"amplience-admin"},{"email":"petercoulton@gmail.com","name":"petercoulton-human"},{"email":"measen@amplience.com","name":"easen-amp"},{"email":"ccorbett@amplience.com","name":"ccorbett"},{"email":"gbrown@amplience.com","name":"gbrown-amp"},{"email":"nsmith@amplience.com","name":"nsmith-amp"},{"email":"opssupport@amplience.com","name":"amp-automation"},{"email":"sweeks@amplience.com","name":"srweeks"},{"email":"npm@dmlee.me","name":"techiedarren"},{"email":"rsimpson@amplience.com","name":"rs-amp"},{"email":"amp-adm-srv-npm@amplience.com","name":"amp-adm-srv-npm"},{"email":"gnewsome@amplience.com","name":"gnewso"},{"email":"lkcheung@amplience.com","name":"labski42"}],"readme":"# @amplience/dc-integration-stylitics\n\n![Stylitics Widgets)](./docs/media/stylitics-main.png)\n\nA library for managing Stylitics Widgets within modern web frameworks, configuring them with content items from Amplience, as well as a collection of Content Types and Schemas you can install to make integrating Stylitics with Amplience considerably easier.\n\n## ⚙️ Features\n- Convert Content Item into Stylitics arguments\n- Automatically create Stylitics Widgets\n- Import Schemas, Content Types, sample Content Items into a Dynamic Content hub\n- Use provided Templates for Content Rendering Service visualisation and cards\n\n## 🏁 Quickstart\n\nUsing the Stylitics integration library requires a simple import from NPM or linking a prebuilt js file.\n\nOnce imported, the following two methods can be used:\n\n- `fromContentItem`: Convert from a content item containing Stylitics widget configuration into arguments you can provide to create the widget.\n- `createWidget`: Create a Stylitics widget with a given set of arguments, including view type and account. Automatically loads necessary scripts for the view type asynchronously, and keeps them loaded for future requests.\n\nThese can be used regardless of implementation type (NodeJS project, Simple HTML/JS/CSS project or even using the Amplience Content Rendering Service)\n\nThe examples below show how you would use in each implementation type. We would recommend using the [Amplience DC Delivery SDK](https://github.com/amplience/dc-delivery-sdk-js) to fetch your content\n\n### NodeJS Usage Example\n\nInstall the package from NPM:\n\n`npm i @amplience/dc-integration-stylitics`\n\nYou can use it in your project as follows:\n\n```typescript\nimport { fromContentItem, createWidget } from '@amplience/dc-integration-stylitics';\n\n// Fetch from DC, in the format found in the automation.\nconst contentItem = {\n    ...\n}\n\nconst element = document.getElementById('widget');\n\nconst args = fromContentItem(contentItem);\nconst widget = await createWidget(element, args);\n\nwidget.start();\n```\n\nSimilar to using the Stylitics widget manually, you can set overrides before starting the widget, refresh it with new arguments, or `destroy()` it when finished.\n\n### Usage HTML / JavaScript / CSS\nFor projects that don't use node, you can import a pre-packaged script that places the module in the global scope as `ampStylitics`:\n\n```html\n<script src=\"https://unpkg.com/@amplience/dc-integration-stylitics/dist/ampStylitics.browser.umd.min.js\"></script>\n\n<div id=\"widget\"></div>\n\n<script>\n    // Fetch from DC, in the format found in the automation.\n    const contentItem = {\n        ...\n    }\n\n    const element = document.getElementById('widget');\n\n    const args = ampStylitics.fromContentItem(contentItem);\n    ampStylitics.createWidget(element, args).then(\n        widget => widget.start()\n    );\n</script>\n```\n\n#### Example\n\nIn the `/examples` folder you will see an implementation with the following files that includes fetching an item, instantiating the widget and support for real-time visualisation:\n\nHTML Example: `examples/stylitics-generic-html.html`\n\nJavaScript used to fetch content / visualisation: `examples/stylitics-widget.js`\n\n\n## 🌍 Useful Links\n- [Automation](./docs/automation.md)\n- [Developing and Building Locally](./docs/developing+building+locally.md)\n- [FAQ](./docs/faq.md)\n- [Changelog](./CHANGELOG.md) \n- [Contributing](./CONTRIBUTING.md)\n- [Support](./support.md)\n- [Licensing](./LICENSE)\n","readmeFilename":"README.md"}