Getting Started

vue-wswg-editor is a Vue 3 component library that provides a complete page builder solution. This guide will help you get started quickly.

Try it out

Explore the library in action with the Live Demo on StackBlitz.

What is vue-wswg-editor?

vue-wswg-editor enables developers to create visual editors where users can:

• Drag and drop blocks to build pages visually
• Edit block properties through a comprehensive sidebar editor
• Preview pages in real-time with responsive viewport controls
• Manage page layouts with customizable layout components
• Define custom blocks with field configurations and validation

The library uses a JSON-based data structure, making it easy to store, version, and transfer page configurations.

Key Concepts

Before diving in, it's helpful to understand a few key concepts:

• Blocks: Reusable components that make up a page (e.g., Hero, Divider, Feature Grid)
• Layouts: Page templates that wrap blocks (e.g., Default, Marketing)
• Fields: Editable properties of blocks (e.g., heading, description, color)
• Registry: The system that discovers and manages blocks, layouts, and fields

Next Steps

• Installation - Install the library and its dependencies
• Quick Start - Create your first page builder
• Blocks - Learn how to create custom blocks
• Fields - Understand field configuration
• Validation - Learn about field validation