Skip to content

Your First Project

A 5-minute walkthrough so you know what every screen does.

Doable workflow: Describe → Generate → Preview → Edit → Ship

1. Sign up

Open the app (http://localhost:3000 or your domain) and click Sign up.

  • Email + password works out of the box.
  • GitHub or Google OAuth works if you set the corresponding *_CLIENT_ID / *_CLIENT_SECRET (see Environment Variables).

You land in your personal workspace. Workspaces hold projects, members, billing, AI settings, integrations, and credits.

2. Create a project

From the dashboard, click New project. You have three ways to start:

  1. Describe what you want — “A todo app with categories and a dark theme”.
    Doable picks the right template and scaffolds it.
  2. Start from a template — Blank, Landing page, Blog, Portfolio, SaaS dashboard, E-commerce store, Todo app.
  3. Import from GitHub (if you connected your GitHub account).

Templates live in services/api/src/templates/definitions/. Each template generates a Vite + React + Tailwind starter that runs in seconds.

3. The editor

Once the project opens, the layout looks like this:

┌──────────────┬─────────────────────────────┬───────────────┐
│              │                             │               │
│  File tree   │      Live preview /         │  Chat with AI │
│              │      Monaco code editor     │               │
│              │                             │               │
└──────────────┴─────────────────────────────┴───────────────┘
  • File tree (left) — every file in the project; click to open in the code view.
  • Preview / Editor (center) — toggle between the rendered preview iframe and the Monaco code editor.
  • Chat (right) — conversational AI interface. This is where most of the work happens.

4. Talk to the AI

Type something like:

“Add a contact form below the hero with name, email, and message fields. Validate the email.”

You will see:

  1. The AI streams its plan in the chat (assistant.message_delta events).
  2. Tool calls appear inline — file edits, package installs, shell commands — each one expandable.
  3. The preview reloads automatically as files change (Vite HMR).
  4. When the AI is done it summarizes what changed.

Behind the scenes:

  • Your message goes to the API at POST /chat/... (see Chat API).
  • The API hands it to @doable/docore, which spawns the GitHub Copilot CLI (or other configured provider).
  • File edits, terminal commands, and HTTP fetches are all sandboxed via @doable/dovault policies (see Sandboxing).
  • Streaming events flow back over Server-Sent Events to the chat panel.

5. Visual edit

Click the cursor icon in the toolbar, then click any element in the preview. A floating panel lets you change text, color, padding, etc. — and writes the change directly to the source file via the AST-based direct save path (no AI tokens used).

The bridge that makes this possible is injected into the preview iframe by the API: see visual-edit-bridge-inline.ts.

6. Real-time collaboration

Invite a teammate from the project menu. Both of you see each other's cursor, selection, and edits as they happen — powered by Yjs CRDT over the WebSocket service. See Real-time Collaboration.

7. Publish

Click Publish. Doable builds the static site and deploys it to:

  • <your-project>.doable.me (or your DOABLE_DOMAIN), or
  • a custom domain you configure.

Caddy (or nginx) serves the site. Cloudflare Tunnel handles routing if you used setup-server.sh.

What's next?

  • Learn the editor in detail.
  • Customize the AI provider, modes, and tools in Workspace settings → AI.
  • Connect a GitHub repo so your project syncs to a real Git repo.
  • Read about the architecture to understand what just happened.