doteng

English as a Programming Language

Write UI components in structured English. Compile to React, Laravel Blade, or HTML with a single command. The same .eng file produces production-ready code for any framework — powered by LLM-based code generation.

What does it look like?

Write this .eng file:

---
type: component
name: FeatureCard
props:
  - name: icon
    type: string
    required: true
  - name: title
    type: string
    required: true
  - name: description
    type: string
    required: true
---

Create a card container, padding large, rounded corners, border thin light gray, background white:
  Style this with hover shadow medium, transition all 200ms
  Create an icon circle, background light primary, width 48px, height 48px, rounded circle, centered, margin bottom medium:
    Icon {icon} size 24px, color primary
  Show {title} as a heading, font size 1.25rem, font bold, margin bottom small
  Show {description} as paragraph text, color muted, line height relaxed

Compile to React (doteng build . --target=react):

import React from 'react';
import { LayoutDashboard, Clock, BarChart2, Star } from 'lucide-react';

const iconMap = {
  'layout-dashboard': LayoutDashboard,
  'clock': Clock,
  'bar-chart-2': BarChart2,
};

export default function FeatureCard({ icon, title, description }) {
  const IconComponent = iconMap[icon] || Star;

  return (
    <div className="p-6 rounded-lg border border-gray-200 bg-white hover:shadow-md transition-all duration-200">
      <div className="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 mb-4">
        <IconComponent size={24} className="text-indigo-600" />
      </div>
      <h3 className="text-xl font-bold mb-2">{title}</h3>
      <p className="text-gray-500 leading-relaxed">{description}</p>
    </div>
  );
}

Same file compiled to Laravel Blade (doteng build . --target=laravel-blade):

<article class="p-6 rounded-lg border border-gray-200 bg-white hover:shadow-md transition-all duration-200">
    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
        @switch($icon)
            @case('layout-dashboard')
                <svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="3" y="3" width="7" height="7"></rect>
                    <rect x="14" y="3" width="7" height="7"></rect>
                    <rect x="14" y="14" width="7" height="7"></rect>
                    <rect x="3" y="14" width="7" height="7"></rect>
                </svg>
                @break
            @case('clock')
                <svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="10"></circle>
                    <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
                @break
        @endswitch
    </div>
    <h3 class="text-xl font-bold mb-2">{{ $title }}</h3>
    <p class="text-gray-500 leading-relaxed">{{ $description }}</p>
</article>

One source file. Multiple frameworks. Real, production-ready output.

Quick Start

# Install globally
npm install -g doteng

# Create a new project
doteng init my-app
cd projects/my-app

# Add your API key (or use --cli for free with Claude Code Max plan)
cp .env.example .env

# Build and preview
doteng build . --target=react --serve
doteng build . --target=html --serve
doteng build . --target=laravel-blade --serve

Free builds with Claude Code CLI

If you have Claude Code installed with a Max subscription, use --cli to compile without API costs:

doteng build . --target=react --cli --serve

CLI Commands

| Command | Description | |---------|-------------| | doteng init <name> | Scaffold a new .eng project | | doteng parse <file> | Parse a .eng file and output the JSON AST | | doteng lint [dir] | Validate all .eng files in a directory | | doteng build [dir] | Compile .eng files to target framework |

Build Flags

| Flag | Description | |------|-------------| | --target=<target> | Compilation target: react, html, laravel-blade | | --model=<model> | LLM model to use (e.g., claude-sonnet-4-20250514, gpt-4o) | | --cli | Use local Claude Code CLI instead of API (free for Max plan) | | --serve | Start a dev server after building | | --dry-run | Show what would be generated without calling the API |

Supported Targets

| Target | Output | Dev Server | |--------|--------|------------| | html | Static HTML + Tailwind CDN + vanilla JS | npx serve | | react | React components (JSX) + Tailwind + Vite | vite dev | | laravel-blade | Blade templates + routes + controllers | php artisan serve |

Vue, Svelte, Next.js, Angular, and more targets are planned. See the Language Spec for the full target mapping table.

Supported LLM Providers

| Provider | Models | Env Variable | |----------|--------|-------------| | Anthropic | claude-sonnet-4-20250514, claude-opus-4-6, etc. | ANTHROPIC_API_KEY | | OpenAI | gpt-4o, gpt-codex-5-3, o1-*, etc. | OPENAI_API_KEY | | Google | gemini-2.5-pro, etc. | GOOGLE_API_KEY | | OpenAI-Compatible | deepseek-*, mistral-*, etc. | OPENAI_COMPAT_API_KEY | | Claude Code CLI | Uses your subscription | No key needed |

How It Works

1. Parse — The lexer tokenizes .eng files, the parser builds a deterministic JSON AST. Same file always produces the same AST.
2. Compile — The AST + target framework + theme config are sent to an LLM with framework-specific instructions. The LLM generates real code.
3. Output — Generated files are written to dist/<target>/. With --serve, a dev server starts automatically.

Compilation results are cached in .eng-cache/ — unchanged files skip the API call on subsequent builds.

Language Syntax

See LANGUAGE_SPEC.md for the complete grammar specification, including:

• Frontmatter schema (type, name, props, route, extends, auth)
• All 40+ keywords (Create, Show, Loop, If, Set, Bind, Fetch, On, Navigate, etc.)
• Variables, conditions, and natural language operators
• Components, layouts, slots, and imports
• Forms, validation, events, and state management
• Styling directives and responsive design
• Animations and transitions

Project Structure

my-app/
├── doteng.config.yaml    # Project config (target, theme, API settings)
├── .env                  # API keys
├── hello.eng             # Your .eng files (organize however you want)
└── dist/                 # Compiled output
    ├── html/
    ├── react/
    └── laravel-blade/

No forced directory structure — put .eng files wherever you want. The frontmatter type field (component, page, layout) tells the compiler what each file is.

VS Code Extension

Syntax highlighting for .eng files is available in the eng-vscode/ directory. Install it locally:

cp -r eng-vscode ~/.vscode/extensions/doteng-language

Then reload VS Code. Provides keyword highlighting, variable coloring, comment toggling, and frontmatter support.

Contributing

1. Fork the repo
2. Create a feature branch (git checkout -b feature/vue-target)
3. Make your changes
4. Run the tests (npm test)
5. Submit a pull request

Areas that need help:

• Additional compilation targets (Vue, Svelte, Next.js, Angular)
• Parser improvements (better error messages, edge case handling)
• VS Code extension enhancements (autocomplete, diagnostics)
• Documentation and examples

License

MIT