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

Terminal

Every project includes a real, full terminal session running inside its own isolated container, the same one used by Run, Git, and the in-editor browser tab. It automatically switches into the right language environment based on what's in your project.

Java

In addition to JavaScript, Python, and PHP, Cloudpen's terminal supports Java. Opening a terminal in a project containing a pom.xml, build.gradle/build.gradle.kts, or a Main.java file automatically runs your session in a Java 21 environment.

From there you can run standard Java tooling directly:

javac Main.java && java Main

mvn install

./gradlew build

Maven and Gradle build/install commands are treated the same as other package installs, they get network access and the extended install timeout needed to pull dependencies.

Installing Packages & Scaffolding Projects

Cloudpen's terminal isn't limited to running your existing code, on paid plans, you can use it exactly like a local machine's terminal to set up a project from scratch.

Scaffold a new Laravel project:

composer create-project laravel/laravel my-app

Scaffold a new Next.js project:

npx create-next-app@latest my-app

Install a package into an existing project:

npm install axios

composer require guzzlehttp/guzzle

pip install requests

Anything your command creates, modifies, or deletes is automatically synced back into your project's file explorer once the command finishes, no manual refresh needed.

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 inspects your files for a backend runtime signature, currently composer.json, an artisan file, or index.php for PHP.
3. 3.If a backend runtime is detected, your project is deployed as a persistent container (see Backend & Fullstack Deployment below). Otherwise it's treated as a frontend build and the static output is deployed.
4. 4.Your project is live at myproject.cloudpen.dev within seconds, with an automatically-provisioned SSL certificate.
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).

Frontend Deployment

Deploys pure HTML/CSS/JS and framework projects that build down to static output, portfolios, landing pages, games, and anything that doesn't need a persistently running server process.

Qualifies for frontend deployment:

• 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

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";

Backend & Fullstack Deployment (PHP/Laravel)New

Cloudpen can deploy a PHP/Laravel project as a real, persistent backend app, not a static preview. Once deployed, your project runs continuously at https://yourproject.cloudpen.dev, backed by its own isolated container.

How it works

Cloudpen detects a PHP backend by the presence of composer.json, an artisan file, or an index.php. Once detected:

• Your project's files are copied into a dedicated deployment directory.
• A private container is started running PHP-FPM 8.2, with your project mounted in as its working directory.
• Cloudpen bootstraps the environment automatically: writes your environment variables (including database credentials, if you've provisioned a hosted database) into .env, generates an APP_KEY if needed, runs composer install if vendor/ isn't already present, and clears cached config.
• A health check confirms your app is actually responding before traffic is routed to it.

Viewing logs

Once your backend is live, open the Logs tab next to Terminal and Output in the bottom panel. Cloudpen lists every log file your app has actually written, newest first, in a dropdown you can select from. If your project's LOG_CHANNEL is set to daily, each day's log appears as its own dated file in that same dropdown (e.g. laravel-2026-08-22.log, laravel-2026-08-23.log), Cloudpen re-scans the actual log directory on every load, so whatever files your app has genuinely produced show up automatically, with a Refresh button to pull the latest without leaving the page.

Availability

Backend/fullstack deployment is available starting on paid plans, with the number of concurrent deployments determined by your plan. Check your Billing or Add-ons page for your exact allowance, if you need more than your plan includes, the Deployment addon lets you add extra slots without upgrading your whole plan.

Removing a Deployment

You can take a project offline at any time from the project's deployment settings. Removing a deployment stops and removes the live resource, the static build, or for backend deployments, the running container, clears its routing, and releases the subdomain. Your source code in the editor is always untouched.

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.

Troubleshooting

What's Coming

Provisioning a Database

From your project, choose Add Database. Cloudpen creates:

• A dedicated MySQL database, unique to this project.
• A scoped database user whose access is limited to that one database only, it has no visibility into any other project's data, and no server-wide privileges.

Provisioning typically completes in a few seconds. Once live, your database's connection details (host, port, database name, username) are viewable from the project's Database panel, the password itself is never shown or exported directly; it's only ever used internally when Cloudpen injects it into your deployed app's environment, or when you open phpMyAdmin.

phpMyAdmin Access

Click Manage Database to open phpMyAdmin directly from your browser, no separate login required. Cloudpen securely hands off a one-time, short-lived access token behind the scenes so you land straight in your database's own phpMyAdmin session, scoped only to that database.

Connecting External Projects

Availability

Hosted databases are available starting on paid plans, with the number of databases and storage determined by your plan, check your Billing or Add-ons page for your exact allowance. If you need more, the Database addon lets you add extra databases without upgrading your whole plan.

What's Coming

How a Deploy Works

1. 1.Write a contract in Solidity, importing OpenZeppelin's audited base contracts (ERC20, Ownable, etc.) where useful.
2. 2.Click Deploy in Cloudpen.
3. 3.Hardhat compiles the Solidity into bytecode and an ABI (a description of the contract's callable functions).
4. 4.Hardhat's deploy script connects to the network through an RPC URL, either your own, or Cloudpen's shared Sepolia pool.
5. 5.Your wallet's private key signs the deployment transaction. This key is always yours; Cloudpen never has access to it.
6. 6.The signed transaction is sent through the RPC connection to a real Sepolia node and executed, charging a small gas fee in test ETH.
7. 7.The network permanently records the new contract at a fresh contract address.
8. 8.That address, and every detail of the transaction, is now publicly visible on Etherscan.

Shared RPC Pool

Before this feature, deploying to Sepolia required two separate credentials in a project's Env Vars: an RPC provider connection and a wallet private key. Most beginners have never heard of an RPC provider before deploying their first contract, so Cloudpen now maintains its own Alchemy RPC key that any user can fall back to automatically.

• Scoped to Sepolia only, a testnet, so no real funds are ever at stake.
• The RPC connection only provides read/relay access to the network, it never grants control over anyone's funds or contracts.
• Your wallet's private key is never shared and stays bring-your-own-key at every plan.
• Metered separately from the general deploy quota, so shared-pool usage always has its own visibility and limit.

Plan Limits

Web3 Deploy covers any Sepolia deployment, whether it uses your own RPC key or the shared pool. Shared RPC Pool is a separate, smaller daily allowance for deployments that fall back to Cloudpen's own Alchemy quota.

Templates

Three official starter templates are available from the Templates marketplace, each pre-wired with contracts, tests, and a deploy script:

• Hardhat Starter, a minimal Hardhat project ready to compile and deploy.
• ERC-20 Token, a fungible token contract built on OpenZeppelin's ERC20 base contract.
• NFT Contract, a non-fungible token contract ready to mint and deploy.

Glossary

What's Coming

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. You can also connect a custom base URL for any OpenAI-compatible provider, and search live for available OpenRouter models directly from the key form.

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, OpenRouter, or Custom (OpenAI-compatible) from the dropdown.

3. 3

   Enter your API key and model

   Paste your key and select the model you want Quill to use, for OpenRouter, search live for any available model; for a custom provider, also enter its base URL. 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, custom domain support, and permanent deployments on Pro, without requiring a separate account, billing cycle, or leaving the editor. And for developers on traditional shared hosting, SFTP Hosting Deploy pushes straight to cPanel or DirectAdmin, something neither GitHub nor Vercel does natively.

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.

Who Cloudpen Is For