Emmet is one of the most underused productivity boosters in modern editors — typing ul>li*5 and hitting Tab to get a fully-formed five-item list feels like magic the first time you see it, but remembering every operator, from climb-up (^) to numbering ($), takes practice. This cheatsheet keeps the full syntax searchable in one place.
What Is the Emmet Cheatsheet?
Browse Emmet’s HTML abbreviation operators (child >, sibling +, climb-up ^, multiplication *, grouping, numbering with $) and its separate, more compact CSS abbreviation syntax (m10, df, pos:a), filter by category, search by keyword, and toggle each card between the raw abbreviation and its fully expanded output.
How to Use It
- Open the tool at /tools/emmet-cheatsheet.
- Filter by category (Child & Sibling, Multiplication & Grouping, ID Class & Attributes, Text & Numbering, or CSS Abbreviations) or search directly.
- Toggle “Show expanded HTML” to see exactly what each abbreviation produces.
- Copy either the abbreviation or its expansion with one click.
Key Features
- Both HTML and CSS abbreviation syntax in a single reference.
- Live toggle between the short abbreviation and its fully expanded markup/CSS.
- Instant search and category filtering across every entry.
- Copy buttons on every card for both the abbreviation and its expansion.
When to Use This Tool
- Learning Emmet for the first time and wanting real examples instead of abstract syntax rules.
- Looking up a specific operator you half-remember, like numbering or the climb-up operator.
- Speeding up markup and CSS authoring in any Emmet-enabled editor (VS Code, WebStorm, Sublime Text, and more).
Try It Now
Open Emmet Cheatsheet directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the References collection on WebdevToolbox — free, browser-based developer tools with no login required.