For Creators¶

Welcome. This guide is for the makers: the writers, designers, producers, founders, and side-project obsessives who have an idea in their head and want to ship it as a real app on the internet. No coding background required. You bring the vision; Doable handles the plumbing.

The whole point of Doable is this: you describe what you want, and an AI helper builds it with you. You can watch the app come alive in a preview window, change anything by clicking on it, invite a friend to collaborate, and publish to a live URL, all without ever touching a terminal.

Signing up and your personal workspace¶

When you sign up, Doable instantly gives you your own personal workspace. Think of a workspace as a folder that holds everything you build: projects, AI settings, connected services like GitHub or Slack, and (if you invite people) your teammates.

You always have at least your personal workspace, and that one is just you. Later, you can create a team workspace to share work with collaborators. Switch between workspaces using the switcher in the top-left corner; the URL changes to match.

The dashboard¶

After you sign in, you land on the dashboard. This is your home base.

You'll see:

A friendly greeting up top ("Good morning, ...").
A big prompt box in the middle: type any idea here and Doable will spin up a brand-new project from it.
A grid (or list, your choice) of every project in this workspace, with thumbnails and last-edited timestamps.
A sidebar of folders to organize projects however you like (drag projects between folders).
A toolbar with sort, search, and grid/list view toggle.

You can also right-click any project for quick actions: rename, duplicate, move to folder, delete.

Starting a project¶

There are two main ways to begin a new project, and you can switch between them anytime.

Start from a prompt¶

The fastest way: just type. In the dashboard's prompt box, describe what you want.

"A landing page for a coffee shop in Brooklyn called Brew Haven, warm browns and cream, with a hero image, opening hours, and a menu section."

Press Enter. Doable creates the project, picks a sensible starter, and drops you straight into the editor with the AI already working on your first version. Within a minute or two, you'll see a real, clickable webpage in the preview pane.

You can also:

Attach a file: paste a screenshot, a design mockup, a PDF brief, and the AI uses it as context.
Press the mic icon to speak your idea instead of typing it.
Pick a mode before sending: Strategize (AI thinks through a plan and asks clarifying questions first) or Work (AI just starts building right away).

Start from a template or a community project¶

Sometimes you'd rather start from something that already exists.

Visit the Templates gallery from the dashboard to pick a starter blueprint: blank page, landing page, blog, portfolio, SaaS dashboard, e-commerce store, todo app, and more. Each template has a preview so you know what you're getting.
Visit Discover to browse public projects other Doable users have shared. Found one you love? Click Remix to clone it into your workspace as your own editable copy. Star projects to bookmark them.
Visit the Marketplace to install add-ons (integrations, AI skills, capability bundles) into your workspace, so the AI can do more for you on every project.

Discover, Templates, and Marketplace are three different things, and that's on purpose. Templates are starting points for a new project; Discover is for remixing what others have built; Marketplace is for installing add-on capabilities into your workspace. There's a help page inside Doable that explains the difference if you want a refresher.

The editor¶

Once a project exists, you spend almost all your time in the editor. It has three main areas:

Live preview in the middle: your app, running for real, updating in seconds whenever something changes. You can switch between desktop, tablet, and mobile views, refresh it, pop it into a new tab, or jump between routes (Home, About, Contact, etc.).
AI chat on the right: the conversation with your AI helper. Type what you want next; the AI replies, edits files, and you see the preview update.
Sidebar on the left: a tree of your project's pages and assets, a knowledge area for notes the AI should remember about this project, and a list of past versions you can roll back to.

You can drag the dividers, collapse panels, or pop the preview into its own window if you'd like more room.

The AI chat¶

This is where most of the magic happens. A few things worth knowing:

The AI is a real teammate, not autocomplete. You can ask big things ("add a newsletter signup"), small things ("make the headline bigger"), or fuzzy things ("this feels too corporate, make it friendlier").
Each turn streams back live. You'll see the AI's reasoning and short cards that show what it's doing (editing a file, adding an image, etc.).
A Strategize / Work toggle sits above the input. Strategize makes the AI think out loud and confirm a plan with you before changing anything, great for bigger changes. Work dives right in, great for quick tweaks.
A models picker lets you choose which AI you want to use. You don't have to know what any of the names mean. Pick one; switch later if you're curious.
You can attach images (drop a mockup, paste a screenshot of something you like), record a voice prompt, or pick a skill to give the AI extra abilities for this turn.

Visual Edit: change things by clicking¶

Sometimes describing a change in words is slower than just pointing at it. Visual Edit lets you do exactly that.

Click the cursor icon in the preview toolbar. Now you can click any element on your page: a button, a heading, an image. A small toolbar pops up next to your selection with options to:

Ask the AI to change just that element ("make this rounder", "use a different color")
Move up to the parent element if you grabbed something too small
Jump to the underlying code if you're curious
Delete the element

Visual Edit is free to use; no AI tokens are spent when you adjust things directly. Save when you're happy with the result.

Visual Designer¶

For deeper visual tweaks, open the Design tab in the editor's left rail. With an element selected, you get a full property editor: colors, spacing, typography, borders, sizes, layout. Changes preview live, and you can choose to either save the styles as-is or send your changes to the AI so it can write cleaner, smarter code based on what you did. For the full tour, see Visual Edit.

Inviting friends to collaborate¶

Doable is built for working together. From the editor or your workspace settings, you can:

Invite by email: they get a link and join your workspace. You choose their role (owner, admin, member, or read-only viewer).
Share a link for anyone-with-the-link access, in either read-only or edit mode.

When teammates are in the project at the same time, you'll see their avatars at the top, their cursors moving in the code or design view, and dots on file tabs showing who's looking at what. There's a separate Team Chat panel for talking to each other (different from the AI chat), and you can drop sticky comments directly on the preview to leave feedback like a Figma file.

Publishing: one click to a live URL¶

When you're ready to share with the world, hit Publish (or the rocket icon) in the editor toolbar.

A small wizard walks you through it:

Pick production (your real site) or preview (a sandbox URL for testing).
Watch the build progress in real time; logs stream in so you can see what's happening.
When it's done, you get a live URL on *.doable.me (something like brew-haven.doable.me). One click copies it; another opens it in a new tab.

That's it. Your app is on the internet.

A history view shows your last several deployments, so you can revisit older versions or roll back if needed.

Custom domains¶

Want to use your own domain like brewhaven.com instead of brew-haven.doable.me? Open Project Settings → Domain, add the domain, and Doable shows you the DNS records to set at your domain registrar. Status updates automatically (pending, verifying, SSL, verified). For step-by-step instructions, see Custom Domains.

Proud of what you made? Two ways to share with the broader community:

Discover: open the share dialog and publish your project to the public community gallery. You give it a title, description, and category (Dashboard, Marketing, Ecommerce, Content, Personal, Productivity). Other people can view it, star it, and remix their own copies.
Marketplace: if you've built something reusable (a capability, an integration, an AI skill), you can submit it to the Marketplace so other workspaces can install it.

Where to next¶

You now know enough to be dangerous. A few good next stops:

Your first thing in 10 min: a quick walkthrough of building a real landing page from scratch.
Visual Edit: the full guide to clicking-to-change-things and the Design panel.
Collaboration: how live presence, team chat, comments, and invites work.
Publishing: more detail on environments, build logs, and rollbacks.
Community: how Discover and remixing work end to end.

Have fun. Make something.