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 is functional; the properties panel and production rendering
API are 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