Documentation — Cloudpen

DocsWhat is Cloudpen?

What is Cloudpen?

Cloudpen is a browser-based cloud development platform that enables developers to write, run, and deploy code from any device — including mobile phones — without installing anything.

It brings together a professional code editor, a code execution engine, instant deployment, a CLI tool, GitHub integration, an AI assistant, and team collaboration tools into a single unified platform.

Mobile-first

Works on any device, including phones

Zero install

Runs in any modern browser

One-click deploy

From code to live URL instantly

Built-in AI

Quill AI assistant in the editor

GitHub sync

Import and auto-sync repos

Team-ready

Collaborate with your whole team

Primary URL: cloudpen.dev · Deployed projects live at yourproject.cloudpen.dev

Quick Start

Get from zero to a live project in under five minutes.

1
Create an account
Visit cloudpen.dev and sign up. No credit card required on the Free plan.
2
Create or import a project
Start blank, pick a template, or import directly from a GitHub repository.
3
Write your code
Use Cloudpen's professional code editor — with IntelliSense, syntax highlighting, and multi-cursor support — right in your browser, on any device.
4
Run it
Click Run. Frontend projects render in a live preview pane; backend code runs in an isolated container.
5
Deploy
Click Deploy. Your project is live at yourproject.cloudpen.dev with HTTPS — no config needed.

Core Philosophy

Cloudpen's mission is to give every developer in the world — regardless of device, location, or economic circumstance — access to a complete, professional development environment.

Zero installationWorks in any modern browser, on any device.

Mobile-first designThe only professional cloud IDE designed to work well on phones.

ConsolidationOne platform replaces VS Code + GitHub + Vercel + Copilot.

AffordabilityAt $12/month, Cloudpen costs less than the sum of its parts.

Emerging market focusPricing, features, and UX designed for the global developer community.

The Code Editor

At the heart of Cloudpen is a professional-grade code editor built for serious development work. This is not a simplified web editor — it delivers the full desktop IDE experience with IntelliSense, multi-cursor editing, rich language support, and deep keyboard shortcut compatibility, running entirely in the browser with no installation required.

Cloudpen's editor provides deep language intelligence and a familiar interface that professional developers already know — running entirely in the browser, on any device.

Language Support

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

JavaScript / TypeScript

HTML / CSS / SCSS

Python

PHP

C / C++

Java

Rust

Ruby

Swift

Kotlin

Shell / Bash

SQL

JSON / YAML / TOML

Markdown

Vue

React (JSX/TSX)

XML

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.

The in-editor browser is available on all plans. It replaces the need for a separate browser window during development — everything stays in one place.

🖥️ Live Preview

See your app running in real time next to your code. Updates automatically on every save with hot reload.

🛠️ DevTools Panel

Built-in Network, Console, and Elements tabs — inspect your app without leaving the editor.

⚡ JS REPL

Run JavaScript expressions directly against your running app from the built-in console.

🔄 Hot Reload

File saves trigger an instant reload of the preview panel. No manual refresh needed.

🖱️ Context Menu

Right-click anywhere in the preview to access inspect, reload, and copy URL actions.

↗️ Pop-out

Open the preview in a full browser tab at any time without losing your editor state.

The DevTools panel is powered by the browser's native inspection APIs — it shows real network requests, console output, and DOM structure from your running project, not a simulation.

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.

Code Execution

Cloudpen lets you run code directly in the platform. Execution happens in two modes depending on the type of code.

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.

Containers enforce strict resource limits. Code that runs infinitely or consumes excessive resources is automatically terminated.

Supported Languages

Language	Environment	Notes
`JavaScript`	Browser (inline)	Instant, no server needed
`HTML/CSS/JS`	Browser (iframe)	Live preview with hot reload
`Python`	Docker container	Python 3.x, standard library available
`PHP`	Docker container	PHP 8.x, Composer dependencies supported
`C`	Docker container	GCC compilation + execution
`C++`	Docker container	G++ compilation + execution

Deployment

Cloudpen's one-click deployment publishes your project to the internet immediately — no configuration, no separate hosting account, no terminal commands.

How Deployment Works

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

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.

No local build tools required. Cloudpen handles npm install and the build command automatically on the server.

React Project Structure

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

