Overview

Emmet syntax brings the speed of code editors directly into Divhunt's visual builder. Instead of adding elements one by one through menus, you can now type shorthand abbreviations that instantly expand into complete element structures. Press Cmd+E (Mac) or Ctrl+E (Windows) to open the element search, type an Emmet pattern, and watch your layout materialize in real-time.

The syntax follows familiar patterns that developers already know from code editors like VS Code and Sublime Text. Want a section containing a container with three card divs? Type section>container>div.card*3 and press Enter. The entire nested structure appears instantly, complete with the classes you specified. This works with any element type Divhunt supports, and you can include IDs, multiple classes, text content, and deeply nested hierarchies all in a single line.

A live preview shows exactly what structure will be created before you commit to it. You can see the element hierarchy, any text content, and visual indicators that distinguish between existing classes and new ones being created. This preview updates as you type, so you always know what you're about to build.

Benefits

Building layouts in visual website builders has traditionally meant lots of clicking - open a menu, select an element, position it, repeat. Emmet syntax eliminates this friction for users who prefer keyboard-driven workflows. You can scaffold an entire page section in the time it would take to add a single element the traditional way. For agencies building multiple client sites or developers prototyping ideas quickly, this translates to meaningful time savings across every project.

The feature also reduces context switching. Power users can keep their hands on the keyboard instead of constantly moving between keyboard and mouse. Combined with Divhunt's other keyboard shortcuts and the ability to work with Custom CSS classes inline, you can maintain a flow state while building. Classes and IDs specified in your abbreviation are applied automatically to the created elements, ready for styling.

Divhunt includes convenient aliases for common elements to speed things up further. Type btn instead of button, sec instead of section, or cont instead of container. These shortcuts compound with the Emmet syntax itself, making complex patterns like sec>cont>div.grid>div.col*4 quick to type and easy to remember.

Syntax Reference

Emmet uses intuitive operators to define element relationships and attributes. Here are the patterns you can use in Divhunt:

• Child operator (>) - Creates nested elements. div>p creates a paragraph inside a div.
• Sibling operator (+) - Creates elements at the same level. h1+p creates a heading followed by a paragraph.
• Multiplication (*) - Repeats elements. li*5 creates five list items.
• Class (.) - Adds CSS classes. div.card.featured creates a div with both classes applied.
• ID (#) - Adds an ID attribute. section#hero creates a section with id="hero".
• Text content ({}) - Adds text inside elements. button{Click Here} creates a button with that label.
• Grouping (()) - Groups elements for complex structures. div>(header>h1)+footer creates a div containing a header with h1 and a sibling footer.

Practical Examples

Here are some real-world patterns you might use when building with Divhunt:

• Hero section: sec#hero>cont>div.hero-content>h1{Welcome}+p{Your tagline here}+a.btn{Get Started}
• Pricing grid: sec>cont>div.pricing-grid>div.pricing-card*3>h3{Plan}+p{Description}+btn{Choose}
• Navigation: nav>cont>div.nav-inner>a.logo{Brand}+ul.nav-links>li*5>a{Link}
• Feature cards: div.features-grid>div.feature*4>div.icon+h4{Feature}+p{Description}
• Blog post layout: article>header>h1{Title}+p.meta{Author}^div.content>p*3

These structures work seamlessly with Divhunt's CMS collections. Create your layout structure with Emmet, then bind text elements and images to your collection fields. For pages using Dynamic Filters or Pagination, you can quickly scaffold the filter controls and result grids, then connect them to your data.

Emmet syntax represents Divhunt's commitment to removing friction from the design process. Whether you're building a simple landing page or a complex web application with Multiple Single Pages per CMS item, you can now work at the speed of thought - typing what you want and seeing it appear instantly in your canvas.