jnk

jnk

jnk is a CLI tool for generating JSX using concise Emmet-style syntax. It's like Emmet, but for React.

Installation

# Global installation (recommended)
npm install -g jnk

# Or use with npx
npx jnk "div.container>h1{Hello}"

Usage

CLI (Recommended)

jnk "div.container>h1{Hello}+p{World}"

Programmatic

import { jnk } from "jnk";

const jsx = jnk("Button.primary[onClick={handleClick}]{Save}");
console.log(jsx);
// <Button className="primary" onClick={handleClick}>Save</Button>

Advanced (with AST)

import { jnkWithAST } from "jnk";

const { ast, jsx } = jnkWithAST("div.container>h1{Hello}");
console.log(ast); // Abstract Syntax Tree for custom processing
console.log(jsx); // Generated JSX

Examples

# Simple div with class and children
jnk "div.container>h1{Hello}+p{World}"
# Output:
# <div className="container">
#   <h1>Hello</h1>
#   <p>World</p>
# </div>

# Component with props
jnk "Button.primary[onClick={handleClick}]{Save}"
# Output: <Button className="primary" onClick={handleClick}>Save</Button>

# Nested components
jnk "Card>CardHeader{Title}+CardContent{Some content}+CardFooter>Button{Ok}"

# Expression content
jnk "ul>li*{items.map(i => <li>{i}</li>)}"

# Multiplication with numbering
jnk "ul>li.item\$*3>a{Link \$}"
# Output:
# <ul>
#   <li className="item1"><a>Link $</a></li>
#   <li className="item2"><a>Link $</a></li>
#   <li className="item3"><a>Link $</a></li>
# </ul>

# Grouping
jnk "(div.header+div.content)*2"
# Output:
# <div className="header" />
# <div className="content" />
# <div className="header" />
# <div className="content" />

Syntax

• > - child element
• + - sibling element
• .class - adds className
• #id - adds id attribute
• [prop=value] - adds prop with string value
• [prop={expression}] - adds prop with JS expression
• {content} - text or JS expression content
• *N - multiply element N times
• *{expression} - expression content (like map)
• $ - numbering placeholder (item$ becomes item1, item2, etc.)
• $$$ - zero-padded numbering (item$$$ becomes item001, item002, etc.)
• () - grouping elements
• Uppercase tags become React components

Why jnk?

• Faster than writing JSX by hand
• React-focused with component support and JSX expressions
• Emmet-compatible syntax you already know
• Modern TypeScript-based with comprehensive tests

Development

git clone https://github.com/your-username/jnk
cd jnk
npm install
npm run build
npm test

Contributing

Contributions are welcome. Please keep code clean and follow best practices.

License

MIT © Janko Stanic