# Elements Elements is the full stack for building web apps. It includes the build system, package installer, test runner, job runner, and Postgres, plus an application framework (`@elements/app`) with its own reactive html language. ## Start ```bash elements create myapp cd myapp elements start ``` That scaffolds a working app, starts a project server with continuous rebuild and hot reload, and serves it on http://localhost:4000. Two more commands cover most of a day's work: ```bash elements build # build once and report errors (-json for machine output) elements test # run the tests ``` ## What an app looks like A real-time comment list. A page, a template, and live updates across every connected browser. **app/pages/home/index.ts** ```typescript import { Request, Response, LiveTable } from "@elements/app"; import { Comment } from "./models"; import html from "./template"; const comments = new LiveTable({ realtime: true }); export default function route(req: Request, res: Response) { return new html({ comments }); } ``` **app/pages/home/template.html** ```html import { LiveTable } from "@elements/app"; import { Comment } from "./models"; function onAddComment(form: { text: string }, comments: LiveTable) { comments.insert({ text: form.text }, () => form.text = ""); } )> , private form: { text: string } = { text: "" })>
onAddComment(form, comments)}>
``` `LiveTable` reads the rows, renders them on the server, keeps the browser's copy in sync over Postgres NOTIFY/LISTEN, and applies `insert` optimistically so the UI updates before the round trip. ## How it works **The build loop.** A project server holds your project in memory and rebuilds as you save. `elements build` reads state that is already current instead of starting a build, so it returns immediately. **The package installer.** Installing is part of the build, not a separate tool you shell out to. The project server already holds the resolved dependency graph, so adding a package finishes in milliseconds. **The test runner.** Tests run as part of every build, so a failing test lands next to your compile errors. Each one runs in a transaction that rolls back, so tests never see each other's writes. **The app framework.** `@elements/app` gives you routing, rpc, sessions, channels, jobs, email, and LiveTable in one package. **The html language.** A reactive html language integrated into TypeScript's parser, binder, and type checker, so templates are type checked like the rest of your code. Templates take typed parameters and compose. They render on the server and attach in the browser. **Deploy.** Give Elements the IP address of an Ubuntu machine you own and it handles provisioning, load balancing, and TLS certificates. Deploys run peer to peer between your project server and the one on the target machine, so only changed files transfer and only changed files rebuild. ## The manual The manual ships inside the binary, so it always matches the version you have: ```bash elements man # the topic list elements man start # getting started elements man # read a page elements man -s # search ``` Every new project gets an `AGENTS.md` at its root, so an agent working inside a project has what it needs without fetching anything. ## More - Site: https://elements.dev - Courses: https://elements.dev/learn - Support: support@elements.dev