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

# Open in Replit

> Learn how to create an Open in Replit button that lets visitors start building from your app or website.

export const CreateUrlLinkBuilder = () => {
  if (typeof document !== 'undefined' && !window.LZString) {
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js';
    document.head.appendChild(script);
  }
  const getLink = () => {
    if (typeof document === 'undefined' || !window.LZString) {
      return 'https://replit.com/?stack=Design&prompt=';
    }
    const promptEl = document.getElementById('create-url-prompt');
    const stackEl = document.querySelector('input[name="stack-mode"]:checked');
    const referrerEl = document.getElementById('create-url-referrer');
    const prompt = promptEl?.value || '';
    const stack = stackEl?.value || 'Design';
    const referrer = referrerEl?.value || '';
    if (!prompt.trim()) {
      return '';
    }
    const encoded = window.LZString.compressToEncodedURIComponent(prompt);
    let url = `https://replit.com/?stack=${stack}&prompt=${encoded}`;
    if (referrer.trim()) {
      url += `&referrer=${encodeURIComponent(referrer)}`;
    }
    return url;
  };
  const updateOutputs = () => {
    if (typeof document === 'undefined') return;
    const link = getLink();
    const badgeUrl = 'https://replit.com/badge?caption=Build%20with%20Replit';
    const emptyPlaceholder = 'Enter a prompt above to generate a link';
    const badgeMarkdown = link ? `[![Build with Replit](${badgeUrl})](${link})` : emptyPlaceholder;
    const outputEl = document.getElementById('create-url-output');
    const badgeMarkdownEl = document.getElementById('create-url-badge-markdown');
    if (outputEl) outputEl.textContent = link || emptyPlaceholder;
    if (badgeMarkdownEl) badgeMarkdownEl.textContent = badgeMarkdown;
  };
  const handleBadgeClick = e => {
    e.preventDefault();
    const link = getLink();
    if (link) {
      window.open(link, '_blank');
    }
  };
  return <div className="space-y-4">
      <div>
        <label htmlFor="create-url-prompt" className="block text-sm font-medium mb-1">
          Prompt
        </label>
        <textarea id="create-url-prompt" onInput={updateOutputs} placeholder="Create a todo app with a clean, modern design" rows={4} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" />
      </div>
      <div>
        <label className="block text-sm font-medium mb-2">Stack mode</label>
        <div className="flex gap-4">
          <label className="flex items-center cursor-pointer">
            <input type="radio" name="stack-mode" value="Design" defaultChecked onChange={updateOutputs} className="mr-2" />
            <span className="text-sm">Design</span>
          </label>
          <label className="flex items-center cursor-pointer">
            <input type="radio" name="stack-mode" value="Build" onChange={updateOutputs} className="mr-2" />
            <span className="text-sm">Build</span>
          </label>
        </div>
      </div>
      <div>
        <label htmlFor="create-url-referrer" className="block text-sm font-medium mb-1">
          Referrer <span className="text-gray-500 font-normal">(optional)</span>
        </label>
        <input id="create-url-referrer" type="text" onInput={updateOutputs} placeholder="Your website or app name" className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" />
        <p className="mt-1 text-xs text-gray-500">
          The name or URL of the page containing this link. Used for
          attribution.
        </p>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Generated link</label>
        <pre className="w-full p-3 bg-gray-100 dark:bg-gray-800 rounded-md text-sm break-all select-all cursor-text">
          <code id="create-url-output">
            https://replit.com/?stack=Design&amp;prompt=
          </code>
        </pre>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Badge preview</label>
        <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-md">
          <a href="#" onClick={handleBadgeClick} style={{
    cursor: 'pointer'
  }}>
            <img src="https://replit.com/badge?caption=Open%20in%20Replit" alt="Open in Replit badge" noZoom />
          </a>
        </div>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Badge markdown</label>
        <pre className="w-full p-3 bg-gray-100 dark:bg-gray-800 rounded-md text-sm break-all select-all cursor-text">
          <code id="create-url-badge-markdown">
            [![Open in
            Replit](https://replit.com/badge?caption=Open%20in%20Replit)](https://replit.com/?stack=Design&amp;prompt=)
          </code>
        </pre>
      </div>
    </div>;
};

<Frame caption="Clicking this badge automatically opens Replit and populates the prompt and settings.">
  <div style={{ padding: '2rem', display: 'flex', justifyContent: 'center' }}>
    <a href="https://replit.com/?stack=Build&prompt=A4Jw9gtsAuQ&referrer=replit-docs" target="_blank">
      <img src="https://replit.com/badge?caption=Open%20in%20Replit" alt="Open in Replit" noZoom />
    </a>
  </div>
</Frame>

## Building a link

To build a link, use the format below.

```
https://replit.com/?stack=Build&prompt=A4Jw9gtsAuQ&referrer=replit-docs
```

### URL parameters

Make sure to include the following parameters in your URL.

| Parameter  | Type   | Description                                                                                                                                                                                        | Required/Optional |
| ---------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
| `stack`    | string | The build mode to use. Must be either `Design` or `Build`. `Design` opens [Canvas](/replitai/canvas) for visual prototyping. `Build` opens [Agent](/core-concepts/agent) for full app development. | Required          |
| `prompt`   | string | Text describing the application to build, **compressed using [LZ-string](https://pieroxy.net/blog/pages/lz-string/index.html)**. The uncompressed prompt can be up to 50,000 characters.           | Required          |
| `referrer` | string | The name or URL of the page containing this link. Used for attribution.                                                                                                                            | Optional          |

<Note>
  The `prompt` parameter must be compressed using LZ-string compression before
  being added to the URL. This helps URLs remain within browser length limits
  and parse correctly.
</Note>

### Interactive link builder

Use the tool below to generate your **Open in Replit** link. Enter your prompt, select the stack mode, and the link will be generated automatically with LZ-string compression applied.

<CreateUrlLinkBuilder />

### Compressing prompts

To create a valid **Open in Replit** link, you must compress your prompt using LZ-string compression. Here's how:

#### JavaScript/TypeScript

```javascript theme={null}
import LZString from 'lz-string';

const prompt = 'Create a todo app with a clean, modern design';
const compressed = LZString.compressToEncodedURIComponent(prompt);
const url = `https://replit.com/?stack=Design&prompt=${compressed}`;
```

#### Python

```python theme={null}
import lzstring

prompt = "Create a todo app with a clean, modern design"
compressed = lzstring.LZString().compressToEncodedURIComponent(prompt)
url = f"https://replit.com/?stack=Design&prompt={compressed}"
```

<Tip>
  Use `compressToEncodedURIComponent` to ensure the compressed string is
  URL-safe.
</Tip>

### Examples

**Canvas with basic prompt**

```
https://replit.com/?stack=Design&prompt=AoUwTgzg9gdghgGwAQAcpgC4DMoIJZRIR4YgB0QA
```

**Build Mode with detailed prompt**

```
https://replit.com/?stack=Build&prompt=LIQw1gpgBCUE4HsQBMC2IAOUMBsQDt8BLfAcygBcEEcoB3ACwjmg0WQFcBjCqdfEKWYBnKFwJiWICtALIoANyLCOIHEQBe0AI6q4MuDgCe2dt16IU6DMIB0UAJL4uODsmjI4g0iABGOaHE4ZFEAMwQ4KBIiCiJpIgUIYQAaUyIImJMKQRSYfHkuGgixBGQScl8siBBUewARJKJSfCjeOhiGGFMEUKThdIFaWNQIdXxoJQg6PIKAglTUUuYWgFUHWyA&referrer=replit%20docs
```

## Stack modes

### Canvas

Use `stack=Design` to open your prompt in [Canvas](/replitai/canvas), which is optimized for:

* Visual design and UI prototyping
* Rapid iteration on layouts and styling
* Creating design mockups
* Frontend-focused development

### Build Mode

Use `stack=Build` to open your prompt in [Agent](/core-concepts/agent), which is optimized for:

* Full-stack application development
* Backend logic and APIs
* Database integration
* Complex functionality and features

## Best practices

* Keep prompts concise and focused on core features for best generation results.
* Use clear, descriptive language that explains what you want to build.
* Choose the appropriate `stack` mode for your use case (Design for UI/UX, Build for full apps).
* Test your compressed URLs to ensure they parse correctly before sharing.
* Consider your audience's technical level when crafting prompts.

### User authentication

Regardless of your Replit authentication state, you'll need to provide input before creating the app. Usually this means submitting the prompt.

### Error handling

If the URL is malformed or parameters are invalid, Replit won't fill the prompt. Possible causes include:

* Missing required parameters (`stack` or `prompt`)
* Invalid `stack` value (must be `Design` or `Build`)
* Failed decompression of the `prompt` parameter
* Browser "URL too long" errors (though compression helps mitigate this)

### Security considerations

<Warning>
  **Open in Replit** links could be used to create apps with unintended behavior
  or security vulnerabilities. Only click links from trusted sources.
</Warning>

When sharing **Open in Replit** links:

* Review prompts carefully before sharing publicly
* Consider the security implications of the apps being generated
* Avoid including sensitive information in prompts
* Be transparent about what the link will create

## Related resources

* [Canvas documentation](/replitai/canvas)
* [Agent documentation](/core-concepts/agent)
* [Replit AI integrations](/replitai/integrations)