explaingit

emmetio/emmet

★ 4,545TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

Emmet is the core engine that expands shorthand codes into full HTML and CSS, most code editors already include it, but this repo is the library for building plugins and tooling.

Mindmap

mindmap
  root((Emmet))
    What it does
      Expand abbreviations
      HTML generation
      CSS generation
    Formats
      HTML and JSX
      SCSS and Sass
      Pug and HAML
    Architecture
      Core engine
      Editor plugins separate
      Monorepo packages
    Usage
      npm install
      Single function call
      Plugin building
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build editor plugins by calling the Emmet core library to expand user-typed abbreviations into HTML.

USE CASE 2

Integrate Emmet abbreviation expansion into a custom code editor or web-based IDE.

USE CASE 3

Use the standalone parsers from the packages folder to syntax-highlight Emmet abbreviations.

Tech stack

TypeScriptnpm

Getting it running

Difficulty · easy Time to first run · 5min
No license specified.

In plain English

Emmet is a shorthand system for web developers that lets you write short codes and expand them into full HTML or CSS automatically. Instead of typing out every tag and attribute by hand, you type a brief expression and Emmet converts it into complete, properly nested code. Most popular code editors already bundle Emmet or offer it as a plugin, so many developers use it without knowing what is running underneath. The shorthand syntax borrows from CSS selectors, which are the patterns web developers already use to describe page elements. For example, typing a short expression like ul#nav>li.item$*4>a{Item $} and pressing a key produces a four-item navigation list with correctly named IDs, classes, and link text. The same idea applies to CSS properties: short codes expand to full property declarations, including units and color values. Beyond HTML, Emmet supports several other template and stylesheet formats, including JSX (used with React), HAML, Pug, SCSS, and Sass. You can also point it at a custom syntax and configure exactly how the expanded output should be formatted. This particular repository is the core engine that handles parsing and expanding abbreviations. It does not include any editor plugin code. Editor-specific plugins live in separate repositories under the same organization and call into this core library. The repository is structured as a monorepo: the root contains the main expansion logic, and a packages folder holds standalone parsers that can be used independently, for example as a syntax highlighter. Installing the core library requires npm, the standard JavaScript package manager. Once installed, a single function call takes an abbreviation string and returns the expanded code. Developers building editor plugins or custom tooling would use this library directly, most end users interact with Emmet through an editor extension instead.

Copy-paste prompts

Prompt 1
How do I use the emmet npm package to expand an abbreviation like 'ul>li*3>a' into HTML in my Node.js project?
Prompt 2
Help me build a simple browser-based code editor that uses the emmet core library to expand shortcuts on Tab key press.
Prompt 3
How do I configure Emmet to output JSX instead of HTML so class becomes className?
Prompt 4
Show me how to use the Emmet CSS expander to turn 'p10' into 'padding: 10px' in my editor plugin.
Open on GitHub → Explain another repo

← emmetio on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.