> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useshareable.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design a page with Gemini Canvas, share it with Shareable

> Build an interactive page in Gemini Canvas, copy the HTML, and put it behind a real share link with access control and analytics.

[Gemini Canvas](https://gemini.google.com) (in the Gemini app) lets you describe a
page or app in plain language — a launch announcement, a one-pager, a portfolio, an
interactive prototype — and it generates **real, standalone HTML/CSS/JS** with a live
preview you can iterate on. That self-contained HTML is exactly what Shareable hosts,
so the two fit together neatly: **build in Gemini, share with Shareable.**

## Why add Shareable?

Gemini Canvas can hand you a public preview link, but it's a bare URL — no access
control, no password, no expiry, and no view analytics. Shareable wraps the same HTML
in a real share link you control:

<CardGroup cols={2}>
  <Card title="Decide who sees it" icon="lock" href="/guides/sharing-and-access">
    Anyone with the link, specific people, a password, or business-email-only.
  </Card>

  <Card title="See who viewed it" icon="eye" href="/cookbook/who-viewed">
    View counts, devices, locations — and names, when you share by email.
  </Card>

  <Card title="Get told when it's opened" icon="bell" href="/guides/notifications">
    Optional email the moment someone views the page.
  </Card>

  <Card title="Update it anytime" icon="clock-rotate-left" href="/guides/version-history">
    Re-publish a new version on the same link; roll back if needed.
  </Card>
</CardGroup>

## Do it in 4 steps

<Steps>
  <Step title="Make the page in Gemini Canvas">
    Open the Gemini app, turn on **Canvas**, and describe what you want — *"a launch
    page for our new feature with a hero, three benefits, and a sign-up button."*
    Gemini builds it with a live preview; iterate conversationally until it looks right.
  </Step>

  <Step title="Get the standalone HTML">
    Ask Gemini: *"Give me the full, self-contained HTML for this Canvas — CSS, fonts,
    and images inlined."* Copy it (or export the code). Keep it **self-contained** so it
    works on any static host.

    <Tip>
      Want a working form, booking widget, or buy button on it? Ask Gemini to add the
      embed while you're there, or follow
      [Add an integration in 3 steps](/cookbook/overview) after you publish — the embed
      travels with the HTML.
    </Tip>
  </Step>

  <Step title="Bring the HTML into Shareable">
    Open Shareable, **paste the HTML** (or drop the exported `.html` file), and publish.
    You get a draft you can preview, then a clean link.
  </Step>

  <Step title="Set access and send the link">
    Pick who can see it in the **Share** dialog — link, specific people, password, or
    anyone with a verified email — optionally flip on **Email me when viewed**, and
    share the link. You can re-generate an updated design in Gemini later and re-publish
    it on the same link.
  </Step>
</Steps>

## The short version

| Step | Where         | What                                                                                                    |
| ---- | ------------- | ------------------------------------------------------------------------------------------------------- |
| 1    | Gemini Canvas | Describe the page; iterate with the live preview                                                        |
| 2    | Gemini Canvas | Ask for the **full self-contained HTML**; copy it                                                       |
| 3    | Shareable     | Paste/drop the HTML and publish                                                                         |
| 4    | Shareable     | Set [access](/guides/sharing-and-access), turn on [notifications](/guides/notifications), send the link |

<Note>
  Gemini Canvas outputs real HTML — no special handling needed. If a design ever relies
  on a live API call at runtime, that part won't run on a static host; keep the page
  self-contained.
</Note>