The community member is asking if there is a way to write to "Data Variables" using code in HTML Embed. They provide an example script that attempts to assign a value to a variable ${someArray}, but notes that this is not possible. The comments indicate that the community member's question has been answered, with one member confirming "Yes, thanks".
Is there some way to write to "Data Variables" via the code in HTML Embed?
Plain Text
# in HTML Embed
<script type="module">
# possible
const arr = ${someArray};
# not possible, is there a workaround?
${someArray} = JSON.stringify([1, 2, 3]);
</script>
(AI) Currently, it is not possible to write back to Webstudio data variables from within an HTML embed. The data flow is one-way - you can read data variables into your scripts, but cannot modify them directly. Here are the supported ways to work with data variables in HTML embeds:
You can read data by binding the entire HTML embed using backticks and accessing variables using ${} syntax
You can bind data to HTML attributes or data attributes and access them via JavaScript
You can create local JavaScript variables that receive values from Webstudio data variables
For example, to read a data variable into a JavaScript variable:
Plain Text
const value = ${whatever}
Or using data attributes:
Plain Text
const element = document.querySelector('.your-class')
element.getAttribute('your-attribute')
(AI) Currently, it is not possible to write back to Webstudio data variables from within an HTML embed. The data flow is one-way - you can read data variables into your scripts, but cannot modify them directly. Here are the supported ways to work with data variables in HTML embeds:
You can read data by binding the entire HTML embed using backticks and accessing variables using ${} syntax
You can bind data to HTML attributes or data attributes and access them via JavaScript
You can create local JavaScript variables that receive values from Webstudio data variables
For example, to read a data variable into a JavaScript variable:
Plain Text
const value = ${whatever}
Or using data attributes:
Plain Text
const element = document.querySelector('.your-class')
element.getAttribute('your-attribute')
","answerCount":5,"upvoteCount":0,"datePublished":"2025-01-11T12:04:22.459Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/16892a67-b7ce-444b-99cf-bed978ed92f5","name":"kvi","identifier":"16892a67-b7ce-444b-99cf-bed978ed92f5","image":"https://cdn.discordapp.com/avatars/1191452050152751204/c864368a309bbae4fe7a14f9f20f26d2.webp?size=256"},"acceptedAnswer":{"@type":"Answer","text":"(AI) Currently, it is not possible to write back to Webstudio data variables from within an HTML embed. The data flow is one-way - you can read data variables into your scripts, but cannot modify them directly. Here are the supported ways to work with data variables in HTML embeds:You can read data by binding the entire HTML embed using backticks and accessing variables using ${} syntaxYou can bind data to HTML attributes or data attributes and access them via JavaScriptYou can create local JavaScript variables that receive values from Webstudio data variablesFor example, to read a data variable into a JavaScript variable:const value = ${whatever}Or using data attributes:const element = document.querySelector('.your-class')\nelement.getAttribute('your-attribute')","upvoteCount":0,"dateCreated":"2025-01-11T16:24:38.907Z","datePublished":"2025-01-11T16:24:38.907Z","dateModified":"2025-01-11T16:26:50.239Z","url":"https://help.webstudio.is/write-to-data-variables-in-html-embed-qF3stsKNHmZn#214e23d2-6f70-4a43-ad1d-3499b6d6bf18","author":{"@type":"Person","url":"https://help.webstudio.is/members/16892a67-b7ce-444b-99cf-bed978ed92f5","name":"kvi","identifier":"16892a67-b7ce-444b-99cf-bed978ed92f5","image":"https://cdn.discordapp.com/avatars/1191452050152751204/c864368a309bbae4fe7a14f9f20f26d2.webp?size=256"}},"suggestedAnswer":[{"@type":"Answer","text":"seems like AI has answered your question?","upvoteCount":0,"dateCreated":"2025-01-11T12:06:38.336Z","datePublished":"2025-01-11T12:06:38.336Z","dateModified":"2025-01-11T12:06:38.336Z","url":"https://help.webstudio.is/write-to-data-variables-in-html-embed-qF3stsKNHmZn#9ff154d2-e4e1-4331-8c4d-d95cf195675c","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"}},{"@type":"Answer","text":"Yes, thanks","upvoteCount":0,"dateCreated":"2025-01-11T14:49:57.166Z","datePublished":"2025-01-11T14:49:57.166Z","dateModified":"2025-01-11T14:49:57.166Z","url":"https://help.webstudio.is/write-to-data-variables-in-html-embed-qF3stsKNHmZn#cb89a32a-45b5-4fa5-b5d1-e19aafef889a","author":{"@type":"Person","url":"https://help.webstudio.is/members/16892a67-b7ce-444b-99cf-bed978ed92f5","name":"kvi","identifier":"16892a67-b7ce-444b-99cf-bed978ed92f5","image":"https://cdn.discordapp.com/avatars/1191452050152751204/c864368a309bbae4fe7a14f9f20f26d2.webp?size=256"}},{"@type":"Answer","text":"What is the answer? I've clicked on \"view answer\" and \"ask AI\" and they link to this help page where there isn't an answer.","upvoteCount":0,"dateCreated":"2025-01-11T16:09:00.322Z","datePublished":"2025-01-11T16:09:00.322Z","dateModified":"2025-01-11T16:09:00.632Z","url":"https://help.webstudio.is/write-to-data-variables-in-html-embed-qF3stsKNHmZn#1e53efae-97be-405c-97b8-8173ae9e9706","author":{"@type":"Person","url":"https://help.webstudio.is/members/6c66325d-fff8-43a2-b97e-549275813461","name":"Jeremy","identifier":"6c66325d-fff8-43a2-b97e-549275813461","image":"https://cdn.discordapp.com/avatars/383871071566430208/6de448190b31c7a9af49e5fbd4f5d047.webp?size=256"}},{"@type":"Answer","text":"Thank you!","upvoteCount":0,"dateCreated":"2025-01-11T16:31:36.576Z","datePublished":"2025-01-11T16:31:36.576Z","dateModified":"2025-01-11T16:31:36.576Z","url":"https://help.webstudio.is/write-to-data-variables-in-html-embed-qF3stsKNHmZn#12c64698-2b18-40e4-9ba7-adf87af2b4f0","author":{"@type":"Person","url":"https://help.webstudio.is/members/6c66325d-fff8-43a2-b97e-549275813461","name":"Jeremy","identifier":"6c66325d-fff8-43a2-b97e-549275813461","image":"https://cdn.discordapp.com/avatars/383871071566430208/6de448190b31c7a9af49e5fbd4f5d047.webp?size=256"}}]}}
