Language Support

Full syntax highlighting and language-aware editing for 20+ languages:

File Management

• File tree sidebar with full folder/file hierarchy
• Tabbed editing — multiple files open simultaneously
• Autosave — changes saved automatically to the cloud
• Global search — VS Code-style Ctrl+Shift+F across all project files
• Find and Replace — search and replace across files, with confirmation modal
• Context menus — right-click on files/folders for quick actions
• Cursor position memory — returns to exact position when switching tabs

In-Editor Browser Tab

Cloudpen includes a built-in browser panel that lets you preview your running application side-by-side with the editor — without opening a new tab. The panel is divided into tabbed sections and updates automatically on every file save.

API Client

A REST tester built directly into the editor sidebar. Think Postman, but you never leave your project — send requests, inspect responses, save them to a collection, and pull up your history without switching tabs or tools.

Daily request limits by plan

Environment Variables Manager

Set your environment variables once — just like on Vercel — and they're automatically available in your terminal, when you hit Run, and in your deployed build. No more juggling .env files by hand or copy-pasting secrets into the sandbox.

Environment variables per project by plan

Coming Soon: Git Panel

Themes & Customization

Cloudpen ships with multiple editor themes including dark, light, and high-contrast variants. The default is a custom dark theme optimized for extended coding sessions. Theme preferences are saved per user account.

Offline Mode

Cloudpen works even when your internet connection drops. The editor detects when you go offline and switches automatically — you can continue editing files, and all changes are saved locally. When the connection returns, everything syncs back to the cloud automatically.

Project Sharing

Any project can be shared via a public link — no account required to view. Share links give read-only access to the project's files and let anyone see your code without being able to edit it.

1. 1

   Open project settings

   Navigate to your project and open the Share or Settings panel.

2. 2

   Generate a share link

   Click Generate Link. Cloudpen creates a unique token-based URL for the project.

3. 3

   Set an expiry (optional)

   Share links can be set to expire after a chosen number of days, or left permanent.

4. 4

   Share

   Anyone with the link can view the project's files in read-only mode. No login required.

Starred Projects

You can star any public project or template to save it for later. Stars also help surface popular community projects — the more stars a project has, the higher it ranks in the Templates and Explore pages.

• Star any public project from its project page or the Templates marketplace
• View all your starred projects from the Starred section in the sidebar
• Stars are public — creators can see their star counts
• Unstar at any time from the same button

Frontend Preview

HTML, CSS, and JavaScript are executed in a sandboxed iframe inside the browser. Changes are reflected immediately — no server round-trip required. Ideal for web pages, games, and interactive demos.

Backend Execution

Server-side languages run in isolated containers on the Cloudpen server. Each execution is isolated from other users, ensuring security and preventing cross-user interference.

Supported Languages

How Deployment Works

1. 1.Click the Deploy button in the editor or project detail page.
2. 2.Cloudpen automatically creates a subdomain from your project name.
3. 3.Your site is live at myproject.cloudpen.dev within seconds.
4. 4.An SSL certificate is automatically provisioned — HTTPS included at no extra charge.
5. 5.Share the link, embed it in your CV, or send it to a client.
6. 6.On Pro or Team plans, connect your own custom domain (e.g. myportfolio.com).

Removing a Deployment

You can take a project offline at any time from the project's deployment settings. Removing a deployment deletes all hosted files and releases the subdomain.

Static Hosting

The current deployment mode supports static projects: pure HTML, CSS, and JavaScript. This covers portfolios, landing pages, games, and any project that does not require a running server process.

Qualifies as static:

• Pure HTML, CSS, and JavaScript
• Vanilla JavaScript portfolios, landing pages, and simple games
• React/Vue projects pre-built or served via CDN
• Static site generator output (Jekyll, Hugo) — the built files, not the source

React / Vue Auto-Build

React, Vue, and Vite projects are detected automatically. Cloudpen runs the build process for you — no need to run npm run build locally. The resulting static output is deployed instantly.

React Project Structure

For Cloudpen's build system to correctly compile and deploy your React project, your files must follow this structure:

index.html          ← must be at root, not inside src/
package.json
vite.config.js
tailwind.config.js  ← if using Tailwind v3
postcss.config.js   ← if using Tailwind v3
src/
  main.jsx          ← entry point
  App.jsx
  style.css         ← CSS must be inside src/
  components/
  pages/

index.html (at project root):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

src/main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './style.css'   // ← must import CSS from src/

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Tailwind CSS Setup

Cloudpen supports both Tailwind CSS v3 and v4. The setup differs between versions — use the guide matching your installed version.

