Emmet Expander: Turn Short Abbreviations Into Full HTML, JSX or CSS

What is it?

The Emmet Expander turns short abbreviations into full code. ul.menu>li*3>a becomes a list with three links, and m10 becomes margin: 10px. Type one abbreviation per line and get the expanded HTML, JSX, CSS or SCSS instantly, ready to copy into any editor, even one without Emmet built in (such as Blogger’s HTML editor).

Who is it for?

Web developers who want speed in an editor that lacks Emmet, students learning HTML structure, and React developers who need className instead of class.

How to use it

Type abbreviations in Emmet abbreviations (one per line).
Choose HTML, JSX, CSS or SCSS, the Indent (2 spaces, 4 spaces or Tab) and, if you want, Close empty tags like <br />.
Copy or download the Expanded code.

Symbol guide

> puts the next element inside, + next to it, ^ climbs back up a level, ( ) groups.
*3 repeats three times and $ becomes the number: ul>li.item$*2 gives class item1 and item2.
{text} adds text: p{Hi}+a gives <p>Hi</p> and an empty link. [ ] adds attributes: a[href=/ target=_blank].
A single ! gives a full HTML5 page skeleton.
In CSS mode, df → display: flex, jcc → justify-content: center, p5-10 → padding: 5px 10px.

Is my code uploaded?

No. The checker is downloaded once from a public download server (jsDelivr or cdnjs) and then runs inside your browser. Your code never leaves your device, so it is safe for work and client projects.

Errors and how to fix them

Could not expand “…”: …: the abbreviation has a typo, such as an unclosed [ or {. Check that brackets are in pairs.
CSS shorthand comes out as an HTML tag: switch to CSS or SCSS; m10 means margin only in a stylesheet.
class instead of className: choose JSX for React.
Nothing happens, or a “Could not load” message: the first use downloads the library. Check your internet connection, turn off an ad or script blocker for this site, and reload the page.

Open the tool: Emmet Expander

Still stuck?

Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.