Vue WSWG Editor

🎨

Visual Page Builder

Intuitive drag-and-drop interface for building pages with a comprehensive sidebar editor

📝

Rich Field Editor

Support for multiple field types including text, textarea, select, color, repeater, and more

🎯

Block Management

Add, remove, reorder, and configure blocks with ease through a user-friendly interface

📱

Responsive Preview

Preview pages in desktop and mobile viewports with real-time updates

🎨

Theme Support

Organize blocks, layouts, and fields into cohesive collections.

🔧

Field Validation

Built-in validation with support for custom validators

📦

TypeScript Support

Full TypeScript support with comprehensive type definitions

🔌

Vite Plugin

Automatic theme, block & layout discovery via Vite plugin

Quick Start

Install the library and start building:

bash

npm install vue-wswg-editor

Configure the Vite plugin in your vite.config.ts:

typescript

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath } from "url";
import { vueWswgEditorPlugin } from "vue-wswg-editor/vite-plugin";

export default defineConfig({
   plugins: [
      vue(),
      vueWswgEditorPlugin({
         rootDir: "@page-builder",
      }),
   ],
   resolve: {
      alias: {
         "@page-builder": fileURLToPath(new URL("./src/page-builder", import.meta.url)),
      },
   },
});

Use the editor component in your Vue app:

vue

<template>
   <WswgPageBuilder v-model="pageData" :editable="true" :showBrowserBar="true" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { WswgPageBuilder } from "vue-wswg-editor";
import "vue-wswg-editor/style.css";

const pageData = ref({
   blocks: [],
   settings: {},
});
</script>

Why vue-wswg-editor?

vue-wswg-editor provides a complete solution for building visual page editors in Vue 3 applications. It combines:

Ease of Use: Simple API with sensible defaults

Flexibility: Customizable blocks, layouts, and fields

Type Safety: Full TypeScript support

Performance: Optimized for large page configurations

Developer Experience: Zero-config block discovery via Vite plugin

Features

🎨 Visual Page Builder - Drag-and-drop interface

📝 Rich Field Editor - Comprehensive sidebar with multiple field types

🎯 Block Management - Easy block manipulation

📱 Responsive Preview - Desktop and mobile viewports

🎨 Customizable Layouts - Multiple layout support

🔧 Field Validation - Built-in and custom validators

📦 TypeScript - Full type definitions

🔌 Vite Plugin - Automatic component discovery

Ready to get started? Check out the Getting Started Guide.

vue-wswg-editorWYSIWYG JSON Editor