Gissen

The headless visual editor for Vue. Agent-native, self-hostable, MIT-licensed.

Gissen is an open-source headless visual editor for Vue 3. Developers register their existing Vue components with a typed config object; end-users (or AI agents, via an MCP server) drag and drop those components onto a canvas to build pages. The output is JSON describing the page tree, which the developer renders back into real Vue components in their app.

It is the Vue equivalent of Puck, the React-based visual editor.

Status: pre-alpha. APIs are unstable. The editor canvas with drag-and-drop, the properties panel, undo/redo history, and viewport preview are functional; the production rendering API is in progress.

Demo & deep dive

📺 Watch the demo video

📝 Building a headless visual editor for Vue: the Vue answer to Puck — a technical deep dive on dev.to.

Monorepo structure

gissen/
├── packages/
│   ├── core/                # gissen — editor + renderer library
│   ├── mcp/                 # gissen-mcp — MCP server for AI agents
│   └── create-gissen-app/   # create-gissen-app — project scaffolder
├── apps/
│   └── docs/                # VitePress documentation site
└── examples/
    └── basic-nuxt/          # Example Nuxt 4 app using Gissen

Development

This is a pnpm workspace. Requires Node 20+.

pnpm install     # install all workspace dependencies
pnpm dev         # run dev servers across packages
pnpm build       # build all packages
pnpm test        # run tests across packages
pnpm lint        # lint the whole repository
pnpm typecheck   # type-check across packages

See CONTRIBUTING.md for more.

License

MIT