gissen

Gissen

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

Pre-alpha — APIs are unstable. Do not use in production yet.

Gissen lets you register your existing Vue 3 components with a typed config object so end-users (or AI agents, via an MCP server) can drag and drop them onto a canvas to build pages. The output is plain JSON that you render back into real Vue components.

It is the Vue equivalent of Puck.

Install

npm install gissen

Requires Vue 3.4+.

Quick start

1. Define a config

// gissen.config.ts
import { defineGissenConfig } from 'gissen'
import Hero from './components/Hero.vue'

export default defineGissenConfig({
  components: {
    Hero: {
      fields: {
        title: { type: 'text', label: 'Title' },
        subtitle: { type: 'textarea', label: 'Subtitle' },
        cta: {
          type: 'select',
          label: 'CTA',
          options: [
            { label: 'Sign up', value: 'signup' },
            { label: 'Buy now', value: 'buy' },
          ] as const,
        },
      },
      defaultProps: { title: 'Hello', subtitle: '', cta: 'signup' },
      render: Hero,
    },
  },
})

2. Drop in the editor

<script setup lang="ts">
import type { GissenData } from 'gissen'
import { GissenEditor } from 'gissen'
import { ref } from 'vue'
import config from './gissen.config'
import 'gissen/style.css'

const data = ref<GissenData>({ root: { props: {} }, content: [] })
</script>

<template>
  <GissenEditor v-model:data="data" :config="config" style="height: 100vh;" />
</template>

data is plain JSON — persist it however you like (database, file, API).

Documentation

Full docs at gissen.dev — Config API reference, slot components, keyboard shortcuts, theming.

Status

License

MIT