Skip to content

Your first thing in 10 minutes

Let's build something real. By the end of this page, you'll have a published landing page for a podcast: a live URL you can text to a friend. We'll pretend the podcast is called The Tinkering Times, but feel free to substitute anything you actually care about.

Total time: about 10 minutes. No prior experience needed.

Minute 0-2: sign up and land in the editor

  1. Open your Doable instance and click Sign up. You can use email + password or sign in with Google or GitHub (whichever your installation offers).
  2. After you confirm, Doable drops you on the dashboard with a friendly greeting and a big prompt box in the center.
  3. Take a breath. The hardest part is done.

That prompt box is where everything starts.

Minute 2-5: prompt the AI

Click the prompt box and type:

Build me a landing page for a podcast called The Tinkering Times. Color palette is purple and orange, modern but warm. Include a hero section with the show name and tagline, a big hero image of a workshop, an episode list with at least four episodes (title, summary, duration), an about the host block, and a subscribe section with buttons for Apple Podcasts, Spotify, and RSS.

Before you press Enter, look at the two toggles under the box:

  • Leave the mode set to Work for speed (it gets going right away). Or pick Strategize if you'd rather the AI ask a clarifying question first.
  • Leave the model picker on the default; you can experiment later.

Press Enter. Doable creates a new project from your prompt and drops you into the editor, with the AI already working.

You'll see:

  • A live preview appear in the center as files are written.
  • The AI's reasoning streaming in the chat panel on the right, with small cards showing each file it edits.
  • A file tree on the left filling up with the pages and components for your site.

Sit back for a minute. It's normal for the first turn to take a moment; the AI is doing a lot.

Minute 5-7: preview and tweak

When the preview finishes loading, click around your new landing page. Try the desktop / tablet / mobile buttons in the preview toolbar to see how it looks at each size.

A few things you'll probably want to adjust. Pick one and try each of these approaches:

Approach A: ask the AI

Type a follow-up into the chat:

The hero feels a bit dark. Make the background lighter and use a brighter orange for the subscribe buttons.

The AI will edit the relevant files and the preview will refresh.

Approach B: Visual Edit

Click the cursor icon in the preview toolbar. Now click directly on, say, the page heading. A small toolbar appears next to your selection. You can:

  • Type a short instruction in the floating prompt ("make this larger and add a subtle gradient")
  • Or open the Design tab on the left rail and use the property editors (font size, weight, color, spacing) and watch the page update live as you drag sliders. Hit Save when you like it, or AI Save if you'd rather have the AI rewrite the underlying code cleanly.

Mix and match. Big changes are easier to ask for in words; tiny visual tweaks are faster to click.

Minute 7-9: add a custom episode list

The episode list the AI generated is fictional. Let's swap in your own.

Type in the chat:

Replace the episode list with these four episodes:

  1. "The Soldering Iron Origin Story": How a $12 tool sparked a 20-year obsession. (32 min)
  2. "Workshop Tour: One Square Meter": Building a complete maker space in a tiny apartment. (41 min)
  3. "Failing Forward": Five projects that broke, and what they taught me. (28 min)
  4. "Guest: A Luthier in Lisbon": Building handmade guitars in a 200-year-old workshop. (56 min)

The AI updates the file, the preview refreshes, and your real episode list appears.

If you'd rather edit the file by hand, you can: click the file in the left tree and edit it. But for most of the way you'll go faster by asking.

While you're here, drop a sticky comment anywhere on the preview to leave yourself a note ("come back and add real audio links later"). You can resolve it once you've handled it.

Minute 9-10: publish

Time to put this on the internet.

  1. Click Publish (or the rocket icon) in the top-right of the editor toolbar.
  2. In the publish dialog, choose production (the real version), or preview if you'd rather get a sandbox URL first.
  3. Watch the build progress. Logs stream in so you can see what's happening; it usually takes under a minute.
  4. When it finishes, you'll see your live URL, something like tinkering-times.doable.me. Click the copy icon to grab it, or click the open-in-new-tab icon to view your live site immediately.

Text the link to a friend. You're live.

What to try next

You went from blank dashboard to live URL in 10 minutes. A few directions to explore from here:

  • Invite a friend. Hit Share in the editor, add their email, and pick a role. They'll see your cursor as you work and you can chat in the Team Chat panel. See Collaboration.
  • Make it your domain. Open Project Settings → Domain and connect tinkeringtimes.com (or whatever you own). Doable shows you the DNS records to add. See Custom Domains.
  • Share it with the community. Open the share dialog and publish to Discover so other makers can find, star, and remix your work. See Community.
  • Add a real episode feed. Ask the AI to read an RSS URL and render the latest episodes automatically, or to wire up an integration like Notion, Airtable, or a Google Sheet as the source.
  • Roll back if you don't like a change. The History panel keeps every version. Roll back, or tag a "milestone" you want to keep returning to.

Welcome to Doable. Now go make the next thing.