Examples

This page provides examples and reference implementations for using vue-wswg-editor.

Live Demo

Try the library in action with the Live Demo on StackBlitz. This interactive demo lets you explore the full capabilities of vue-wswg-editor directly in your browser.

Example Theme

The wswg-demo-theme is a complete reference implementation for building page-builder themes with vue-wswg-editor. Use it as a starting point for your own themes or as a reference to learn best practices.

What's Included

The example theme provides:

• Example Blocks - Pre-built blocks including:

  • Hero sections (with and without images)
  • Feature Grid with icon support
  • FAQ Section with expandable items
  • Article Feed
  • Announcement banners
  • Divider components
  • Image Text blocks
  • Poll sections
  • Pricing sections
  • Call booking sections

• Custom Fields - Rich text editor field component using TipTap with a full formatting toolbar

• Layout Components - Default and landing page layouts with reusable header/footer partials

• Theme Configuration - Complete theme.config.js demonstrating theme metadata and settings

Getting Started

You can use the example theme as:

• A foundation - Copy it into your project and customize it for your needs
• A reference - Study the examples to learn how to build custom blocks and fields
• A learning tool - See real-world implementations of common page builder patterns

Code Examples

• Theme Selection - Building a theme selection interface using getThemes() and getThemeThumbnail()

Planned Examples

• Basic Page Builder
• Custom Block Types
• Field Validation
• Custom Layouts
• Advanced Field Types