"Still here. Still running."
Every feature in RECALL must have a COBOL precedent.
Before adding any new language feature, keyword, convention, or file behaviour, ask:
"How did COBOL solve this?"
If COBOL solved it, RECALL adopts the same solution — adapted for the web, but faithful to the original intent. If COBOL didn't solve it, the feature needs extraordinary justification to exist.
This is not nostalgia. It is a constraint that keeps the language coherent, legible, and durable. COBOL's design decisions survived 60 years of production use. That is the standard RECALL holds itself to.
Early in development: how do we exclude component files from the build compiler?
The first instinct was modern convention: prefix with underscore (_nav.rcl).
But COBOL solved it with copybooks — .cpy files never compiled standalone,
only COPY'd into a program at compile time. The extension signals intent.
RECALL adopted this exactly: .rcpy files are never compiled by recall build.
They are only valid as targets of COPY FROM. The underscore convention was abandoned.
- Does COBOL have this concept? What is it called?
- Can the COBOL keyword or convention be used directly?
- If adapted, does the adaptation preserve the original intent?
- Does the feature add a new mental model, or extend an existing COBOL one?
- Would a COBOL developer recognise this immediately?
RECALL is a declarative web interface language written in COBOL-inspired syntax. It transpiles to self-contained, dependency-free HTML/CSS/JS files.
The guiding principle: the source is the artifact.
Every compiled RECALL page embeds its original .rcl source inside an HTML comment
block — so anyone who views page source sees nothing but COBOL divisions.
RECALL is not:
- A COBOL runtime or interpreter
- A wrapper around React, Alpine.js, or any JS framework
- A templating engine on top of HTML
- A joke
RECALL is:
- A domain-specific language for web interfaces
- Inspired by COBOL syntax — verbose, English-like, division-based
- A transpiler that outputs vanilla HTML + inline CSS + vanilla JS
- An AI-first language: the compiler is the documentation
Every structural decision in RECALL serves machine readability as much as human
readability. The intent is in the syntax — an AI can read, generate, modify, and
audit a .rcl file without an external schema because the language is self-describing.
The CLI reflects this: recall schema, recall explain, recall stats, recall check --inspect,
and recall fix all expose the compiler's knowledge as queryable output. The compiler
is the documentation. Drift between docs and implementation is structurally impossible.
filename.rcl — RECALL source file (compiled by recall compile / recall build)
filename.rcpy — RECALL copybook (never compiled standalone; included via COPY FROM)
filename.html — compiled output (self-contained)
Column formatting follows COBOL tradition:
- Column 7: indicator (
*= comment,-= continuation) - Columns 8–11: Area A (division/section headers)
- Columns 12–72: Area B (statements, values)
The compiler is column-lenient — it reads intent, not column positions.
Every RECALL program consists of five divisions, in order:
IDENTIFICATION DIVISION. — page metadata
ENVIRONMENT DIVISION. — rendering configuration and plugins
DATA DIVISION. — all data: content, state, loaded records
COMPONENT DIVISION. — reusable render components (optional)
PROCEDURE DIVISION. — the render pipeline
COMPONENT DIVISION is optional. All others are required.
Declares metadata about the page. Maps to <head> meta tags and the embedded
source header in compiled output.
IDENTIFICATION DIVISION.
PROGRAM-ID. MY-PORTFOLIO.
AUTHOR. JANE-DOE.
DATE-WRITTEN. 2026-04-03.
PAGE-TITLE. "Jane Doe — Systems Engineer".
DESCRIPTION. "Portfolio and contact page".
FAVICON. "/assets/icon.png".| Keyword | Required | Maps To |
|---|---|---|
| PROGRAM-ID | Yes | id on <body> |
| AUTHOR | No | <meta name="author"> |
| DATE-WRITTEN | No | <meta name="date"> |
| PAGE-TITLE | Yes | <title> |
| DESCRIPTION | No | <meta name="description"> |
| FAVICON | No | <link rel="icon"> |
Diagnostics: RCL-W03 fires when AUTHOR or DATE-WRITTEN are absent.
Declares global rendering settings, theme inheritance, and plugins.
ENVIRONMENT DIVISION.
COPY FROM "theme.rcpy".
CONFIGURATION SECTION.
VIEWPORT RESPONSIVE.
COLOR-MODE DARK.
FONT-PRIMARY "IBM Plex Mono".
FONT-SECONDARY "IBM Plex Sans".
LANGUAGE EN.
PALETTE SECTION.
01 COLOR-ACCENT PIC X(7) VALUE "#00FF41".
01 COLOR-BG PIC X(7) VALUE "#0A0A0A".
01 COLOR-TEXT PIC X(7) VALUE "#E0E0E0".
01 COLOR-MUTED PIC X(7) VALUE "#555555".
01 COLOR-BORDER PIC X(7) VALUE "#222222".Inlines a .rcpy copybook's ENVIRONMENT content into the current program.
Used for theme sharing across pages:
COPY FROM "theme.rcpy".
COPY FROM "@semanticintent/recall-ui/themes/dark.rcpy".Paths starting with @ resolve via node_modules walk-up from the source directory.
All other paths are relative to the .rcl source file.
Loads a plugin package that registers additional DISPLAY elements:
LOAD PLUGIN "@stratiqx/recall-components".Plugins must export a register(registry) function. Once loaded, plugin elements
are available in DISPLAY statements and validated by the type checker.
RESPONSIVE— adds standard responsive meta tagFIXED-WIDTH— locks to 1200px max-widthFULL-WIDTH— no max-width constraint
DARK— dark background defaultLIGHT— light background defaultSYSTEM— follows OS preference viaprefers-color-scheme
Declares all data — content, configuration, loaded records, and reusable shapes. Follows COBOL's level-number hierarchy.
DATA DIVISION.
WORKING-STORAGE SECTION.
01 HERO-HEADING PIC X(60) VALUE "BUILT DIFFERENT.".
01 CTA-LABEL PIC X(20) VALUE "VIEW WORK".
01 SHOW-BANNER PIC 9 VALUE 1.
ITEMS SECTION.
01 PROJECT-ITEMS.
05 PROJECT-1.
10 PROJ-TITLE PIC X(60) VALUE "RECALL TRANSPILER".
10 PROJ-DESC PIC X(200) VALUE "A COBOL-syntax web interface language.".
10 PROJ-TAG PIC X(20) VALUE "OPEN SOURCE".
10 PROJ-HREF PIC X(80) VALUE "https://github.com/semanticintent/recall-compiler".| Section | Purpose |
|---|---|
WORKING-STORAGE SECTION |
Scalar fields — single values used in DISPLAY statements |
ITEMS SECTION |
Group fields — collections iterated by CARD-LIST, TABLE, STAT-GRID etc. |
| PIC Clause | Type | Constraint |
|---|---|---|
PIC X(n) |
string | max n characters |
PIC X |
string | max 1 character |
PIC 9 |
numeric | 0 or 1 (boolean flag) |
PIC 9(n) |
numeric | n digits, no decimals |
PIC DATE |
date | ISO 8601 — YYYY-MM-DD |
PIC URL |
url | must begin http/https or / |
PIC PCT |
percent | numeric 0–100 |
| Level | Meaning |
|---|---|
| 01 | Top-level group / component |
| 05 | Collection item / child group |
| 10 | Field within a child group |
Fields may carry an intent note for AI tooling. The comment is metadata only — it has no effect on compiled output:
01 FETCH-SCORE PIC X(10) VALUE "2978"
COMMENT "CAL fetch score — higher is better; used in cascade header".
01 SECTOR-BADGE PIC X(30) VALUE "AI Infrastructure"
COMMENT "Short sector label displayed in hero badge and meta".COMMENT clauses appear in recall check --inspect output and in the fieldIntent
block of recall check --format json.
Multi-line string literals for long content values. The compiler auto-sizes the PIC X declaration with 20% headroom:
01 BODY-TEXT PIC X VALUE BLOCK.
This is a multi-line block of text.
It can span as many lines as needed.
Each line becomes part of the value joined with \n.
END VALUE.The PIC X is replaced at preprocess time with PIC X(n) sized to fit the
encoded content. RCL-W02 will not fire on auto-sized fields.
Loads structured data from an external file into the DATA DIVISION at compile time. Generated fields follow the declared shape and are available to DISPLAY statements.
LOAD FROM "data/dimensions.json"
INTO DIMENSIONS
AS RECORDS WITH FIELDS
DIM-NAME PIC X(30)
DIM-SCORE PIC 9(2)
DIM-LAYER PIC X(8)
DIM-EVID PIC X(400).
LOAD FROM "data/sources.csv"
INTO SOURCES
AS RECORDS WITH FIELDS
SRC-LABEL PIC X(60)
SRC-HREF PIC X(120).Generated group names follow the pattern GROUPNAME-N-FIELDNAME.
Run recall check <file> --inspect to see every generated DATA symbol.
Reusable group shapes — declare once, expand anywhere:
RECORD PROJECT-SHAPE WITH FIELDS
PROJ-TITLE PIC X(60)
PROJ-DESC PIC X(200)
PROJ-TAG PIC X(20)
PROJ-HREF PIC X(80).
ITEMS SECTION.
01 PROJECT-ITEMS.
05 PROJECT-1 LIKE PROJECT-SHAPE.
05 PROJECT-2 LIKE PROJECT-SHAPE.
05 PROJECT-3 LIKE PROJECT-SHAPE.Each LIKE expands to the full field set with naming GROUPNAME-N-FIELDNAME.
Unknown RECORD references emit RCL-019.
Defines reusable render components. Optional division — omit if not needed.
COMPONENT DIVISION.
DEFINE CASE-HERO.
ACCEPTS CASE-TITLE REQUIRED, CASE-SUBTITLE, SECTOR-BADGE, STATS.
DISPLAY SECTION ID "hero" WITH LAYOUT CENTERED WITH PADDING LARGE.
DISPLAY LABEL SECTOR-BADGE.
DISPLAY HEADING-1 CASE-TITLE.
DISPLAY PARAGRAPH CASE-SUBTITLE.
DISPLAY STAT-GRID STATS WITH COLUMNS 6.
STOP SECTION.
END DEFINE.Declares parameters a component expects. Parameters marked REQUIRED cause
RCL-017 if not provided at the call site:
ACCEPTS CASE-TITLE REQUIRED, CASE-SUBTITLE, SECTOR-BADGE.PROCEDURE DIVISION.
RENDER.
DISPLAY CASE-HERO
WITH DATA CASE-TITLE, CASE-SUBTITLE, SECTOR-BADGE, STATS.
STOP SECTION.
STOP RUN.The render pipeline. Sections execute top-to-bottom. Each section renders one
logical region of the page. Every section ends with STOP SECTION..
The division ends with STOP RUN..
PROCEDURE DIVISION.
RENDER-NAV.
DISPLAY NAVIGATION USING NAV-ITEMS
WITH STICKY YES
WITH LOGO "RECALL".
STOP SECTION.
RENDER-HERO.
DISPLAY SECTION ID "hero"
WITH LAYOUT CENTERED
WITH PADDING LARGE.
DISPLAY HEADING-1 HERO-HEADING
WITH STYLE MONO.
DISPLAY PARAGRAPH HERO-SUBTEXT
WITH COLOR MUTED.
DISPLAY BUTTON CTA-LABEL
ON-CLICK GOTO CTA-HREF.
STOP SECTION.
STOP RUN.DISPLAY is the primary rendering verb. Run recall schema for the full live
element registry with accepted clauses.
DISPLAY SECTION ID "name"
WITH LAYOUT [CENTERED | GRID | FLEX | STACK | SPLIT]
WITH COLUMNS [1-12]
WITH PADDING [NONE | SMALL | MEDIUM | LARGE]
WITH BACKGROUND [color-variable]
WITH MAX-WIDTH [NARROW | STANDARD | WIDE | FULL].
DISPLAY NAVIGATION USING [data-group]
WITH STICKY [YES | NO]
WITH LOGO "text".
DISPLAY FOOTER
WITH TEXT "content"
WITH ALIGN [LEFT | CENTER | RIGHT].DISPLAY HEADING-1 [variable | "literal"]
WITH STYLE [MONO | SANS | SERIF]
WITH COLOR [color-variable | COLOR-TEXT | COLOR-MUTED | COLOR-ACCENT]
WITH ALIGN [LEFT | CENTER | RIGHT]
WITH WEIGHT [NORMAL | BOLD | LIGHT].
DISPLAY HEADING-2 [variable | "literal"].
DISPLAY HEADING-3 [variable | "literal"].
DISPLAY PARAGRAPH [variable | "literal"]
WITH COLOR [color-variable | COLOR-MUTED | COLOR-TEXT].
DISPLAY LABEL [variable | "literal"].
DISPLAY CODE-BLOCK [variable | "literal"]
WITH LANGUAGE "cobol".
DISPLAY CALLOUT [variable | "literal"]
WITH STYLE [INFO | WARNING | SUCCESS].DISPLAY BUTTON [variable | "literal"]
ON-CLICK GOTO [href | section-id]
WITH STYLE [PRIMARY | GHOST | OUTLINE]
WITH SIZE [SMALL | MEDIUM | LARGE].
DISPLAY LINK [variable | "literal"]
HREF [variable | "literal"]
WITH TARGET [SELF | BLANK].
DISPLAY INPUT ID "name"
WITH LABEL "label text"
WITH TYPE [TEXT | EMAIL | NUMBER | TEXTAREA]
WITH PLACEHOLDER "hint text".DISPLAY CARD-LIST USING [data-group]
WITH STYLE [BORDERED | FILLED | MINIMAL]
WITH COLUMNS [1 | 2 | 3]
WITH HOVER-LIFT [YES | NO].
DISPLAY TABLE [data-group]
WITH COLUMNS "Col1, Col2, Col3"
WITH STRIPED [YES | NO].
DISPLAY STAT-GRID [data-group]
WITH COLUMNS [2 | 3 | 4 | 6].
DISPLAY TIMELINE USING [data-group].
DISPLAY IMAGE SRC [variable | "path"]
WITH ALT "description"
WITH SIZE [FULL | HALF | QUARTER | AUTO].
DISPLAY DIVIDER
WITH STYLE [SOLID | DASHED | BLANK]
WITH SPACING [SMALL | MEDIUM | LARGE].
DISPLAY TABS USING [data-group].
DISPLAY SIDEBAR USING [data-group].
DISPLAY BANNER [variable | "literal"]
WITH STYLE [ACCENT | MUTED].* This is a full-line comment
* Indented comments are also validAll comments are preserved in compiled output inside the embedded source block.
See also: the COMMENT clause on DATA fields (§6) — that is field-level intent
metadata, distinct from source comments.
Every .rcl file compiles to a single .html file:
<!--
*==============================================*
* RECALL COMPILED OUTPUT *
* SOURCE: portfolio.rcl *
* COMPILED: 2026-04-03T14:32:00Z *
* RECALL VERSION: 0.8.0 *
*==============================================*
[FULL .rcl SOURCE PRESERVED HERE]
*==============================================*
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...</title>
<style>/* All styles inline */</style>
</head>
<body>
<!-- Rendered from PROCEDURE division -->
<script>/* All interactivity inline */</script>
</body>
</html>The rule: zero <link rel="stylesheet"> to external files.
Zero <script src="..."> to CDNs or frameworks. One file. Always.
recall compile <file> # transpile .rcl to .html
recall compile <file> -o <dir> # specify output directory
recall build <dir> # compile all .rcl files in a directory
recall build <dir> -o <out> # specify output directoryrecall check <file> # text diagnostics — all errors and warnings
recall check <file> --strict # warnings promoted to errors (CI mode)
recall check <file> --format json # machine-readable diagnostic output
recall check <file> --quiet # no output — exit codes only
recall check <file> --inspect # show all DATA symbols from LOAD FROMExit codes: 0 = clean · 1 = errors · 2 = warnings only
recall schema # human-readable element + type registry
recall schema --json # machine-readable (AI can query live contracts)
recall explain RCL-002 # human-readable error code entry
recall explain RCL-002 --json # machine-readable
recall explain --list # all codes with summaries
recall explain --list --json # machine-readable full list
recall stats <file> # orientation snapshot: field counts, groups, warnings
recall stats <file> --json # machine-readable summary
recall history <file> # DATA field diff: HEAD~1 → HEAD (requires git)
recall history <file> --commits 3 # look back N commits
recall history <file> --json # machine-readable diff
recall fix <file> --dry-run # preview auto-fixable issues without writing
recall fix <file> --yes # apply: PIC resize (RCL-002), AUTHOR (RCL-W03), empty sections (RCL-W04)RECALL uses a structured diagnostic system with stable error codes (RCL-001 through RCL-W05). Every error names what is wrong, why, and how to fix it.
Full reference: docs/ERROR-REFERENCE.md
Implementation status: docs/STRICT-MODE-SPEC.md
Live query: recall explain --list
- The source is the artifact. The
.rclfile is always embedded in the output. - No dependencies. Output is a single HTML file. Always.
- Verbose is a feature. COBOL's English-like verbosity is intentional legibility.
- View source is the experience. Discovering COBOL in a web page's source is the point.
- Legacy forward. This is not nostalgia. It is a philosophy about what lasts.
- The compiler is the documentation.
recall schema,recall explain, andrecall checkexpose the compiler's live contracts — drift between docs and implementation is structurally impossible. - Explicit over implicit. Every place RECALL felt effortless was a place where intent was declared. Every place friction appeared was where the compiler accepted ambiguity silently.
RECALL — What COBOL Would Have Built for the Web. Still here. Still running.