Join the Webstudio community

Updated 4 weeks ago

Setting a webstudio variable with javascript

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