Emmet is a comprehensive web developer toolkit for boosting HTML & CSS code writing through abbreviations and dynamic snippets. It allows developers to write CSS selector-like expressions that expand into complete HTML structures or CSS properties with a single keystroke.
npm install emmetimport expand from "emmet";
import { extract, markup, stylesheet, resolveConfig } from "emmet";
// Additional available imports for advanced usage
import {
markupAbbreviation, // Direct parser access
stylesheetAbbreviation, // Direct CSS parser access
parseMarkup, // Markup AST parsing
parseStylesheet, // CSS AST parsing
stringifyMarkup, // Markup AST to string
stringifyStylesheet, // CSS AST to string
parseStylesheetSnippets, // CSS snippet processing
CSSAbbreviationScope // CSS scope enum
} from "emmet";
// Type imports
import type {
MarkupAbbreviation,
StylesheetAbbreviation,
Config,
UserConfig,
SyntaxType
} from "emmet";For CommonJS:
const expand = require("emmet");
const { extract, markup, stylesheet, resolveConfig } = require("emmet");import expand, { extract } from "emmet";
// Expand markup abbreviation
const html = expand("ul>li.item$*3>{Item $}");
// Result: <ul><li class="item1">Item 1</li><li class="item2">Item 2</li><li class="item3">Item 3</li></ul>
// Expand CSS abbreviation
const css = expand("m10p5", { type: "stylesheet" });
// Result: margin: 10px; padding: 5px;
// Extract abbreviation from text
const source = "Hello world ul.tabs>li";
const data = extract(source, 22);
console.log(data.abbreviation); // "ul.tabs>li"
const expanded = expand(data.abbreviation);Emmet is built around several key components:
expand function that automatically detects markup vs stylesheet abbreviationsMain abbreviation expansion functionality that automatically handles both markup and stylesheet abbreviations based on context and configuration.
function expand(abbr: string, config?: UserConfig): string;Intelligent extraction of Emmet abbreviations from source code at specified positions, with support for prefix matching and auto-completion scenarios.
function extract(
line: string,
pos?: number,
options?: Partial<ExtractOptions>
): ExtractedAbbreviation | undefined;
interface ExtractOptions {
lookAhead: boolean;
type: SyntaxType;
prefix: string;
}
interface ExtractedAbbreviation {
abbreviation: string;
location: number;
start: number;
end: number;
}Specialized processing for markup abbreviations (HTML, XML, HAML, Pug, JSX) with comprehensive attribute handling and nested element support.
function markup(abbr: string | Abbreviation, config: Config): string;
interface Abbreviation {
type: 'Abbreviation';
children: AbbreviationNode[];
}
interface AbbreviationNode {
type: 'AbbreviationNode';
name?: string;
value?: Value[];
repeat?: Repeater;
attributes?: AbbreviationAttribute[];
children: AbbreviationNode[];
selfClosing?: boolean;
}Specialized processing for stylesheet abbreviations (CSS, SASS, SCSS, Stylus) with property expansion, value completion, and vendor prefix support.
function stylesheet(abbr: string | CSSAbbreviation, config: Config): string;
type CSSAbbreviation = CSSProperty[];
interface CSSProperty {
name?: string;
value: CSSValue[];
important: boolean;
snippet?: any;
}
interface CSSValue {
type: 'CSSValue';
value: Value[];
}Direct access to the underlying abbreviation parsers for advanced use cases requiring custom AST manipulation or processing.
function markupAbbreviation(abbr: string, options?: any): Abbreviation;
function stylesheetAbbreviation(abbr: string, options?: any): CSSAbbreviation;These functions provide direct access to the parser functionality without the configuration resolution and output formatting layers. Use these when you need raw AST structures for custom processing.
Comprehensive configuration system with syntax-specific options, output formatting, and behavior customization.
function resolveConfig(config?: UserConfig): Config;
interface Config {
type: SyntaxType;
syntax: string;
options: Options;
variables: SnippetsMap;
snippets: SnippetsMap;
context?: AbbreviationContext;
text?: string | string[];
maxRepeat?: number;
cache?: Cache;
}
interface UserConfig {
type?: SyntaxType;
syntax?: string;
options?: Partial<Options>;
variables?: SnippetsMap;
snippets?: SnippetsMap;
context?: AbbreviationContext;
text?: string | string[];
maxRepeat?: number;
cache?: Cache;
}type SyntaxType = 'markup' | 'stylesheet';
// Type aliases for abbreviated imports
type MarkupAbbreviation = Abbreviation;
type StylesheetAbbreviation = CSSAbbreviation;
type StringCase = '' | 'lower' | 'upper';
type Value = string | Field;
type FieldOutput = (
index: number,
placeholder: string,
offset: number,
line: number,
column: number
) => string;
type TextOutput = (
text: string,
offset: number,
line: number,
column: number
) => string;
interface Field {
type: 'Field';
index: number;
name: string;
}
interface AbbreviationAttribute {
name?: string;
value?: Value[];
valueType: AttributeType;
boolean?: boolean;
implied?: boolean;
multiple?: boolean;
}
type AttributeType = 'raw' | 'singleQuote' | 'doubleQuote' | 'expression';
interface AbbreviationContext {
name: string;
attributes?: { [name: string]: string | null };
}
interface SnippetsMap {
[name: string]: string;
}
interface Cache {
stylesheetSnippets?: CSSSnippet[];
markupSnippets?: { [name: string]: Abbreviation | null };
}