Components are tough to edit

[SuddenDevelopment]

I love the concept, got it all setup and started editing.

I found a block I mostly liked but I wanted to remove a button in it, I couldn't

when I went to craft.js it seemed to be able to edit everything, remove a button no problem.

it also has a "customize" area with layers I can;t seem to access in destack.

am I doing something wrong to not see these features?

[LiveDuo]

Thanks! You are not doing anything wrong.

Although Craft.js has an example with some styling this library is different. The reason is that the library has hundreds of components that I couldn't add custom style editors for.

Although this is currently very hard to do, there's an ongoing migration to v3 https://github.com/LiveDuo/destack/issues/104. This major update moves the library away from Craft.js and into a new vanilla HTML editor. The new editor will let you just edit the HTML as the use case you described.

You can use it right now here but note that there are multiple bugs in the editor that haven't been fixed yet.

[LiveDuo]

@SuddenDevelopment The next major update v3 is out now and uses HTML as the templating language. That means if there's a button or anything else you want to change you can either change it in your browser DevTools or edit the template directly.

[Immortalin]

@LiveDuo you might want to take a look at Puck, their editor is very good but they lack templates.

[LiveDuo]

@Immortalin A react based editor like Puck is something that has been tried before in v2. It comes with multiple complexities such as having to convert the HTML based component to react components and the increment in the bundle size. See https://github.com/LiveDuo/destack/issues/104 for more details.

The current alternative which is HTML based is better in a lot of different facets and allows to edit the HTML either by hand or using the browser DevTools.

[Immortalin]

The current editor's drag and drop user experience has a lot of room for improvement compared to Puck though

[LiveDuo]

The popular browsers like Chrome, Safari and Firefox already have this functionality in DevTools and is a very flexible today to edit CSS styles or HTML. I highly suggest you try it out.

[chrisvxd]

Puck maintainer here! Just stumbled across this, nice work.

FWIW, I think you could probably create a compatibility layer for the HTML -> React components, without to rewrite all the components. However, appreciate that it is indeed additional complexity.

On-hand if you need any input :)

[LiveDuo]

Hey @chrisvxd,

Glad to have you around and appreciate the work you do on Puck.

Just for the record, this project was under a similar paradigm in v2 with Craft.js. That has a compatibility layer converting the HTML components to Craft.js syntax to render. In contrast, the current version has HTML components and a React based editor.

The goal of the project is to have it all in vanilla JS/HTML for 1) compatibility across all frontend frameworks and 2) source code simplicity and 3) longevity of the project. There's no much information about this right now but I'd write a more detail post about this in the next few days.

PS: The way to edit components now is to use the browser DevTools:

https://private-user-images.githubusercontent.com/370612/318197307-430540a1-b65d-4be6-8091-fae88d14a41a.mov