project 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/

Common mistake: placing index.html inside src/ instead of at the project root. Vite requires index.html at the root level — if it's inside src/, the build will succeed but nginx will serve raw source files instead of the compiled bundle.

index.html (at project root):

index.html

<!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:

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

Tailwind v4 does not use tailwind.config.js or postcss.config.js — those files are only needed for v3.

Troubleshooting

⚠ Blank page after deploy

Cause: index.html is inside src/ instead of at the project root.

Fix: Move index.html to the project root. The script tag should point to /src/main.jsx.

⚠ Tailwind classes have no effect

Cause: The CSS file is outside src/, or main.jsx doesn't import it, or the config content paths don't match your file structure.

Fix: Ensure src/style.css exists with @tailwind directives, and that main.jsx imports './style.css'.

⚠ Build failed — missing module

Cause: A package is imported in your code but not listed in package.json.

Fix: Add the missing package to dependencies in package.json. Common ones: react-router-dom, axios, framer-motion.

⚠ Build failed — wrong template type

Cause: Project was created as vanilla/blank so the build step is skipped entirely.

Fix: Cloudpen auto-detects React/Vue from your files. If the issue persists, check your template type in Project Settings.

⚠ MIME type error on deployed site

Cause: Build failed silently and nginx is serving raw .jsx files directly.

Fix: Check your package.json has react and react-dom in dependencies, and that vite.config.js includes the React plugin.

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

AI Assistant — Quill

Cloudpen includes Quill, a built-in AI assistant integrated directly into the code editor. Quill helps you understand code, identify bugs, and get implementation suggestions — without ever switching to an external tool.

Quill is built into the editor, not a separate tab. Zero context-switching — the AI is aware of your current file, active selection, and project context.

Capabilities

🔍 Code Explanation

Select any code block and ask Quill to explain it in plain language.

🐛 Bug Detection

Scan the current file or selection for potential bugs and logic errors.

🔧 Fix Suggestions

When a bug is found, Quill proposes a concrete fix with an explanation.

✨ Code Generation

Ask Quill to write a function, generate a component, or scaffold a feature.

♻️ Refactoring Advice

Suggestions to improve code structure, naming conventions, and efficiency.

Custom API Key (BYOK)

Bring Your Own Key Pro+

Pro and above users can connect their own AI API key to Quill. When active, Quill uses your key exclusively — bypassing Cloudpen's shared daily limits entirely. Your usage is only limited by your own API quota.

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

OpenAIgpt-4o, gpt-4o-mini, gpt-4-turboGet key

Anthropicclaude-3-5-sonnet, claude-3-haikuGet key

Google Geminigemini-1.5-pro, gemini-1.5-flashGet key

Groqllama-3.1-70b, mixtral-8x7bGet key

xAIgrok-beta, grok-vision-betaGet key

OpenRouterAny model available on OpenRouterGet key

How to connect your key

1
Go to Settings → Quill AI
Open your account settings and navigate to the Quill AI tab.
2
Select your provider
Choose OpenAI, Anthropic, Gemini, Groq, xAI, or OpenRouter from the dropdown.
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
Save and activate
Click Save. Then click "Use this key" to set it as active. Quill switches to your key instantly.
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

Save a new keyAdd up to multiple keys from different providers. Only one can be active at a time.

Switch active keyClick "Use this key" on any saved key. The others are deactivated immediately.

DeactivateRemoving the active key reverts Quill to Cloudpen's shared pool instantly.

Delete a keyPermanently removes the key from Cloudpen's storage. This cannot be undone.

Security: Your API key is encrypted with AES-256 the moment it is saved. Only the last few characters are shown in the UI — the full key is never returned in any response. Cloudpen proxies all requests through the backend so your raw key is never exposed to the browser.

If your key returns an error: Quill will surface a clear message in the editor with a direct link to Settings → Quill AI so you can fix or replace the key. Cloudpen does not fall back to the shared pool while a custom key is active — the error is shown explicitly so you stay in control.

Usage Limits by Plan

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

Plan	Requests / day	Max characters / request
Free	10	2,000
Pro	100	20,000
Team	1,000	100,000
Enterprise	5,000	Unlimited

