emmet-compiler

View-layer compiler: takes a concise Emmet-style markup tree and emits a React (.tsx) or Angular component against a YAML component registry.

Install

npm install -g emmet-compiler
# or use directly
npx emmet-compiler --help

Requires Node.js 20+.

CLI

# Compile a component to React (→ LoginForm.react.tsx)
emmet-compiler compile LoginForm.emmet -s components.yml --markup react

# …or to Angular (→ LoginForm.angular.ts)
emmet-compiler compile LoginForm.emmet -s components.yml --markup angular

# Bulk compile with an output directory
emmet-compiler compile 'src/**/*.emmet' -s components.yml -o dist

# Watch mode
emmet-compiler watch 'src/**/*.emmet' -s components.yml -o dist

# Lint against the schema (unknown components, bad props, etc.)
emmet-compiler lint 'src/**/*.emmet' -s components.yml

# Generate a Zod validation schema from the YAML registry
emmet-compiler generate-schema components.yml -o src/generated-schema.ts

Output filenames are <input>.<markup>.<ext> — LoginForm.emmet → LoginForm.react.tsx / LoginForm.angular.ts. Override the directory with -o.

Run emmet-compiler <command> --help for all options.

DSL

A .emmet file is a markup tree. No directives, no metadata, no props — just the view. The component name is derived from the filename.

.flex.min-h-screen.items-center.justify-center.p-6
  .w-full.max-w-sm.flex.flex-col.gap-4.rounded-md.border.p-4
    h1.text-xl.font-semibold{Welcome back}
    p.text-sm.text-muted-foreground{Sign in to your account}
    .flex.flex-col.gap-2
      Label(htmlFor=email){Email}
      Input(type=email,[email protected])
    Button.w-full{Log in}

Indentation builds the tree; Name is a component (resolved via the schema), tag is a raw HTML element, .class adds a Tailwind class, (prop=value) sets a prop, {text} sets the child text.

Full expression grammar and schema reference: schemas/README.md.

Schema example

__config:
  from: "@/components/ui/*"

Button(variant? {default|outline|ghost}, size? {sm|md|lg}):
Input(type? {text|email|password|number}, placeholder? {string}):
Label(htmlFor {string}):

Programmatic API

import { parseMarkupFile, compileComponent, loadSchema } from 'emmet-compiler';

const schema = loadSchema('components.yml');
const file = parseMarkupFile(source, 'LoginForm');
const tsx = compileComponent(file, schema);

See dist/index.d.ts for all exports (parser, schema loader, validator, compiler, adapters).

Bundled schemas

schemas/ ships with ready-to-use YAML registries:

| File | Purpose | |---|---| | shadcn.yml | shadcn/ui components (~100) | | icons.yml | Lucide icon whitelist with Icon prefix | | recharts.yml | Recharts charting components |

Compose them via @import ./node_modules/emmet-compiler/schemas/shadcn.yml from your project schema.

License

MIT