Start Here

Quick Start

Minimal steps to generate a real project.

irgen can generate frontend apps, backend targets, or both. These can share the same contracts, or run independently and integrate with existing frontend and/or backend systems. It treats code generation like compilation: you describe intent in DSL, apply policies for target behavior, and emit code.

Compiler-Style IR

Transform descriptions through explicit IR stages for multi-target consistency.

Policy-Driven

Control architectural rules and emitter behavior globally via policies.

Operation-Oriented

Define contracts once and bind UI/Backend to them consistently.

Core Concept: Operation vs Action

An Operation is a backend contract: a request (query or command) with a defined input and output. An Action is how an operation is triggered in the UI (button click, form submit, row action, etc.). Operation is the architectural atom; Action is a UI concern. CRUD is just a common pattern of operations, not a requirement.

Path A: Operation-First (Existing API)

Use this path if your backend already exists (internal API, SaaS, PHP shared hosting, etc.). irgen generates a headless runtime and React components bound to your API contracts.

1import { frontend } from "irgen";
2
3frontend("AdminApp", (app) => {
4  // 1) Define where requests go
5  app.datasource("api", { baseUrl: "https://api.example.com" });
6
7  // 2) Define the contract (Operation)
8  app.operation("listUsers", { datasourceId: "api", method: "GET", path: "/users" });
9  app.operation("disableUser", { datasourceId: "api", method: "POST", path: "/users/:id/disable" });
10
11  // 3) Bind UI to operations
12  app.page("Users", (p) => {
13    p.component("UserTable", (c) => {
14      c.table({ operationId: "listUsers" });
15      c.action({ label: "Disable", operationId: "disableUser" });
16    });
17  });
18});

Path B: Full-Stack (New Backend)

Use this path if you want irgen to generate both backend and frontend. irgen provides higher-level DSL constructs (like entities/resources) that expand into underlying operations.

1import { app, frontend } from "irgen";
2
3// 1) Describe the backend target
4app("MyService", (be) => {
5  be.entity("Profile", (e) => {
6    e.model({ name: "string" });
7    e.list(); // sugar: expands into operations (list/get/create/update/delete as needed)
8  });
9});
10
11// 2) Describe the frontend (binds to operations)
12frontend("AdminPanel", (fe) => {
13  fe.page("Home", (p) => {
14    p.component("ProfileList");
15  });
16});

The important part: even if you start from a high-level CRUD abstraction, irgen still lowers it into Operations. That keeps the architecture consistent across both paths.

Generate Outputs

Run the CLI for the targets you need. New in v0.3.0: use irgen init for scaffolding, irgen check for semantic validation, and irgen studio for real-time visualization.

1# Core generation:
2irgen examples/app.dsl.ts --targets=backend,frontend
3
4# Specialized v0.3.0 commands:
5irgen init my-project
6irgen check examples/app.dsl.ts
7irgen studio examples/app.dsl.ts

Install the CLI

Use the published CLI for reproducible builds. The CLI uses the tsx loader to run .dsl.ts files (including imported .ts modules) without extra setup.

1npm install -g irgen
2irgen --version

Next Steps

If you want the mental model first, read Architecture and Policies. If you want to go target-by-target, start with Backend and Frontend. If you are here for documentation websites, jump to Static Site and React SSG.