When a custom key is active, Cloudpen's daily limits do not apply. Your usage is governed entirely by your own API provider's quota and billing.

Team Collaboration

Cloudpen supports team workspaces with role-based access control. Teams share a unified workspace, collaborate on projects, and manage billing centrally.

Roles & Permissions

ReadView files and deployment URLs. Cannot make changes.

WriteEdit files, create projects, and trigger deployments.

AdminManage members, billing, and all workspace settings.

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

GitHub Integration

Cloudpen integrates directly with GitHub, letting you import, sync, and update projects without leaving the platform.

Features

Feature	Description
`Account Connection`	Connect a GitHub account via OAuth. Done once, persists across sessions.
`Repo Import`	Import any repository with one click. Public and private repos supported.
`Pull Latest`	One-click pull of the latest commits from GitHub into your Cloudpen project.
`Auto-Sync`	Every push to a GitHub branch automatically updates the Cloudpen project in real-time.
`Push Changes`	Push changes from Cloudpen back to GitHub. (Roadmap)

CLI Tool

Cloudpen includes a command-line interface (CLI) that lets you interact with your projects from your local machine. Familiar to developers who use Git — simple, explicit commands with clear feedback.

Commands

bash

cloudpen pushUpload all local project files to Cloudpen

cloudpen pullDownload all project files to the local machine

cloudpen deployTrigger a deployment from the command line

cloudpen loginAuthenticate with your Cloudpen account

cloudpen initInitialize a new Cloudpen project in the current directory

cloudpen statusShow project status, last deploy, and live URL

Global Search

Cloudpen includes a VS Code–style global search panel, accessible via the Search icon or with Ctrl+Shift+F.

Search Modes

This ProjectScopes search to the currently open project. Fast and focused — the default mode.

All ProjectsSearches every project in your workspace. No cross-workspace data is ever accessible.

Search Options

Option	Description
`Case Sensitive`	Match exact letter casing in results.
`Whole Word`	Only match complete words, not partial matches within a word.
`Regular Expression`	Use a regex pattern as the search query. Validated before searching.
`Include Globs`	Glob patterns to restrict which files are scanned (e.g. .jsx, src//.ts).
`Exclude Globs`	Glob patterns to exclude files from search (e.g. node_modules/*, .min.js).

Find and Replace is fully supported across files. A confirmation modal shows a preview before any changes are applied. Replace is disabled in All Projects mode to prevent accidental cross-project edits.

Cloudpen vs The Alternatives

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.

The key insight: Cloudpen is not trying to beat VS Code for a developer with a fast MacBook Pro. It is the complete development environment for the developer working across multiple devices, or who is tired of juggling multiple paid tools.

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.

Feature	Cloudpen	VS Code / Cursor	GitHub + Vercel
Works on mobile
Works on any browser
Zero installation
Built-in code execution		Extensions required
One-click deployment			Vercel only
Built-in AI assistant		$20/mo extra
Team collaboration		Extensions only	GitHub only
Monthly cost (all-in)	$12/mo	$30–50/mo	$30–50/mo

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

✓

Developers on low-spec devices

Cloudpen offloads all computation to the server. A $150 phone can run a full-stack app.

✓

Developers on mobile

The only professional cloud IDE designed to work well on phones. No local tool does this.

✓

Developers across multiple devices

Open any project from any browser, instantly. No sync required.

✓

Teams and freelancers

One platform for code, deployment, collaboration, and AI — at one-third the cost of separate tools.

✓

Students and bootcamp cohorts

Zero setup, zero cost on the free tier. Start building on day one from any device.

Pricing & Plans

Cloudpen operates on a freemium model with a clear upgrade path. All plans include the core editor, code execution, and CLI access.

Launch Promo Pricing: Current prices are promotional launch rates. Pro is $12/mo (orig. $17) and Team is $29/mo (orig. $39). These are time-limited.

Education discount: Students and bootcamp learners qualify for 50% off the Pro plan — $6/month instead of $12. Apply at cloudpen.dev/students. Approval within 24 hours.

Free

✓100 MB storage
✓5 projects (3 private)
✓3 active deployments (7-day expiry)
✓10 AI requests/day (Quill)
✓1 API key · CLI access
✓Public share links
✓In-editor browser tab
✓GitHub integration