Join the Webstudio community

Updated last year

hey people Talking about the source code

At a glance
hey people. Talking about the source code. Is there something that already serializes the build data into HTML or something? off: Is this the right channel to talk about that? Thanks
B
m
O
21 comments
Hey. We do not serialize directly into html but generate a react app consuming raw data. Remix do the rest of the job.
thanks @TrySound . I checked up the CLI code πŸ™‚
its the missing part for self-publishing right now
awesome. I'm experimenting the CLI locally. Looks promising
basically sync vs export
instead of one-time thing, we allow syncing continuously
could be on CI
but if I understand it right, I can't manually edit the generated code, right? It will not make a path way back to the database. Right?
that's correct, yes, basically you write your own components and you use the generated one as-is
yes. That what I understood from the source code when I saw that.
I'm starting to play with realtime source code syncing. Basically trying to convert the source code to the data schema and vice versa. I think the <Canvas /> has potential to live in a self hosted app and be displayed in the Webstudio view (like how the guys from Plasmic does it). Webstudio is already running remix in an iframe. So, with the react-sdk installed at the user's project, I think that the iframe could point to and external url and the CLI could sync the data schema with code and vice versa. Not much different from what CLI is doing now. But in a two way manner
I'm pretty excited to start contributing with WebStudio. It's insanely crazy how the tech stack of WebStudio is similar to my Descode project πŸ˜‚
yeah, in fact when I built the alpha version it worked this way already, but then we had to load all the data twice, in builder and on canvas and it became slow and also can be confusing if you have same data in diffeerent sources .... so we kinda shifted towards loading all data in builder and passing it down to canvas
I am not sure what the ideal solution here is, we need a smart idea how to enable both while not being confusing or slow
you do want a single source of truth for data I think
yes. I know it's not an easy feature to achieve. But maybe having a tool to convert source code to data schema and upload it to Webstudio can be promising. Realtime vs performance is always a challenge. But be capable to import and export projects would be an awesome start.

Imagine I have an existing Remix project an I want to import it to Webstudio. A webstudio import in the CLI would be awesome. And some extra metadata collected parsing the code as AST would be welcome to the data schema. So we can have webstudio export that uses this metadata to ensure that the output is a new snapshot over the original source. On Descode, I inject an data-descode-meta to every JSX element so it has some static info about the original element (like source code location extracted from the AST, original tag name, original static props, etc). And I notify the host (the Studio itself) with this static info, everytime a component is highlighted. So when a prop or style are changed in the Studio, the CLI, that's listening for changes, knows the exact start and end line and column for that element. So it changes just this part of the code
we have to find way to do this stuff without integrating it by default into cli for now
so that this can be a community project, not part of core cli
Add a reply
Sign up and join the conversation on Discord