Hacker News Reader

Comment by chungwu | Hacker News Reader

Plasmic isn't a one-time codegen tool, where you generate some code and then modify it to suit your needs. Instead, we've designed Plasmic code generation so that you can generate code, add some business logic, iterate on design, generate code again, without blowing anything away. You're never directly editing the code generated by Plasmic.

You can check out how it works (https://docs.plasmic.app/learn/codegen-guide/), but also happy to answer questions here!

View on HN

That's not really the question I was asking. Most WYSIWYG's that I've used in the past are built around the idea that you can use them over and over. I'm thinking of things like Wix and Squarespace or even all the way back to Microsoft Frontpage.

My question is more focused on the idea that at some point there will be something that I need to do that can't be done through the WYSIWYG editor. I'm wondering what happens in that use case. Can I open up VS code and start changing the underlying code myself? If so how does the tool maintain those changes through iterations and how maintainable is the code that Plasmic generates?

My concern comes from the fact that I've used some of these tools in the past and the code they spit out will have things like 8 levels of nested divs for no reason, empty tags, and inlined and !important styles all over the place. I'm not saying Plasmic will do that, but I'm wondering if anyone who has used this can say how good or bad the generated code actually is.

The main way to extend Plasmic is to use your own React code components. So if there's something you can't achieve with our editor, you can make a component that does it, and use it in the design. An alternative way is to use the Plasmic components that we generate, which expose a lot of hooks that lets you instrument the props and rendered content within the component, without having to edit the generated component code itself. It is our explicit goal that you never need to edit the Plasmic-generated code in order to extend it to do what you want.

As for the actually generated code, it basically maps to what you've created yourself in the studio. Plasmic does have a styling / element abstraction, but it's fairly low-level, and everything is pretty close to how you'd write a React component yourself. If you're not creating empty divs in the editor, you shouldn't see empty divs in the generated code :-)

You can also take a look here! https://github.com/plasmicapp/plasmic/tree/master/platform/w...

This is Plasmic-generated code that we ourselves use to build our visual editor.

> Instead, we've designed Plasmic code generation so that you can generate code, add some business logic, iterate on design, generate code again, without blowing anything away. You're never directly editing the code generated by Plasmic.

I think that actually amplifies the concern. Basically it's "don't touch the output," but what if we want/need to?

We wanted Plasmic to be the source of truth for certain things (the css, the composition, etc), so that it is possible to re-generate code from Plasmic and continue iterating on your designs (design-to-code is never a one-time thing!). We've designed the generated code to be very instrumentable; you can pass in prop overrides for any part of the component, swap out parts of the component with other content, etc., so you can get the component to do what you need, without having to edit the component code itself.

+1 to Chung's reply. There's also a loader API where you'll generally never need to see the code that is output. Check out the differences between loader API and codegen here: https://docs.plasmic.app/learn/loader-vs-codegen/

In case you still want to see the code from codegen, here's an example. We generate 3 files per page/component:

1. JS/TS: https://github.com/plasmicapp/plasmic/blob/master/platform/w...

2. CSS: https://github.com/plasmicapp/plasmic/blob/master/platform/w...

3. An entry point wrapper JS/TS file: https://github.com/plasmicapp/plasmic/blob/master/platform/w...

While 1 and 2 will be overwritten as you update your project in Plasmic (and therefore you should never modify it), the wrapper (3) is yours to customize as needed, like setting props or binding event handlers. In the above example, we computed how much free trial time a customer has. You can read more about the generated code here: https://docs.plasmic.app/learn/codegen-components/

Reply on news.ycombinator.com