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

Git Panel

A full Git workflow built directly into the editor sidebar — no separate terminal commands required. The Git Panel runs the real Git CLI under the hood inside your project's isolated container, so behavior matches exactly what you'd get on your local machine.

Daily push/pull limits by plan

SFTP Hosting Deploy

Push or pull your project directly to any shared-hosting account over SFTP — cPanel, DirectAdmin, or any standard SFTP-compatible host. Transfers run in a dedicated background queue with live progress updates, so you can keep editing while a deploy is in flight.

Daily push/pull limits by plan

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 — for frontend projects only.
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.

Frontend-Only Static Hosting

The current deployment mode supports frontend projects only: pure HTML, CSS, and JavaScript, and framework projects (React, Vue, Angular) that build down to static output. This covers portfolios, landing pages, games, and any project that does not require a persistently running server process.

Qualifies for one-click Deploy:

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

Does NOT qualify for one-click Deploy (not supported yet):

• Backend frameworks — Node/Express, Django, Flask, FastAPI, Laravel, Rails, .NET, Spring, etc.
• Full-stack apps that pair a frontend with a backend API or database in the same deploy
• Any project that needs a persistently running server process, not just a build step

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, for frontend deployments. 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

Data Sources (Quill as MCP Client)

Connect Quill directly to a live backend — Supabase, Postgres, Neon, PlanetScale, GitHub, or any custom MCP endpoint — so it can query real schema, tables, and structure before writing code, instead of guessing at your database or asking you to paste it in manually.

Daily MCP tool call limits by plan

MCP Server (Cloudpen as MCP Server)

The other direction: let external AI tools — Claude Desktop, Claude Code, Cursor, or any MCP-compatible client — connect directly to a Cloudpen project. Once connected, the tool can read your files, check deployment status, and see your git history right from its own interface.

How to connect an AI client

1. 1

   Open the MCP panel

   Go to any project and switch to MCP → MCP Server in the sidebar.

2. 2

   Create a server token

   Give it a label (e.g. "Claude Desktop"), choose read-only or read+write, and set an expiry.

3. 3

   Confirm, if writing

   If you enabled write access, you'll be emailed a one-time code to confirm it's really you before the token is created.

4. 4

   Copy the token

   The raw token is shown once — copy it immediately. Cloudpen cannot show it to you again after this.

5. 5

   Paste into your AI client's config

   Use it as the bearer token for https://mcp.cloudpen.dev in your client's MCP configuration file.

MCP Server availability by plan

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, native Git, SFTP deploys, 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's Git Panel handles staging, commits, branches, and push/pull directly against your repos, plus project storage, version history, shareable links, forking, and team collaboration with role-based access.

For Vercel: one-click deploy to a live HTTPS URL for frontend projects (React/Vue auto-build, plain HTML/CSS/JS), custom domain support, and permanent deployments on Pro — without requiring a separate account, billing cycle, or leaving the editor. Note that Vercel supports full-stack/serverless deployments that Cloudpen's one-click Deploy does not yet support. And for developers on traditional shared hosting, SFTP Hosting Deploy pushes straight to cPanel or DirectAdmin, something neither GitHub nor Vercel does natively — this is also the current path for deploying backend or full-stack projects on Cloudpen.

A professional developer today typically pays for GitHub, Vercel, and GitHub Copilot — $30–50/month minimum, across three platforms with three logins. Cloudpen collapses most of that into one tab at $12/month, with backend/full-stack one-click deployment on the roadmap.

Who Cloudpen Is For