Waveslab Words - Snippets Documentation

A comprehensive guide to all available snippets in the EditorEngine

Waveslab Words includes a powerful editor engine with support for snippets that can be quickly inserted into your document. These snippets provide ready-made HTML components, layouts, and interactive elements to speed up your document creation.

How to Use Snippets

To use a snippet:

  1. Type the snippet name in your document
  2. Select the snippet name text
  3. Press Shift + Space
  4. The snippet will be inserted at the cursor position

For more complex snippets, you may be prompted to provide additional information.

Available Snippets

Basic HTML Elements

Snippet Description Example
div Creates a basic div element <div contenteditable="true"></div>
p Creates a paragraph element <p contenteditable="true"></p>
h1 to h6 Creates a heading element <h1 contenteditable="true"></h1>
a Creates a link <a href="#" contenteditable="true">Link Text</a>
img Inserts an image (will prompt for URL) <img src="url" alt="Image" class="resizable-image" />

Layout Snippets

grid
Creates a responsive grid layout with 6 items arranged in 3 columns
Usage:
grid
flexbox
Creates a flexible box layout with 3 responsive items
Usage:
flexbox
columns
Creates a newspaper-style column layout with content flowing between columns
Usage:
columns
sidebar-layout
Creates a layout with a sidebar and main content area
Usage:
sidebar-layout

Interactive Components

tabs
Creates a tabbed interface with 3 tabs and content panels
Usage:
tabs
carousel
Creates a carousel/slideshow with navigation buttons
Usage:
carousel
modal
Creates a popup modal dialog with open/close functionality
Usage:
modal
accordion
Creates an accordion with expandable sections
Usage:
accordion
dropdown
Creates a dropdown menu with clickable items
Usage:
dropdown
tooltip
Creates text with a tooltip that appears on hover
Usage:
tooltip

Form Elements

contact-form
Creates a complete contact form with name, email, and message fields
Usage:
contact-form
login-form
Creates a login form with username, password, and remember me option
Usage:
login-form
input:text
Creates a text input field
Usage:
input:text
input:email
Creates an email input field
Usage:
input:email
input:password
Creates a password input field
Usage:
input:password

Data Visualization

data-table
Creates a responsive data table with sample data and actions
Usage:
data-table
card
Creates a card component with header, body, and footer
Usage:
card
chart-bar
Creates a bar chart placeholder with sample data
Usage:
chart-bar
chart-pie
Creates a pie chart placeholder with sample data
Usage:
chart-pie

Lists and Tables

ul
Creates an unordered list (will prompt for number of items)
Usage:
ul
ol
Creates an ordered list (will prompt for number of items)
Usage:
ol
table
Creates a basic table (will prompt for rows and columns)
Usage:
table
table>tr*3>td*4
Creates a table with 3 rows and 4 columns
Usage:
table>tr*3>td*4

Advanced Emmet-Style Shortcuts

The editor supports Emmet-style shortcuts for quickly creating HTML structures.

Pattern Description Example
tag Creates a basic HTML element div → <div></div>
tag.class Element with class div.container → <div class="container"></div>
tag#id Element with ID div#header → <div id="header"></div>
tag.class1.class2 Element with multiple classes div.btn.btn-primary → <div class="btn btn-primary"></div>
parent>child Nested elements div>p → <div><p></p></div>
tag*n Multiple elements li*3 → <li></li><li></li><li></li>
parent>child*n Parent with multiple children ul>li*3 → <ul><li></li><li></li><li></li></ul>
tag{content} Element with text content h1{Hello World} → <h1>Hello World</h1>
tag[attr=value] Element with attributes a[href=https://example.com] → <a href="https://example.com"></a>

Design Elements

hero-section
Creates a hero section with heading, subheading, and call-to-action buttons
Usage:
hero-section

Important Notes:

Editor Functions

The editor also includes several utility functions that can be used to manipulate content:

Function Description
insertHTMLAtCursor(html) Inserts HTML content at the current cursor position
createList(type, count) Creates an ordered or unordered list with the specified number of items
createTable(rows, cols) Creates a table with the specified number of rows and columns
createLink(className, id) Creates a link with optional class and ID attributes
createInput(type) Creates an input field of the specified type
insertImage() Opens a popup to insert an image at the cursor position
undo() Undoes the last action
redo() Redoes a previously undone action
insertSnippet() Opens a popup to select and insert a predefined snippet