---
title: "Get Started with an Empty App"
author: "@chris"
author_url: https://elements.dev/u/chris
published: 2026-10-02T15:11:56.240Z
url: https://elements.dev/feed/01a0fd2b-f4af-7e04-932d-0b5ee8e1b108
kind: lesson
format: article
---

# Get Started with an Empty App

by [@chris](https://elements.dev/u/chris) · 2026-10-02

## Description

Install Elements and start your own app, with a database and tests already set up.

One paste into an AI agent installs Elements and gives you a new app of your
own, running on your machine with a database, tests and live reload already
set up.

## 1. Get an AI agent

Use the one you already have. If you need one:

- [Claude](https://claude.ai/download), with Claude Code
- [Codex](https://openai.com/codex)
- [Cursor](https://cursor.com/download)

In a desktop app, open the Code tab, not the general chat. The agent needs to
run commands on your machine.

## 2. Paste this prompt

```prompt
```

It installs Elements, creates an app named `myapp` and starts it. The installer
needs no admin privileges. It writes to `~/elements`, adds a line to your shell
profile, and installs the extension for each editor it finds.

### Or use the terminal

Install Elements, once per machine:

```terminal step=install
```

Create an app, once per project:

```terminal step=create
```

Start your app:

```terminal step=start
```

`elements start` makes sure the project server is running, then starts your
app. The project server runs in the background while you work and holds your
project's build in memory. Each time you save a file, it brings the build up to
date in milliseconds: it compiles your code, applies migrations to the database and
runs the tests your change touched. Your terminal, your editor and your agent all
connect to the same server. All three see the same errors, and the server
runs their commands one after another, so a build, an install and a test run
never step on each other. Your app runs as its own program, and each save reloads it in place, without a restart.

## 3. Open the app

The app runs at `http://localhost:4000`. Where it opens depends on how you
started it. Claude's desktop app and the agent editors, such as Cursor, may
show it in a browser pane inside the app, and `elements start` in a terminal
opens your default browser. You can always open Chrome, or whichever browser
you use, and go to [localhost:4000](http://localhost:4000) yourself.

![A new Elements app at localhost:4000. The page reads "You're running on elements." with an "app running" badge, and names the file to edit, app/pages/home/template.ehtml](/learn/01a0fd2b-f0a8-7f1b-8e8e-2ce8ecf38900/01a0fd2b-f4af-7e04-932d-0b5ee8e1b108/images/01a0fd2b-f506-7ce0-a6d3-6cc581d66433)

The page says the app is running and names the file to edit. Behind it is a
Postgres database of its own, a test runner and a project server that rebuilds
the app as you save. You installed none of them separately.

## 4. Make your first change

Open `~/elements/projects/myapp/app/pages/home/template.ehtml` in any editor,
change the heading, and save. The page in your browser updates on its own.

**Before the change:**

![The new app's home page before the edit, with the heading "You're running on elements."](/learn/01a0fd2b-f0a8-7f1b-8e8e-2ce8ecf38900/01a0fd2b-f4af-7e04-932d-0b5ee8e1b108/images/01a0fd2b-f506-7ce0-a6d3-6cc581d66433)

**After the change:**

![The same page after saving the template, now headed "Hello from my first app."](/learn/01a0fd2b-f0a8-7f1b-8e8e-2ce8ecf38900/01a0fd2b-f4af-7e04-932d-0b5ee8e1b108/images/01a0fd2b-f5a0-7996-afc2-8cebf7c71d4e)

## 5. Build something

Tell your agent what you want, in plain words:

```text Agent
Turn this into a signup page for a weekly newsletter, with a list of subscribers only I can see.
```

Watch the page while it works. Every file the agent saves shows up in the
browser, and the agent hears about any error the moment it saves, so it fixes
its own mistakes before it says it is done.

The manual: [start](/learn/man/start), [cli](/learn/man/cli),
[build](/learn/man/build), [editors](/learn/man/editors),
[database](/learn/man/database), [html](/learn/man/html).