u/gissen_dev

▲ 65 r/vuejs

There's no open-source visual page builder for Vue like Puck, so I started building one

Puck is the best open-source visual editor for React — you register your own components, users drag them onto a canvas, you get JSON back. The maintainers have said they're not porting it to Vue, and I couldn't find a Vue equivalent at that quality. So the options for devs were a proprietary SaaS builder or building one. I started building one and it's called Gissen, MIT-licensed.

The idea: you register your existing Vue components with a typed config (fields, types, defaults), then drag them onto a canvas. The output is plain JSON you render back into real Vue components. No iframe, because components mount directly into the same DOM, so your scoped styles just work and the canvas looks exactly like production.

What works right now: the editor canvas, drag from a palette, reorder, nesting into containers, select/delete, the typed config, and JSON output via v-model:data.

What doesn't yet: editing prop values (the properties panel is still a stub), the MCP server for agents (skeleton only), and a production render helper to turn the JSON back into Vue outside the editor. It's pre-alpha, please don't ship it.

The part that ate the most time was syncing SortableJS with a reactive Vue store: index translation between Sortable's final position and the store's insert index, reverting the DOM before mutating state so Vue patches from a clean baseline, and preventing a container from being dropped into its own descendant. I wrote up those gotchas in more detail if anyone's interested (link below).

Repo: github.com/gissen-dev/gissen
npm: npm install gissen
The SortableJS write-up are linked in the README.

Question for the sub: for those who've used Puck or built something similar — what would actually make a Vue page builder useful enough for you to reach for it instead of hand-coding? Trying to prioritize what comes after the properties panel.

u/gissen_dev — 12 days ago