Fast publishing lane

VibeComposer Guide

Composer is the shortest path from idea to runnable publish. It favors speed and iteration while still preserving canonical app identity.

Single-file workflow optimized for fast publish and remix loops.

Implementation focus

Choose Composer when your work is single-file or quick-turn and you want public feedback before deeper architecture work.

Expected outcomes

Publish single-file vibes quickly with low setup overhead.
Keep remixability intact while iterating through BUMP IT cuts.
Hand off to Studio only when complexity justifies it.

What is VibeComposer?

VibeComposer is the quick-create tool for sharing content on Vibecodr. Use it for short posts, images, links, single-file apps, or long-form articles. In App mode, the inline editor auto-detects JSX/TSX/HTML/CSS so you never have to pick a runtime. For multi-file projects with full editing capabilities, use the Studio instead.

Open VibeComposer

Open Studio

Content Types

Choose from five content types depending on what you want to share:

Thought

Quick text updates, like a tweet. Free users get 1,000 characters, premium users get 2,000.

Image

Share an image with optional caption. Great for screenshots, artwork, or photos.

Link

Share a URL with preview. Perfect for bookmarks, articles, or interesting finds.

App

Create a single-file Vibe (browser app). Paste JSX/TSX/HTML/CSS and get a live preview with automatic runtime detection.

Free

Vibes

For same-origin /api/* endpoints, add files under src/server/ (preferred) or server/ in Studio. For standalone Pulses (automations, webhooks), use Pulse creation (Creator+).

Longform

Write articles and essays with rich text formatting. Perfect for tutorials, guides, or stories.

VibeComposer vs Studio

Both tools create capsules, but they're designed for different workflows:

Feature

VibeComposer

Studio

Best for

Quick posts, single-file capsules

Complex multi-file projects

File support

Single file (capsule)

Unlimited files + folders

Code editor

Basic with preview

Full CodeMirror 6 editor

Live preview

Inline preview

Resizable app preview; Pulse source stays editor-only

Console/debugging

Full console output

Import from

Paste code, upload file

GitHub, ZIP, templates, Blueprints

Automations

Cron, webhooks, triggers

Secrets

Full secrets management

Route

/post/new or /composer

/studio or /studio/:id

Open Help > Keyboard Shortcuts inside Studio for the full list and platform-specific variants.

Remixing

Found a vibe you like? Click Remix on any public vibe to start with their code as a base. The original author gets attribution, and you can modify it however you want.

Remix URL format

https://vibecodr.space/post/new?remixFrom=caps_abc123

# Opens VibeComposer with the original vibe's code pre-loaded
# You can edit and publish as your own remix

Quick Start

1 Open VibeComposer Go to /post/new or click the + button in the nav.
2 Choose a content type Select Thought, Image, Link, App, or Longform.
3 Add your content Write text, upload an image, paste code, or enter a URL.
4 Set visibility Choose public, unlisted, or private.
5 Publish Choose Publish when the preview and visibility settings match what viewers should receive.

What Composer is for

VibeComposer is optimized for fast single-file publishing. It is the right tool when the idea is small enough to fit in one surface and the goal is to get feedback quickly without building a whole workspace structure.

Composer still participates in the same publication model as Studio. The published work gets a public post, a runnable artifact, metadata, and the ability to move forward through later releases.

Use it for small games, experiments, widgets, visual sketches, and quick app ideas.
Keep dependencies small and browser-safe.
Move to Studio once the project needs multiple files, imported assets, or backend coordination.

Handoff to Studio

Composer is not a dead end. When a quick idea starts needing structure, treat the published vibe as the public seed and move deeper implementation work into Studio.

The important continuity rule is identity: if the same app should keep living at the same public route, use the update flow instead of scattering new posts for every iteration.

Keep the original app identity when updates are part of the same project.
Use Studio for source organization, import-built output, richer previews, and Pulse attachments.
Preserve remixability by keeping browser-visible code free of credentials.

Example and read next

Example: you pasted a single-file p5 sketch, confirmed it runs in preview, and want feedback quickly. Use Composer first, then move to Studio only when assets, multiple files, or backend behavior become part of the project.

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: Studio
Read next: BUMP IT
Read next: Source & Versions
Read next: How-To Guides