Tailwind v3 (recommended)

Add to package.json devDependencies:

"tailwindcss": "^3.4.0",
"postcss": "^8.4.47",
"autoprefixer": "^10.4.20"

Create tailwind.config.js at project root:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

Create postcss.config.js at project root:

export default {
  plugins: { tailwindcss: {}, autoprefixer: {} },
}

Add to src/style.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind v4

Add to package.json devDependencies:

"@tailwindcss/vite": "^4.0.0",
"tailwindcss": "^4.0.0"

Update vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()]
})

Add to src/style.css:

@import "tailwindcss";

Troubleshooting

Custom Domains

Available on Pro and above. Serve your project from a custom URL like yourdomain.com instead of the default cloudpen.dev subdomain.

1. 1.Purchase a domain from any registrar (Namecheap, GoDaddy, Cloudflare, etc.).
2. 2.Go to Cloudpen project settings and enter your custom domain.
3. 3.Add the CNAME record displayed by Cloudpen to your DNS panel.
4. 4.Click Verify — Cloudpen confirms DNS propagation.
5. 5.Cloudpen issues an SSL certificate automatically. Your site is live with HTTPS.

Capabilities

Custom API Key (BYOK)

By default, Quill runs on Cloudpen's shared AI pool. If you already have API access to OpenAI, Anthropic, Gemini, or another supported provider — or if you need more AI requests than your plan includes — you can connect your own key and use it directly inside the editor.

Supported providers

How to connect your key

1. 1

   Go to Settings → Quill AI

   Open your account settings and navigate to the Quill AI tab.

2. 2

   Select your provider

   Choose OpenAI, Anthropic, Gemini, Groq, xAI, or OpenRouter from the dropdown.

3. 3

   Enter your API key and model

   Paste your key and select the model you want Quill to use. The key is encrypted immediately — it is never stored in plain text.

4. 4

   Save and activate

   Click Save. Then click "Use this key" to set it as active. Quill switches to your key instantly.

5. 5

   Start using Quill

   Open any project and use Quill as normal. All AI requests now go directly through your key, with no Cloudpen-side quota limits.

Managing your keys

Usage Limits by Plan

Cloudpen's shared AI pool applies daily request limits per plan. Connecting your own key removes these limits entirely.

Roles & Permissions

The Team plan includes 3 seats and allows unlimited collaborators per project. Additional seats can be added at $9/seat/month.

Features

Forking a Template

Forking is the primary action on the Templates page. It copies the entire project — all files, folder structure, and dependencies — into your workspace and opens the editor immediately.

1. 1

   Browse templates

   Filter by type (React, Vue, Vanilla JS, Python, etc.), sort by popularity or forks, or search by name.

2. 2

   Preview the live site

   Click Preview on any card to open the deployed site in a modal — see exactly what the template looks like before forking.

3. 3

   Fork

   Click Fork. Cloudpen copies all project files into your workspace and opens the editor. You're ready to build.

Official vs Community

Installation

The Cloudpen CLI requires Node.js 16 or above. Install it globally via npm:

npm install -g cloudpen-cli

After installing, authenticate with your Cloudpen account:

cloudpen login

Commands

Search Modes

Search Options

The Real Difference

Cloudpen's advantage over local editors isn't just convenience — it's a fundamentally different architecture. With Cloudpen, the heavy computation runs on the server, not the user's device. A developer on a $150 Android phone can write, run, and deploy a full React application on Cloudpen. That is genuinely impossible with VS Code or Cursor without a capable local machine.

vs VS Code & Cursor

VS Code and Cursor are local tools. They require installation, depend on your machine's specs, and need you to manually set up Node, Python, PHP, Git, and databases. No local editor works on mobile at all. Cursor is VS Code with an AI layer — still local-only and costs $20/month just for AI. Cloudpen includes AI, deployment, storage, and collaboration at $12/month.

vs GitHub & Vercel

Cloudpen meaningfully overlaps with both GitHub and Vercel for the workflows most developers use day-to-day. For GitHub: Cloudpen handles project storage, version history, shareable links, forking, and team collaboration with role-based access. GitHub integration is also built in, so the two can complement each other.

For Vercel: one-click deploy to a live HTTPS URL, React/Vue/Vite auto-build, custom domain support, and permanent deployments on Pro — without requiring a separate account, billing cycle, or leaving the editor.

A professional developer today typically pays for GitHub, Vercel, and GitHub Copilot — $30–50/month minimum, across three platforms with three logins. Cloudpen collapses all of that into one tab at $12/month.

Who Cloudpen Is For