Documentation
Build layouts instantly
Create entire page structures by typing a single line. Emmet expressions expand into full nested HTML with one keystroke.
Press / to open Explorer, type your Emmet expression, and hit Enter.
01Operators
The grammar is small. These eight symbols do all the work.
| Symbol | Name | What it does |
|---|
> | Child | Nest inside parent |
+ | Sibling | Place next to |
* | Multiply | Repeat N times |
. | Class | Add CSS class |
# | ID | Add element ID |
{ } | Text | Set text content |
( ) | Group | Group elements together |
^ | Climb-up | Go back up one level |
02Aliases
Shorthand for the elements you reach for most often.
| Shorthand | Expands to |
|---|
sec | section |
cont | container |
btn | button |
lnk | a |
hdr | header |
ftr | footer |
para | p |
txt | span |
03Examples
Example 01
Heading with text
Input
h1{Welcome to Divhunt}
Output
h1
"Welcome to Divhunt"
Example 02
Two siblings
Input
h1{About Us}+p{We build websites.}
Output
h1
"About Us"
p
"We build websites."
Example 03
Nesting with >
Input
div>h2{Features}+p{Everything you need.}
Output
div
h2
"Features"
p
"Everything you need."
Example 04
Section + container
Input
section>container>h1{Hello World}
Output
section
container
h1
"Hello World"
Example 05
Classes
Input
section.hero.dark>container>h1{Launch Day}+p{It's here.}+btn{Get Started}
Output
section.hero.dark
container
h1
"Launch Day"
p
"It's here."
button
"Get Started"
Example 06
Multiply with *
Input
section>container>div.card*3
Output
section
container
div.card
div.card
div.card
Example 07
Cards with content
Input
section>container>div.card*3>img+h3{Title}+p{Description}
Output
section
container
div.card
img
h3 "Title"
p "Description"
div.card
img
h3 "Title"
p "Description"
div.card
img
h3 "Title"
p "Description"
Example 08
Climb-up with ^
Input
nav>container>div.logo>lnk{Divhunt}^div.menu>lnk{Home}+lnk{About}+lnk{Pricing}
Output
nav
container
div.logo
a "Divhunt"
div.menu
a "Home"
a "About"
a "Pricing"
Example 09
Hero section
Input
section.hero>container>h1{Build Without Limits}+p{Create stunning websites with zero code.}+div.buttons>btn{Start Free}+btn{Watch Demo}
Output
section.hero
container
h1
"Build Without Limits"
p
"Create stunning websites with zero code."
div.buttons
button "Start Free"
button "Watch Demo"
Example 10
Feature grid
Input
section>container>h2{Why Choose Us}+div.grid>div.feature*4>i+h3{Feature}+p{Description}
Output
section
container
h2
"Why Choose Us"
div.grid
div.feature
i
h3 "Feature"
p "Description"
div.feature
div.feature
div.feature
Example 11
Pricing table
Input
section>container>h2{Pricing}+div.plans>div.plan*3>h3{Plan}+p.price{$29/mo}+ul>li{Feature one}+li{Feature two}+li{Feature three}^btn{Choose Plan}
Output
section
container
h2 "Pricing"
div.plans
div.plan
h3 "Plan"
p.price "$29/mo"
ul
li "Feature one"
li "Feature two"
li "Feature three"
button "Choose Plan"
div.plan
div.plan
Example 12
Testimonials
Input
section>container>h2{What People Say}+div.grid>div.testimonial*3>blockquote{This changed everything.}+div.author>img+div>h4{John Doe}+p{CEO, Company}
Output
section
container
h2 "What People Say"
div.grid
div.testimonial
blockquote "This changed everything."
div.author
img
div
h4 "John Doe"
p "CEO, Company"
div.testimonial
div.testimonial
Example 13
Footer
Input
ftr>container>div.grid>div.col*4>h4{Column}+lnk{Link One}+lnk{Link Two}+lnk{Link Three}^div.bottom>p{© 2026 Divhunt}
Output
footer
container
div.grid
div.col
h4 "Column"
a "Link One"
a "Link Two"
a "Link Three"
div.col
div.col
div.col
div.bottom
p "© 2026 Divhunt"
Example 14
Blog listing
Input
section>container>h1{Blog}+div.posts>div.post*3>img+div.content>h3{Post Title}+p{A short excerpt.}+lnk{Read More}
Output
section
container
h1 "Blog"
div.posts
div.post
img
div.content
h3 "Post Title"
p "A short excerpt."
a "Read More"
div.post
div.post
Example 15
Grouping with ()
Input
section>container>(h2{Title}+p{Content}+btn{Learn More})*3
Output
section
container
h2 "Title"
p "Content"
button "Learn More"
h2 "Title"
p "Content"
button "Learn More"
h2 "Title"
p "Content"
button "Learn More"
Example 16
Full landing page
Input
hdr>container>div.logo>lnk{Divhunt}^nav>lnk{Features}+lnk{Pricing}+btn{Sign Up}^section.hero>container>h1{Build Your Website}+p{No code. No limits.}+div.cta>btn{Get Started}+btn{See Demo}^section.features>container>h2{Features}+div.grid>div.feature*3>i+h3{Feature}+p{Description}^ftr>container>p{© 2026 Divhunt}
Output
header
container
div.logo
a "Divhunt"
nav
a "Features"
a "Pricing"
button "Sign Up"
section.hero
container
h1 "Build Your Website"
p "No code. No limits."
div.cta
button "Get Started"
button "See Demo"
section.features
container
h2 "Features"
div.grid
div.feature
i
h3 "Feature"
p "Description"
div.feature
div.feature
footer
container
p "© 2026 Divhunt"
04Tips
- Start simple, like
section>container>h1+p, then add complexity.
- Use aliases to type faster,
sec>cont>btn instead of section>container>button.
- Use
^ when you need to go back up after nesting deep.
- Use
* to create grids and repeated patterns quickly.
- Use
() with * to repeat entire groups of elements.
- The preview shows your structure before creating, check it before hitting Enter.
