Emmet 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 or CSS instantly, ready to copy into any editor, even one without Emmet built in.
loading toolHow to expand Emmet abbreviations
- Type an Emmet abbreviation, one per line.
- Pick HTML, JSX, CSS or SCSS and your indent.
- Copy the expanded code into your project.
Good to know
- Write text with { }: p{Hello} → <p>Hello</p>.
- Attributes go in [ ]: a[href=/ target=_blank].
- In CSS mode, short codes like df, jcc and p10-20 expand to full properties.
Questions
What do > + * and $ mean?
> puts the next element inside, + puts it next to the previous one, *3 repeats it three times and $ is replaced by the number (1, 2, 3…). Use ^ to climb back up one level and ( ) to group.
What does ! do?
A single ! expands into a complete HTML5 page skeleton with doctype, head, meta tags and body.
Does my code get uploaded?
No. The checker or runtime is downloaded once from a public CDN (jsDelivr or cdnjs) and then runs inside your browser. Your code never leaves your device.
Is my data private?
Yes. Everything happens inside your own browser: nothing you type or choose is uploaded to us or anyone else.
Is it free?
Completely free, with no sign-up, no watermark and no limit on how many times you use it. Light ads keep the site running.
