Compress entire UI systems — buttons, cards, forms, tables, schemas, state logic, and Tailwind-heavy markup
into a dense, lossless notation, then expand back to production code in any framework.
npm install @aimata-dsl/core
Paste any JSX or HTML — watch it compress in real time.
Your JSX or HTML is tokenized and walked into a lightweight AST — no Babel, no external parsers.
parse(source) → ASTNode[]
The AST is serialized into the bracket micro-DSL. Tags, IDs, classes, props, and children — all encoded losslessly.
compressToDSL(code) → string
Expand back to production React JSX or plain HTML. Deterministic — compress → expand → compress gives identical DSL.
expandFromDSL(dsl, 'react' | 'html')
| Part | Syntax | Example | Notes |
|---|---|---|---|
| Tag | tag | [div|...] | Any HTML tag or PascalCase component |
| ID | #id | [div#hero|...] | Maps to id="" attribute |
| Classes | .cls1.cls2 | [div.flex.gap-4|...] | Dot-separated, full Tailwind supported |
| Props | {k=v,k2=v2} | {onClick=fn,type=submit} | Comma-separated key=value pairs |
| Children | |... | |text or [nested] | Text or nested DSL nodes |
compressToDSL(code: string): stringConverts JSX or HTML source into Aimata micro-DSL notation. Accepts any well-formed JSX/HTML string.
import { compressToDSL } from '@aimata-dsl/core';
compressToDSL('<div className="flex gap-4">Hi</div>');
// → '[div.flex.gap-4|Hi]'expandFromDSL(dsl: string, target?: 'react' | 'html'): stringExpands micro-DSL back to JSX or HTML. React mode uses className/{fn}. HTML mode uses class/data-on*.
import { expandFromDSL } from '@aimata-dsl/core';
expandFromDSL('[button.btn{onClick=go}|Click]', 'react');
// → '<button className="btn" onClick={go}>Click</button>'
expandFromDSL('[button.btn{onClick=go}|Click]', 'html');
// → '<button class="btn" data-onclick="go">Click</button>'parse(source: string): ASTNode[]Tokenizes and parses JSX/HTML into a plain-object AST. Useful for custom analysis, class extraction, or tooling.
import { parse } from '@aimata-dsl/core';
const [root] = parse('<div className="flex"></div>');
root.tag; // 'div'
root.classes; // ['flex']compile(ast: ASTNode[], opts?: { target: 'dsl' | 'react' | 'html' }): stringCompiles an AST directly to any target. Skips the parse step when you already have an AST from parse().
import { parse, compile } from '@aimata-dsl/core';
const ast = parse('<nav className="flex"></nav>');
compile(ast, { target: 'dsl' }); // '[nav.flex]'
compile(ast, { target: 'html' }); // '<nav class="flex"></nav>'The core engine for compressing full UI structures, including buttons, cards, forms, tables, schema patterns, and state-aware component logic. Zero dependencies. Works in Node, browser, Deno, and Bun.
npm install @aimata-dsl/core
Token-optimized React component primitives. Every component exposes a DSL signature for tooling, AI prompts, and structured component compression across more complex UI systems.
MCP-compatible HTTP server. Register the project compression workflow as a tool in Claude, Gemini, or any MCP-enabled AI assistant for form-heavy and component-heavy UI work.
Send DSL to your LLM instead of raw JSX — 2-3× fewer tokens, lower cost, same information.
// Compress before sending to AI
const prompt = `Edit: ${compressToDSL(myUI)}`;
// Expand AI's DSL response
const updated = expandFromDSL(aiReply, 'react');Parse any component and extract all classes, IDs, and props programmatically.
const [root] = parse(myComponent);
const tokens = root.classes;
// ['rounded-xl', 'shadow-lg', 'p-6', ...]Write once in DSL, export to any framework. React, plain HTML, and more targets coming.
const dsl = compressToDSL(reactComp);
expandFromDSL(dsl, 'react'); // JSX
expandFromDSL(dsl, 'html'); // HTMLTry the interactive Studio or install the package right now.
npm install @aimata-dsl/core