NaiveN

A visual low-code page builder for Vue 3, Naive UI, and TailwindCSS.

NaiveN lets users drag Naive UI components onto a canvas, edit component props, preview the page, and export Vue 3 Single File Component code. The project is early, but the base architecture is already built around JSON schema, a component registry, recursive rendering, and editable component state.

• Schema-first page model. Pages are stored as JSON nodes, not HTML strings.
• Automatic Naive UI component registration with lazy component loading.
• Component palette with search and drag-and-drop from vue-draggable-plus.
• Canvas rendering through a recursive Vue renderer.
• Inspector that edits component props from metadata or runtime Naive UI props.
• Undo and redo for page schema changes through VueUse history.
• Dark and light theme switching.
• Window-style component resizing and schema-backed scale controls.
• Page building blocks such as layout, top bar, tabs, page header, menu, card, space, button, and input.

• Vue 3 with <script setup>
• TypeScript
• Vite
• Naive UI
• TailwindCSS v4
• VueUse
• vue-draggable-plus
• Monaco Editor
• Prettier

npm install
npm run dev

Open the local URL printed by Vite.

Build the production bundle:

npm run build

Preview the production build:

npm run preview

src
|-- builder
|   |-- Builder.vue
|   |-- Canvas.vue
|   `-- ComponentPanel.vue
|-- core
|   |-- registry.ts
|   |-- schema.ts
|   `-- types.ts
|-- generator
|   `-- vue.ts
|-- property
|   `-- PropertyPanel.vue
|-- renderer
|   `-- ComponentRenderer.vue
`-- stores
    `-- builder.ts

NaiveN uses a JSON schema as the source of truth. A component node stores its id, type, props, children, style, and events. Text is also represented as a schema node.

{
  id: 'button-1',
  type: 'NButton',
  props: {
    type: 'primary',
    size: 'large'
  },
  children: [
    {
      id: 'text-1',
      type: 'text',
      value: 'Save'
    }
  ]
}

The component registry connects schema type values to Vue components. Naive UI components are discovered automatically from the installed package, then loaded lazily when the renderer needs them. Hand-written metadata is still useful for better defaults, select options, and page-ready component presets.

The renderer does one job: turn schema nodes into Vue components. Builder-specific behavior such as selection, drag sorting, and resizing lives outside the Naive UI components so exported pages can stay clean.

• Architecture
• Schema model
• Component registry
• Development guide
• Roadmap
• Release guide

• Keep page state serializable. Do not store live Vue components in schema nodes.
• Prefer metadata overrides over special cases in the canvas.
• Keep generated code as normal Vue SFC output, not framework-specific runtime state.
• Use strict TypeScript and Composition API patterns.

For security reports and project support, contact contact@zako.net.cn.