Join the Webstudio community

Updated 2 months ago

Setting a webstudio variable with javascript

At a glance

The community member is asking if it is possible to set a Webstudio variable with JavaScript, as they have JSON data that needs further processing before it can be used in a Collection. The comments suggest that there have been discussions about having an API or event system to handle this, and that expression editor advancements may be able to solve the issue. The community member explains that they want to set up a page table of contents as nested lists, and they have a Typesense docsearch that returns a flat array of heading elements, which they need to loop through to produce nested arrays to use in a Collection. The comments indicate that currently this needs to be done on the backend, and that the ability to run arbitrary JavaScript server-side to map data would be a "backend for frontend" (bff) solution.

Sorry if this has been asked before, didn't find anything: Is it possible (or will it be possible) to set a Webstudio variable with javascript? In my case, I have JSON fetched from a resource that needs further processing before I can use it for a Collection.
J
p
O
10 comments
There have been discussions for having some sort of api or some event system IIRC. Curious what type of processing you want to do? Maybe expression editor advancements could solve it
Cool to hear. I want to set up a page TOC as nested lists, and while there are client-side methods, I thought I'd like to do it as a Resource so that I can manage the styling etc with Webstudio.

While working on that, I realized I already have Typesense docsearch (similar to Algolia), which scrapes the site for full site search.

I can query Typesense API to return JSON with a flat array of elements on a given page, and in that flat array, there are nodes like:

Plain Text
    "document": {
      "anchor": "heading-2-title",
      "hierarchy": {
        "lvl0": "Heading 1 Title",
        "lvl1": "Heading 2 Title",
        "lvl2": null,
        "lvl3": null,
        "lvl4": null,
        "lvl5": null,
        "lvl6": null
      },
...


which refers to the <h2> in:

Plain Text
<h1 id="heading-1-title">Heading 1 Title</h1>
some text....
<h2 id="heading-2-title">Heading 2 Title</h2>
some more text...


So the info about the heading hierarchies is there, but it's all in one flat array of every heading, no matter h1, h2, h3 etc. So I need to loop through it and produce nested arrays, which then I wanted to provide as a variable to a Collection within a List (or nested collections within lists, or something...)
hope that makes sense!
Currently backend needs to do it, yes
but not yet possible within Webstudio?
It seems like for now I'd need to set up a cloudflare worker or something to produce the nested array from Typescript's JSON and have Webstudio fetch that, but that's extra overhead
Well any backend, if you think about it that's their task
When we add ability to run arbitrary js server side to map data, it's kinda a bff
Is there a github issue to follow for this? Also, what do you mean by bff?
Backend for frontend
Add a reply
Sign up and join the conversation on Discord