{"id":51317578,"url":"https://github.com/arc-language/arc-web","last_synced_at":"2026-07-01T09:01:14.585Z","repository":{"id":361170109,"uuid":"1248374169","full_name":"arc-language/arc-web","owner":"arc-language","description":"Arc — a new language for the web. Compiles to optimal HTML, CSS, and JS. Zero runtime, zero dependencies.","archived":false,"fork":false,"pushed_at":"2026-05-29T09:49:06.000Z","size":12897,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-29T13:26:55.450Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/arc-language/arc-web#readme","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arc-language.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":null},"created_at":"2026-05-24T15:02:48.000Z","updated_at":"2026-05-29T09:49:16.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/arc-language/arc-web","commit_stats":null,"previous_names":["arc-language/arc-web"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/arc-language/arc-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arc-language","download_url":"https://codeload.github.com/arc-language/arc-web/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34999792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-01T02:00:05.325Z","response_time":130,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-01T09:01:13.589Z","updated_at":"2026-07-01T09:01:14.568Z","avatar_url":"https://github.com/arc-language.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Arc\n\n### A new language for the web. Zero dependencies. Zero runtime. Perfect HTML.\n\n\u003cbr\u003e\n\n[![Tests](https://img.shields.io/badge/tests-1150%20passing-brightgreen?style=flat-square)](#)\n[![Coverage](https://img.shields.io/badge/coverage-95.85%25-brightgreen?style=flat-square)](#)\n[![Build](https://img.shields.io/badge/build-0.11s-brightgreen?style=flat-square)](#)\n[![Bundle](https://img.shields.io/badge/output-1688%20B%20Brotli-blue?style=flat-square)](#)\n[![Dependencies](https://img.shields.io/badge/runtime%20deps-0-success?style=flat-square)](#)\n[![Node](https://img.shields.io/badge/node-%E2%89%A520-blue?style=flat-square)](#)\n[![License](https://img.shields.io/badge/license-MIT-blue?style=flat-square)](#)\n\n\u003cbr\u003e\n\n**Write less. Ship faster. Load instantly.**\n\nArc compiles `.arc` source into hand-tuned HTML, CSS, and JavaScript.\nNo framework runtime ships to the browser. Ever.\n\n[Why Arc](#-why-arc) • [Quick Start](#-quick-start) • [Syntax](#-syntax-tour) • [Benchmarks](#-benchmarks) • [Architecture](#-architecture) • [Features](#-feature-matrix) • [**Docs**](docs/)\n\n\u003c/div\u003e\n\n---\n\n## ⚡ Why Arc\n\n| | React + Next.js | Astro | **Arc** |\n|---|:---:|:---:|:---:|\n| **Static page (Brotli)** | 200 KB | 1.8 KB | **1.7 KB** |\n| **Dashboard client JS** | 225 KB | 0 B† | **225 B** |\n| **Build time** | 14 s | 1.5 s | **0.11 s** |\n| **Backend req/s (GET /)** | 5,658 | n/a | **56,856** |\n| **Runtime deps to install** | hundreds | tens | **zero** |\n| **Auto sitemap / `_headers`** | plugin | plugin | **built-in** |\n| **Image pipeline (AVIF + WebP)** | plugin | plugin | **built-in** |\n| **Edge `@live` rendering** | manual | manual | **built-in** |\n\n\u003csub\u003e† Astro ships 0 JS only when no client interactivity is present. Arc's 225 B includes a working `@state` tab toggle.\u003c/sub\u003e\n\n---\n\n## 🚀 Quick Start\n\n```bash\n# Install\nnpm install -g arc-web\n\n# Create a new project\narc new my-app\ncd my-app\n\n# Build\narc build              # one page\narc build-site         # multi-page site\n\n# Develop (with live reload)\narc dev\n```\n\nA first page:\n\n```arc\npage \"Hello, Arc\"\n  main\n    heading \"Welcome\"\n    text \"Built from scratch. Zero dependencies. Zero runtime.\"\n```\n\n`arc build` produces:\n\n```\ndist/\n├── index.html      891 B  ←  ships to the browser\n└──                 0 B JS ←  none needed\n```\n\n---\n\n## ✍ Syntax Tour\n\nArc has four block types — `page`, `widget`, `design`, and `import` — and four data contexts: `@build`, `@state`, `@live`, `@realtime`.\n\n### Static page (zero JS)\n\n```arc\npage \"Blog\"\n  @build const posts = await fetch(\"https://cms.example/posts\")\n\n  header\n    heading \"My Blog\"\n    text \"{posts.length} posts\"\n\n  main\n    for post in posts\n      card\n        heading \"{post.title}\"\n        text \"{post.excerpt}\"\n```\n\nThe compiler fetches `posts` **at build time** and inlines the data into HTML. The browser gets static markup. **Zero JS. Zero runtime fetch.**\n\n### Reactive client state\n\n```arc\npage \"Counter\"\n  @state let count = 0\n\n  main\n    card\n      heading \"Counter: {count}\"\n      row\n        button on:click={ @count -= 1 } \"−\"\n        button on:click={ @count += 1 } \"+\"\n      text \"Doubled: {count * 2}\"\n```\n\nArc emits ~300 bytes of direct DOM-update JS. No virtual DOM, no diff, no framework.\n\n### Edge-rendered dashboard\n\n```arc\npage \"Dashboard\"\n  @server fn getUser(id: String) -\u003e { name: String, role: String }\n    const r = await fetch(\"/api/me\", { headers: { cookie: @session.cookie } })\n    return await r.json()\n\n  @server fn getStats() -\u003e { users: Number, revenue: Number }\n    const r = await fetch(\"/api/stats\")\n    return await r.json()\n\n  @live let user = getUser(\"current\")\n  @live let stats = getStats()\n\n  header\n    heading \"Welcome back, {user.name}\"\n  main\n    row\n      card\n        heading \"Users\"\n        text \"{stats.users}\"\n      card\n        heading \"Revenue\"\n        text \"${stats.revenue}\"\n```\n\nArc generates a streaming edge function (Cloudflare Workers / Deno Deploy / Bun / Node). One request → server resolves `@live` in parallel → streams HTML with data inline. **No client fetch, no loading flash.**\n\n### Design vocabulary (compiles to scoped CSS)\n\n```arc\npage \"Card\"\n  card \"Hello\"\n\n  design\n    card\n      p: 24px\n      radius: 12px\n      bg: #fff\n      shadow: md\n      hover: { shadow: lg }\n      @mobile { p: 16px }\n      @dark { bg: #1a1a1a }\n```\n\nCompiles to scoped CSS classes — no specificity wars, no leak. Auto `prefers-reduced-motion`, auto `:focus-visible`, full responsive primitives.\n\n### Image pipeline (built-in)\n\n```arc\npage \"Hero\"\n  header\n    img src=\"hero.jpg\" alt=\"Hero\"   // → \u003cpicture\u003e with AVIF + WebP + JPEG\n                                    // → fetchpriority=\"high\" (auto, above-fold)\n                                    // → width/height (auto, from image header)\n                                    // → dominant-color background fill (auto)\n  section\n    img src=\"card.jpg\" alt=\"Card\"   // → loading=\"lazy\" decoding=\"async\" (auto, below-fold)\n```\n\nNo annotations needed. The compiler reads the image at build time, picks formats, generates srcset, classifies above/below fold from AST position.\n\n---\n\n## 📊 Benchmarks\n\nMeasured on Linux 6.8 / Node 24 / Chrome 149. Lighthouse mobile profile (Slow 4G + 4× CPU). Brotli level 11. Full data: [`arc-bench/RESULTS.md`](https://github.com/arc-language/arc-web-bench/blob/main/RESULTS.md).\n\n### Static docs site at full SEO parity (1 page, 20 sections)\n\n```\n                  Brotli bytes shipped to browser\n                  ─────────────────────────────────────────\n  Arc          ▇▇                              1,688 B  ← winner\n  Vanilla      ▇▇                              1,750 B\n  Astro        ▇▇                              1,794 B\n  Next.js      ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇    200,000 B\n```\n\n| Stack    | Lighthouse | LCP    | FCP    | Brotli  | Build  |\n| -------- | :--------: | -----: | -----: | ------: | -----: |\n| **Arc**  |  **100**   | **901 ms** | **812 ms** | **1.7 KB** | **0.11 s** |\n| Vanilla  |    100     | 1051 ms | 901 ms | 1.7 KB  | 0.02 s |\n| Astro    |    100     |  901 ms | 870 ms | 1.8 KB  | 1.47 s |\n| Next.js  |     93     | 3148 ms | 1038 ms | 200 KB | 14.05 s |\n\n### Dynamic dashboard with real 50 ms API latency\n\n```\n                  Largest Contentful Paint\n                  ─────────────────────────────\n  Arc          ▇▇▇▇▇▇▇▇                  804 ms ← winner (tie)\n  Astro        ▇▇▇▇▇▇▇▇                  804 ms\n  Vanilla      ▇▇▇▇▇▇▇▇▇                 905 ms  (ships empty shell)\n  Next.js      ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇        1657 ms\n```\n\n| Stack    | LCP    | FCP    | Client JS (Brotli) |\n| -------- | -----: | -----: | -----------------: |\n| **Arc**  | **804 ms** | **645 ms** | **225 B**          |\n| Astro    | 804 ms | 677 ms |  0 B (no interactivity) |\n| Vanilla  | 905 ms | 905 ms | 340 B              |\n| Next.js  | 1657 ms | 662 ms | 193 KB             |\n\n### Multi-page docs (20 routes, per page)\n\n```\n                  Brotli bytes per page (cold cache)\n                  ──────────────────────────────────────\n  Vanilla      ▇▇▇▇▇▇                     992 B\n  Arc          ▇▇▇▇▇▇                   1,021 B  ← within 29 B of Vanilla\n  Astro        ▇▇▇▇▇▇▇▇▇                1,475 B\n  Next.js      ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇      3,176 B  (+ 225 KB framework)\n```\n\n### Build time (median of 3 runs)\n\n```\n  Arc           0.11 s   ▮\n  Astro         1.47 s   ▮▮▮▮▮▮▮▮▮▮▮▮▮\n  Next.js      14.05 s   ▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮\n```\n\n**Arc is 10–250× faster to build than its competitors.**\n\n### Full-stack server throughput (HTML page + JSON API, same process)\n\nMeasured on Linux 6.8 / Bun 1.x / Node.js 24. autocannon: 100 connections, 10 s, pipelining=1.\n\n#### GET / — pre-compiled static HTML\n\n```\n                  requests/second (higher is better)\n                  ───────────────────────────────────────────────────────────\n  Arc lean     ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇   56,856  ← winner\n  Elysia (Bun) ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇                          30,351\n  Hono (Bun)   ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇                          29,992\n  Fastify      ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇                               24,345\n  Next.js      ▇▇▇▇▇                                               5,658\n```\n\n#### POST /api/echo — JSON request/response\n\n```\n                  requests/second (higher is better)\n                  ───────────────────────────────────────────────────────────\n  Arc lean     ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇                41,178  ← winner\n  Hono (Bun)   ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇                  38,717\n  Elysia (Bun) ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇                      33,398\n  Fastify      ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇                                    17,420\n  Next.js      ▇▇▇▇                                                 4,032\n```\n\n| Framework | GET / | POST /echo | p99 GET / | p99 POST |\n| --- | ---: | ---: | ---: | ---: |\n| **Arc lean (Bun)** | **56,856** | **41,178** | **5 ms** | **6 ms** |\n| Hono (Bun) | 29,992 | 38,717 | 9 ms | 5 ms |\n| Elysia (Bun) | 30,351 | 33,398 | 11 ms | 9 ms |\n| Fastify (Node) | 24,345 | 17,420 | 9 ms | 16 ms |\n| Next.js (Node) | 5,658 | 4,032 | 70 ms | 53 ms |\n\nArc's `GET /` is **pre-compiled to a `Response` constant at build time** — zero per-request HTML work.\nThe POST echo path uses **raw `ArrayBuffer` passthrough** — zero JSON parse/stringify.\n\n---\n\n## 🏛 Architecture\n\n```\n                         ┌──────────────────┐\n                         │   index.arc      │\n                         └─────────┬────────┘\n                                   │\n                  ┌────────────────┼────────────────┐\n                  ▼                ▼                ▼\n              ┌───────┐       ┌───────┐       ┌───────┐\n              │ Lexer │  ──▶  │Parser │  ──▶  │  AST  │\n              └───────┘       └───────┘       └───┬───┘\n                                                  │\n                  ┌───────────────────────────────┼───────────────────────────────┐\n                  ▼                               ▼                               ▼\n            ┌──────────┐                   ┌──────────┐                    ┌──────────┐\n            │ @build   │                   │ Optimizer│                    │  Checker │\n            │ executor │                   │  (DCE,   │                    │  (types, │\n            │ (fetch,  │                   │  unroll, │                    │   a11y,  │\n            │  readFile│                   │  inline) │                    │   etc.)  │\n            └─────┬────┘                   └─────┬────┘                    └──────────┘\n                  │                              │\n                  └────────────┬─────────────────┘\n                               ▼\n                ┌──────────────────────────────┐\n                │      Image Pipeline           │\n                │  (sharp: AVIF/WebP/JPEG,      │\n                │   layout-aware srcset,        │\n                │   above-fold detection,       │\n                │   dominant color, dedup)      │\n                └──────────────┬───────────────┘\n                               │\n              ┌────────────────┼────────────────┬─────────────────┐\n              ▼                ▼                ▼                 ▼\n          ┌───────┐        ┌───────┐        ┌───────┐         ┌─────────┐\n          │ HTML  │        │  CSS  │        │  JS   │         │  Edge   │\n          │emitter│        │emitter│        │emitter│         │renderer │\n          └───┬───┘        └───┬───┘        └───┬───┘         └────┬────┘\n              │                │                │                  │\n              └──────┬─────────┘                │                  │\n                     ▼                          │                  │\n              ┌────────────┐                    │                  │\n              │ Post-Pass  │                    │                  │\n              │ (CSS dedup,│                    │                  │\n              │  minify,   │                    │                  │\n              │  critical, │                    │                  │\n              │  prefetch, │                    │                  │\n              │  view-tx)  │                    │                  │\n              └─────┬──────┘                    │                  │\n                    ▼                           ▼                  ▼\n              ┌──────────────────────────────────────────────────────────┐\n              │  dist/                                                    │\n              │  ├── *.html         (per page, minified)                  │\n              │  ├── shared.\u003csha\u003e.css   (multi-page CSS dedup)            │\n              │  ├── app.js         (only if @state used)                 │\n              │  ├── *.{avif,webp,jpg}  (content-hashed image variants)   │\n              │  ├── sitemap.xml    (auto-generated from canonical meta)  │\n              │  ├── robots.txt     (auto-generated)                      │\n              │  ├── _headers       (Cloudflare/Netlify cache + CSP)      │\n              │  └── _arc/                                                 │\n              │      ├── functions.js   (@server edge functions)          │\n              │      └── renderer.js    (@live streaming edge worker)     │\n              └──────────────────────────────────────────────────────────┘\n```\n\n---\n\n## 🧩 Feature Matrix\n\n### Language\n\n| Feature | Status |\n| --- | :---: |\n| `page`, `widget`, `design`, `import` blocks | ✅ |\n| `@build` — compile-time data inlining (fetch, readFile, JSON, ...) | ✅ |\n| `@state` — reactive client variables with direct DOM updates | ✅ |\n| `@computed` — derived values, recomputed only when deps change | ✅ |\n| `@live` — edge-rendered server values, streamed in initial HTML | ✅ |\n| `@realtime` — WebSocket/SSE channels with auto-reconnect | ✅ |\n| `@server` — auto-deployed edge functions, called from client via ADP binary | ✅ |\n| `@worker` — Web Worker background tasks | ✅ |\n| `match`, `for ... in`, `unless`, `until`, pipeline operator | ✅ |\n| Exhaustive pattern matching with type guards | ✅ |\n| No `var`, no `null` (only `none`), strict `==` only | ✅ |\n| `bind:value`, `on:click` reactive attributes | ✅ |\n\n### Output\n\n| Feature | Status |\n| --- | :---: |\n| HTML emission with semantic tags + scoped CSS classes | ✅ |\n| CSS scoping via per-component hash | ✅ |\n| Tree-shaken base utility classes (only emit when referenced) | ✅ |\n| Critical CSS inlining (below 14 KB threshold) | ✅ |\n| CSS minification (whitespace, comments, `;}`) | ✅ |\n| HTML minification (whitespace between tags) | ✅ |\n| Multi-page shared CSS dedup (`arc build-site`) | ✅ |\n| Direct DOM update JS (no VDOM, no framework) | ✅ |\n| ADP binary protocol (3× smaller, 10× faster decode than JSON) | ✅ |\n| Source maps for `.arc` source | ✅ |\n| HTML streaming for `@live` (head flushed before data resolves) | ✅ |\n\n### SEO + Production\n\n| Feature | Status |\n| --- | :---: |\n| Open Graph + Twitter Card meta auto-emission | ✅ |\n| JSON-LD structured data (`Article`, `WebSite`, etc.) | ✅ |\n| Canonical, robots, keywords, author meta | ✅ |\n| Auto `sitemap.xml` (from canonical meta + lastmod/priority/changefreq) | ✅ |\n| Auto `robots.txt` (with sitemap reference) | ✅ |\n| Auto `_headers` manifest (Cloudflare Pages / Netlify) | ✅ |\n| `Link:` preload header for shared CSS (enables 103 Early Hints) | ✅ |\n| `Cache-Control: immutable` for content-hashed assets | ✅ |\n| CSP delivered via header when `_headers` present | ✅ |\n| `\u003clink rel=\"prefetch\"\u003e` for same-site `\u003ca\u003e` targets (multi-page) | ✅ |\n| `\u003cmeta name=\"view-transition\" content=\"same-origin\"\u003e` injection | ✅ |\n| Skip-link + sr-only utilities (a11y default, tree-shaken when unused) | ✅ |\n| `prefers-reduced-motion` honored globally | ✅ |\n| Auto `aria-*`, `loading=\"lazy\"`, `decoding=\"async\"`, `fetchpriority=\"high\"` | ✅ |\n\n### Image pipeline\n\n| Feature | Status |\n| --- | :---: |\n| Build-time AVIF + WebP + original transcoding (via `sharp`) | ✅ |\n| Smart format selection (auto-drop AVIF when not 20% smaller than WebP) | ✅ |\n| `meta.imageFormats = [\"webp\",\"jpg\"]` opt-out | ✅ |\n| Layout-aware srcset (only widths the design actually needs) | ✅ |\n| AST-derived above-the-fold detection (auto `fetchpriority=\"high\"`) | ✅ |\n| Dominant-color background fill (no gray flash during load) | ✅ |\n| Content-hash dedup (same logo across 20 pages → one file) | ✅ |\n| Graceful fallback when `sharp` is not installed | ✅ |\n\n### Edge runtime\n\n| Feature | Status |\n| --- | :---: |\n| Cloudflare Workers (WinterCG fetch handler) | ✅ |\n| Deno Deploy | ✅ |\n| Bun HTTP server | ✅ |\n| Node.js HTTP server | ✅ |\n| Parallel `@live` resolution via `Promise.all` | ✅ |\n| Streaming `Response(ReadableStream)` — head flushed before data | ✅ |\n| `@session` context, validated at edge boundary | ✅ |\n| Security headers (CSP, X-Frame-Options, Referrer-Policy, etc.) | ✅ |\n\n---\n\n## 🧠 The Four Data Contexts\n\nEvery piece of data in a web app has an execution context. Arc names all four:\n\n```\n┌─────────────┬────────────────────────────────────────────────────────────┐\n│ @build      │  COMPILE-TIME — runs once during `arc build`, data inlined  │\n│             │  into HTML. Zero runtime cost. Zero server cost.             │\n│             │  Use for: blog posts, docs content, marketing copy.          │\n├─────────────┼────────────────────────────────────────────────────────────┤\n│ @state      │  CLIENT — lives in the browser, direct DOM updater on        │\n│             │  change. Works offline. Zero server cost.                    │\n│             │  Use for: form state, UI toggles, counters, local prefs.     │\n├─────────────┼────────────────────────────────────────────────────────────┤\n│ @live       │  EDGE — rendered server-side at request time, streamed as   │\n│             │  HTML. One round trip total. No flash of empty content.     │\n│             │  Use for: user dashboards, personalized pages, auth-gated.  │\n├─────────────┼────────────────────────────────────────────────────────────┤\n│ @realtime   │  STREAM — WebSocket/SSE channel, live updates pushed to     │\n│             │  the DOM via ADP binary frames. Auto-reconnect handled.     │\n│             │  Use for: chat, collaborative editing, live feeds.          │\n└─────────────┴────────────────────────────────────────────────────────────┘\n```\n\nEvery React hook, every Next.js data function, every tRPC call — all of them fall into one of these four buckets. Arc just names them.\n\n---\n\n## 📦 Project Structure\n\n```\narc/\n├── src/\n│   ├── cli.js              # build, build-site, dev, check, new, deploy commands\n│   ├── lexer.js            # tokenizer\n│   ├── parser.js           # recursive descent → AST\n│   ├── checker.js          # semantic + a11y checks\n│   ├── build-exec.js       # @build evaluation (fetch, readFile, etc.)\n│   ├── optimizer.js        # dead code elimination, static folding\n│   ├── img-pipeline.js     # image transcoding + smart format selection\n│   ├── post.js             # critical CSS, minification, resource hints\n│   ├── emitters/\n│   │   ├── html.js\n│   │   ├── css.js\n│   │   ├── js.js                       # direct DOM updater emitter\n│   │   ├── server.js                   # @server fn → edge function\n│   │   ├── site-meta.js                # sitemap.xml + robots.txt\n│   │   └── headers-manifest.js         # _headers (Cloudflare/Netlify)\n│   ├── edge/renderer.js                # @live streaming edge worker generator\n│   └── realtime/client.js              # @realtime WebSocket client generator\n├── adp/\n│   ├── encoder.js          # Arc Data Protocol — server-side\n│   └── decoder.js          # ADP decoder — browser, \u003c 1 KB gzipped\n├── stdlib/                 # Arc standard library (written in Arc)\n├── examples/\n│   ├── hello/              # static page, 0 JS\n│   ├── counter/            # @state reactive\n│   ├── blog/               # @build data inlining\n│   ├── dashboard/          # @server functions\n│   ├── live/               # @live edge rendering\n│   ├── chat/               # @realtime WebSocket\n│   └── patterns/           # native patterns (modal, tooltip, accordion)\n└── tests/                  # 1071 tests, 95.85% line coverage\n```\n\n---\n\n## 🔬 Compile Pipeline\n\n```mermaid\nflowchart LR\n    A[index.arc] --\u003e B[Lexer]\n    B --\u003e C[Parser]\n    C --\u003e D[Checker]\n    D --\u003e E[\"@build exec\"]\n    E --\u003e F[Optimizer]\n    F --\u003e G[Img Pipeline]\n    G --\u003e H[HTML emit]\n    G --\u003e I[CSS emit]\n    F --\u003e J[JS emit]\n    F --\u003e K[Edge renderer]\n    H --\u003e L[Post-pass]\n    I --\u003e L\n    L --\u003e M[dist/]\n    K --\u003e M\n    J --\u003e M\n```\n\n---\n\n## 🎯 Design Principles\n\n1. **Zero runtime cost.** No framework ships to the browser. The compiler does the work once; the user pays nothing per visit.\n2. **The compiler sees everything.** Knowing the full program at build time enables optimizations no runtime framework can match (perfect tree-shaking, dependency graph, critical CSS, image format choice).\n3. **Defaults that are correct, not safe.** `prefers-reduced-motion` on. Skip links on. CSP on. `loading=\"lazy\"` on below-fold images. Opt out per page, not opt in.\n4. **Boring output.** Arc emits HTML/CSS/JS that any browser, screen reader, SEO crawler, or browser DevTools understands. No WASM, no canvas, no custom protocol.\n5. **No dependencies.** Arc's runtime deps are zero. The compiler itself is pure Node — `sharp` is the only optional dep for the image pipeline.\n\n---\n\n## 📚 Examples\n\n| Example | Demonstrates | Output |\n|---|---|---|\n| [`examples/hello`](examples/hello) | Static page, semantic HTML | 891 B HTML, 0 JS |\n| [`examples/counter`](examples/counter) | `@state` reactivity | 478 B HTML, 474 B JS |\n| [`examples/blog`](examples/blog) | `@build` data inlining | All posts inline, 0 JS |\n| [`examples/dashboard`](examples/dashboard) | `@server` + ADP binary | Edge function + 225 B client |\n| [`examples/live`](examples/live) | `@live` streaming render | Pre-rendered HTML, no flash |\n| [`examples/chat`](examples/chat) | `@realtime` WebSocket | Binary frames, auto-reconnect |\n| [`examples/patterns`](examples/patterns) | Native modal/tooltip/accordion | 0 JS using `\u003cdialog\u003e`/Popover API |\n\n---\n\n## 🔧 CLI Reference\n\n```bash\narc build [dir]            # Single-page build → dist/index.html\narc build-site [dir]       # Multi-page build with shared CSS, sitemap, _headers\narc build-server [dir]     # Full-stack Bun server → dist/server.js\narc build-server --watch   # Rebuild on any .arc change (hot server dev)\narc dev [dir]              # Watch mode with live reload\narc check [files…]         # Type + a11y check without emitting\narc new \u003cname\u003e             # Scaffold a project (--template default|counter|blog)\narc deploy [dir] [--target cloudflare|deno|bun|node]\n```\n\n---\n\n## 🤖 LLM Integration\n\nArc is the first web framework with first-class LLM tooling: a 22-skill bundle that works with Claude Code, Cursor, Cline, Aider, Continue, GitHub Copilot, ChatGPT, Claude.ai, and any other code-aware LLM.\n\nEvery authoring skill ends with a **universal verification checklist** (`arc-self-verify`) covering: simplicity, time/space complexity, Core Web Vitals impact, bundle bytes, reversibility, accessibility, and type safety.\n\n| Tool | Install command |\n| --- | --- |\n| **Claude Code** | works automatically — skills ship at `.claude/skills/` in this repo |\n| **Cursor** | `cp node_modules/arc-web/editor-extensions/llm-skills/all.md .cursorrules` |\n| **Cline / VS Code** | paste `all.md` into Cline → Settings → Custom Instructions |\n| **Aider** | `aider --read node_modules/arc-web/editor-extensions/llm-skills/all.md` |\n| **Continue.dev** | reference in `~/.continue/config.json` system message |\n| **GitHub Copilot** | `cp ... .github/copilot-instructions.md` |\n| **ChatGPT / Claude.ai** | paste `all.md` into Custom Instructions / Project knowledge |\n\nFull integration guides: [`editor-extensions/llm-skills/INSTALL/`](editor-extensions/llm-skills/INSTALL/).\nSkill catalog: [`editor-extensions/llm-skills/SKILLS.md`](editor-extensions/llm-skills/SKILLS.md).\nSingle-file bundle (128 KB / ~32K tokens): [`editor-extensions/llm-skills/all.md`](editor-extensions/llm-skills/all.md).\n\n## 📖 Full Documentation\n\nExtensive reference + recipes + internals at [`docs/`](docs/). Highlights:\n\n- **Onramp**: [Installation](docs/getting-started/installation.md) → [Your First Page](docs/getting-started/first-page.md) → [Core Concepts](docs/getting-started/concepts.md)\n- **Language reference**: [Syntax with EBNF](docs/language/syntax.md), [Data Contexts](docs/language/data-contexts.md), [Design Vocabulary](docs/language/design-vocabulary.md)\n- **Migration guides**: [from React](docs/guides/migrating-from-react.md), [from Astro](docs/guides/migrating-from-astro.md), [from Vanilla HTML](docs/guides/migrating-from-vanilla.md)\n- **Recipes**: [Auth Flow](docs/recipes/auth-flow.md), [Forms](docs/recipes/forms.md), [Routing](docs/recipes/routing.md), [Dark Mode](docs/recipes/dark-mode.md), [API Fetching](docs/recipes/api-fetching.md)\n- **For LLMs**: [`docs/llms.txt`](docs/llms.txt) (index) or [`docs/llms-full.txt`](docs/llms-full.txt) (all docs concatenated)\n\n## 🤝 Contributing\n\nArc is small (~5,200 lines of pure Node, zero deps). Every PR runs:\n- 1,150 tests with the built-in Node test runner\n- 95.85% line coverage, 86.52% branch, 91.59% function\n- Lighthouse-100 verification on the example sites\n\nRead [Contributing](docs/internals/contributing.md) for the workflow.\n\n---\n\n## 📄 License\n\nMIT. See [LICENSE](LICENSE).\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\u003csub\u003e\n\u003cstrong\u003eBuilt from scratch.\u003c/strong\u003e Zero dependencies. Zero runtime. Perfect HTML.\u003cbr\u003e\nMade with ☕ and a strong dislike of 225 KB JavaScript bundles.\n\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farc-language%2Farc-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farc-language%2Farc-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farc-language%2Farc-web/lists"}