Alexey Chechet (@gissen-dev.bsky.social)

Alexey Chechet

@gissen-dev.bsky.social

Building Gissen — a headless visual editor for Vue. Drag and drop your components to build pages, sites, or your own CMS. Open source, MIT. Building in public → gissen.dev

33 followers 83 following53 posts

Pinned

Alexey Chechet

@gissen-dev.bsky.social

15 June

Building Gissen: a headless visual editor for Vue 3. The Vue equivalent of Puck. Register your Vue components with a typed config, then drag and drop them to build pages. Output is plain JSON you render anywhere. This is the editor canvas working — drag, reorder, nest, delete.

Alexey Chechet

@gissen-dev.bsky.social

gissen-mcp is on npm: an MCP server that lets an AI agent edit a Vue page built with Gissen 🎉 The agent can only use what your component config allows. A wrong type or out-of-range value gets refused with the reason, and nothing changes 👍 Pre-alpha, tested with Claude only ↓

Alexey Chechet

@gissen-dev.bsky.social

github.com/gissen-dev/gissen

github.comGitHub - gissen-dev/gissen: The headless visual editor for Vue 3. Agent-native, self-hostable, MIT.The headless visual editor for Vue 3. Agent-native, self-hostable, MIT. - gissen-dev/gissen

Alexey Chechet

@gissen-dev.bsky.social

17 Sept

Gissen doesn't introspect your components 👌 You have to declare a typed config per component: fields, their types, what's a slot. And that config is the introspection layer. It has to be written by hand, that's the cost. There is no AST parsing, but also no scanner guessing wrong.

Alexey Chechet

@gissen-dev.bsky.social

30 June

Gissen now has its first issues open for contributors 🦾 It's pre-alpha with a lot of greenfield. If you write Vue and want to poke at a headless visual editor, the good-first-issue entry points are tagged and CONTRIBUTING has the setup 🙂 github.com/gissen-dev/gissen/issues

Alexey Chechet

@gissen-dev.bsky.social

22 June

The hard part of building a drag-and-drop page editor for Vue wasn't the UI - it was syncing SortableJS with a reactive store. Index translation, DOM revert before mutating state and cycle prevention when containers nest. First deep dive on Gissen: dev.to/yukos1221/bu...

dev.toBuilding a headless visual editor for Vue — the Vue answer to PuckThere's a good open-source page builder for React. It's called Puck, and it's genuinely well-built:...

Alexey Chechet

@gissen-dev.bsky.social

15 June

Alexey Chechet

@gissen-dev.bsky.social

15 June

Repo (MIT): github.com/gissen-dev/gissen npm install gissen Pre-alpha — properties panel and MCP server come next Building in public, feedback welcome

Alexey Chechet

@gissen-dev.bsky.social

13 June

Published gissen@0.1.0-alpha.2. npm install gissen What's in this drop: typed config API, editor canvas, drag-and-drop, nesting, keyboard delete. Not yet: properties panel, MCP server, prod-render helper. Demo video lands tomorrow. github.com/gissen-dev/gissen

Alexey Chechet

@gissen-dev.bsky.social

12 June

Interesting trick in TypeScript The body of defineGissenConfig: return config One line. It returns exactly what you pass in. All the work is in the type signature.

Alexey Chechet

@gissen-dev.bsky.social

12 June

All the work is in the type signature — "const T extends ..." keeps your select options as 'signup' | 'buy' instead of "string". Wrong "defaultProps" becomes a compile error, not a runtime bug.

Alexey Chechet

@gissen-dev.bsky.social

11 June

Most tools in this space build their own AI layer because it lets them control the model and charge for usage. We decided that's not something we want to own.

Alexey Chechet

@gissen-dev.bsky.social

11 June

Gissen ships an MCP server instead, so you bring whatever agent client you use, point it at your setup, and we never see your API key.

Alexey Chechet

@gissen-dev.bsky.social

11 June

The agent reads your component config and understands it as a vocabulary, so it knows which components exist, what props each one takes, and what's allowed in a slot. From there it can add, move, update, or delete components on the page.

Alexey Chechet

@gissen-dev.bsky.social

10 June

If you've built real components and tried an iframe-based visual editor, you probably have hit this: - "100vh" is the iframe height, not the page - "position: fixed" anchors to the iframe viewport - CSS variables from your app don't cascade in - Fonts disappear So the editor shows you a lie

Alexey Chechet

@gissen-dev.bsky.social

10 June

Gissen has no iframe. Components render directly in your document, it means the same window, same Pinia stores, same CSS variables, same fonts. Viewport preview (mobile/tablet/desktop) works via CSS transform. So you can be sure that you see exactly what your users will see.

Alexey Chechet

@gissen-dev.bsky.social

9 June

Three architectural bets we made building Gissen: — Vue-first, not framework-agnostic — MCP as the agent interface — No iframe Each one is a tradeoff. Here's the reasoning:

Alexey Chechet

@gissen-dev.bsky.social

9 June

Vue-first: instead of abstracting over every framework, we go all-in on Vue 3. Fewer escape hatches, tighter integration, better DX for Vue teams. MCP: agents talk to the editor via MCP tools, not a custom orchestration layer, so any MCP-compatible client works out of the box.

Alexey Chechet

@gissen-dev.bsky.social

9 June

No iframe: most visual editors isolate the canvas in an iframe, but we don't. Components render in-context gives us full access to your app's stores, styles, and router. Mobile/tablet/desktop viewport preview? The answer is CSS transform, not a second iframe instance.

Alexey Chechet

@gissen-dev.bsky.social

8 June

@jackceoai.bsky.social asked about the stack. Here's the answer: pnpm monorepo, Vue 3 + TypeScript strict, Vite, Zod, Vitest. Agent layer: MCP, not hub-and-spoke. Any MCP-compatible client (Claude, Cursor, etc.) gets tools to read and mutate the page tree — no bespoke orchestration glue needed.

Alexey Chechet

@gissen-dev.bsky.social

7 June

Started the Gissen monorepo today. pnpm workspaces, four packages: — gissen (core editor) — gissen-mcp (MCP server) — create-gissen-app (scaffolder) — gissen-docs Nothing renders yet. But the structure is the first real decision — and it's locked 👍

Alexey Chechet

@gissen-dev.bsky.social

5 June

Puck for React. Storyblok if you have budget. Builder.io if you want vendor lock-in. Open-source, self-hosted, Vue? Nothing. That's the gap Gissen fills.

Alexey Chechet

@gissen-dev.bsky.social

4 June

Vue has no headless visual page builder. I'm building one. Gissen: open source, MIT, self-hosted. Drag-drop your own Vue components to build pages and sites. Also ships with an MCP server — so AI agents can edit your pages programmatically, not just describe them. Building in public. gissen.dev

gissen.devGissen — The headless visual editor for VueDrag and drop your Vue components to build pages, marketing sites, or your own CMS. Open source, MIT, self-hosted.

You are up to date.