---
title: Build Your First Vibe | Vibecodr Docs
description: Paste your code into Studio, press Publish, add a title, and copy a live link people can open. Your first vibe can be live in one sitting.
canonical: https://vibecodr.space/docs/first-vibe
---

# Build Your First Vibe

Your first vibe can go live in one sitting: paste the code you have, watch it run, press Publish, and share the link. The steps on this page use the exact button names you will see.

Marker: Beginner tutorial for the first runnable Vibecodr publish.

## Implementation focus

Use this the first time you publish, or whenever you want the shortest path from code on your clipboard to a link you can share.

## Expected outcomes

- Start a draft from the Paste your code lane in Studio.
- Publish with a title and description people understand.
- Copy the live link and share it anywhere.
- Know when BUMP IT is the right next move.

## From pasted code to a live link

Your first publish can happen in one sitting: paste the code you already have, watch it run, press Publish, and walk away with a link. Studio takes a whole file or just a fragment — HTML, CSS, or React — and turns it into a draft that runs right away.

Every step below names the real button you will see on screen, in order.

- 1. Open Studio. The launchpad shows the lanes for starting a draft.

- 2. Pick Paste your code, drop in what you have, and press Open in Studio. Your code becomes a running draft with a live preview.

- 3. When the preview looks right, press Publish in the top bar.

- 4. The Almost there! dialog opens once your vibe is live. Add a title and a short description so people know what they are opening.

- 5. The It's live block shows your link. Press Copy link and send it to someone.

## After your link is out

Open your own link after publishing. What you see there is what everyone else with the link gets — if it plays for you, it plays for them.

Keep API keys and other secrets out of anything you paste. A published vibe runs in the viewer's browser, so browser code is never the place for credentials. When an idea needs that kind of trusted work, it belongs in a Pulse — after the first publish, not before.

- Just posting a single file as-is, no editing? Paste it into the Composer instead.

- A clear title and description help feeds and link previews explain your vibe.

- When you improve it later, press BUMP IT to update the same post and keep the same link.

- Bigger projects — multiple files, assets, imports, backends — start from the other Studio lanes when you are ready.

## Example and read next

Example: you have a tiny game in one HTML file. Open Studio, pick Paste your code, press Open in Studio, check the preview, press Publish, add a title in the Almost there! dialog, then press Copy link and send it to a friend.

Use these related pages when you need the next layer of guidance. They point to the most likely follow-up tasks, not every page that happens to touch the same system.

- Read next: [VibeComposer](/docs/composer)

- Read next: [Studio](/docs/studio)

- Read next: [Publish & Share](/docs/publish-share)

- Read next: [BUMP IT](/docs/bump-it)

## Structured route body

### From pasted code to a live link

Your first publish can happen in one sitting: paste the code you already have, watch it run, press Publish, and walk away with a link. Studio takes a whole file or just a fragment — HTML, CSS, or React — and turns it into a draft that runs right away.

Every step below names the real button you will see on screen, in order.

- 1. Open Studio. The launchpad shows the lanes for starting a draft.
- 2. Pick Paste your code, drop in what you have, and press Open in Studio. Your code becomes a running draft with a live preview.
- 3. When the preview looks right, press Publish in the top bar.
- 4. The Almost there! dialog opens once your vibe is live. Add a title and a short description so people know what they are opening.
- 5. The It's live block shows your link. Press Copy link and send it to someone.

### After your link is out

Open your own link after publishing. What you see there is what everyone else with the link gets — if it plays for you, it plays for them.

Keep API keys and other secrets out of anything you paste. A published vibe runs in the viewer's browser, so browser code is never the place for credentials. When an idea needs that kind of trusted work, it belongs in a Pulse — after the first publish, not before.

- Just posting a single file as-is, no editing? Paste it into the Composer instead.
- A clear title and description help feeds and link previews explain your vibe.
- When you improve it later, press BUMP IT to update the same post and keep the same link.
- Bigger projects — multiple files, assets, imports, backends — start from the other Studio lanes when you are ready.

### Example and read next

Example: you have a tiny game in one HTML file. Open Studio, pick Paste your code, press Open in Studio, check the preview, press Publish, add a title in the Almost there! dialog, then press Copy link and send it to a friend.

Use these related pages when you need the next layer of guidance. They point to the most likely follow-up tasks, not every page that happens to touch the same system.

- Read next: [VibeComposer](/docs/composer)
- Read next: [Studio](/docs/studio)
- Read next: [Publish & Share](/docs/publish-share)
- Read next: [BUMP IT](/docs/bump-it)

## Related documentation

- [/docs/composer](https://vibecodr.space/docs/composer/index.md)
- [/docs/studio](https://vibecodr.space/docs/studio/index.md)
- [/docs/publish-share](https://vibecodr.space/docs/publish-share/index.md)
- [/docs/bump-it](https://vibecodr.space/docs/bump-it/index.md)