DEV Community: Augustine

I Built a Full Automobile Website on Cloudpen in Minutes — Here's What That Actually Means

Augustine — Wed, 17 Jun 2026 04:05:34 +0000

I just deployed a responsive automobile company website with parallax animations, and the entire build happened inside Cloudpen — no local setup, no terminal, no deployment pipeline to configure.

Live site: https://aureve-motors.cloudpen.dev/

What I Used

Cloudpen's in-browser editor — full-featured, feels like VS Code in the browser.

Quill (AI Agent) — not just autocomplete. Quill helped me write components, fix layout issues, and refactor sections on the fly. It's genuinely agentic.

One-click deploy — hit deploy, get a live URL with SSL automatically enabled. That's it.

Templates Marketplace — if you're starting from scratch and don't know where to begin, there are templates built by Cloudpen and the community. One click and it's yours to edit.

The Part That Surprised Me

I didn't touch a server. I didn't configure nginx. I didn't open a terminal once.

For frontend projects especially, Cloudpen has genuinely removed the gap between "idea" and "live link you can share."

Pro plan adds custom domain support — so what you build doesn't just work, it looks like a real product.

If you've been sleeping on it: cloudpen.dev

Your Next Project Is Already Half Built

Augustine — Sun, 14 Jun 2026 19:58:00 +0000

We just shipped a Template Gallery for Cloudpen — here's why we built it

Every time someone tried Cloudpen for the first time, the feedback followed a pattern.

They liked the editor. They liked the one-click deploy. But a surprising number of people got stuck at the very beginning — staring at a blank project, unsure how to structure it for Cloudpen's build system.

That friction was on us. So we fixed it.

What we shipped

Cloudpen now has a Template Gallery — a curated library of ready-made starter projects you can preview live and fork into your workspace in one click.

Every template is a real deployed project. Before you commit to anything, you can open a live preview of exactly what it looks like and how it behaves. If it's what you need, you fork it. A full copy — all files, folder structure, and dependencies — lands in your workspace instantly and the editor opens.

No scaffolding. No config. You start from something that already works.

What's in the gallery

The initial library covers the starters developers actually reach for:

React + Vite
Vue + Vite
Vanilla JS
Portfolio templates
Landing page starters
More being added based on feedback

Official vs Community templates

Templates are split into two types.

Official templates are built and maintained by the Cloudpen team. They're verified to build correctly, deploy without issues, and follow the project structure Cloudpen's build system expects. They carry a verified badge.

Community templates are built by Cloudpen users and shared publicly. They go through a review before appearing in the gallery, but they're maintained by their authors. This is also how you can submit your own — deploy a public project, submit it, and if it passes review it goes live in the Community tab.

Why we built it this way

We made a deliberate call to make every template a live deployed project rather than just a ZIP file or a code snapshot. The preview had to be real — you're seeing the actual running output, not a screenshot.

The fork had to be instant. The moment you click Fork, the editor opens. There's no loading screen, no "initializing project" spinner. You're in.

And your fork is completely independent. Changes you make never touch the original template.

Try it and tell us what's missing

The gallery is live now at cloudpen.dev.

We're actively building out the library and we're prioritising based on what people actually ask for. If there's a framework, stack, or starter you wish was already there — drop it in the comments. We read everything.

cloudpen #webdev #opensource #buildinpublic

Quill: AI That Lives Inside Your Project, Not Another Tab

Augustine — Thu, 11 Jun 2026 12:23:00 +0000

We built an AI coding assistant that doesn’t live in another tab

Most AI coding tools still interrupt your flow.

You hit an error → open a new tab → paste code → explain your project → wait for a response → copy everything back.

That loop doesn’t feel dramatic, but it quietly breaks concentration over and over.

We built Quill to remove that friction entirely.

AI that stays inside your editor

Quill lives directly inside Cloudpen’s editor as a movable panel that stays alongside your code while you work.

It doesn’t try to pull you away from your environment. It adapts to it.

You can drag it anywhere, keep it open while you code, or pull it up only when you need it.

No tab switching. No context loss. No re-explaining your project every time.

But the real difference isn’t where Quill lives.

It’s what it knows.

Context is the real product

Because Quill runs inside your project, it already understands what you’re working on.

That changes everything:

Highlight code → explain or fix it
Right-click a file → get a full explanation of what it does
Ask for a review → get improvements based on your actual codebase
Debug errors → without copy-pasting into another tool
Generate functions/components → directly inside your workflow

It’s not “AI you consult.”

It’s AI that is already inside the problem space.

Why a movable panel?

We spent a lot of time on this decision.

We tried:

A persistent sidebar
A command palette
Inline ghost-text suggestions

We kept returning to the same idea: developers don’t work the same way.

Some people want an assistant always visible.
Others only want it when they’re stuck.

A fixed sidebar forces a workflow on you.

A floating, movable panel doesn’t.

It stays present without being opinionated about how you should code.

Developers don’t want one AI model

Another thing we learned: model preference is personal.

Some developers prefer GPT-4o. Others use Claude, Gemini, Grok, or OpenRouter models.

So we built BYOK (Bring Your Own Key) into Cloudpen Pro.

You can plug in:

OpenAI
Anthropic
Gemini
Groq
xAI
OpenRouter

Quill will use your key directly.

No shared limits. No hidden caps. No forced model choices.

Your usage is only constrained by your provider.

For everyone else

If you don’t bring your own key, Quill still works out of the box using Cloudpen’s shared pool.

You get Limited requests/day, which is enough for a full coding session for most developers.

We arrived at that number after testing real usage patterns during beta—it covers typical daily workflows without forcing constant upgrades.

Quill wasn’t supposed to be the main feature

Cloudpen started as a browser-based IDE:

Real terminal
Live deployments
GitHub integration
Full development environment in the browser

Quill was originally just an add-on.

But over time, it became one of the most used parts of the platform.

Because once it’s sitting right beside your code, it’s hard to go back to context switching.

Closing thought

The best AI coding assistant isn’t the one in another tab.

It’s the one already sitting next to your code when you need it.

If you’ve used AI tools while coding, I’m curious:

Do you prefer AI inside your editor, or do you still rely on separate tools like ChatGPT/Claude tabs—and why?

Why We Cut Cloudpen Pro's Price in Half for Students

Augustine — Tue, 09 Jun 2026 23:03:19 +0000

Students Kept Asking About Pricing. Here's What We Changed.

Over the past few months, one piece of feedback kept showing up in our inbox.

"Do you have a student discount?"

At first, I didn't think much of it. But the requests kept coming.

Some were university students learning web development. Others were bootcamp students trying to build projects for their portfolios. A few were self-taught developers coding from older laptops or even their phones.

What they all had in common was simple: they wanted access to professional development tools without adding another expensive subscription to their monthly expenses.

That feedback pushed us to rethink our pricing.

Today, we're launching a student plan for Cloudpen Pro at $6/month.

That's half the regular price, and unlike many introductory discounts, it's locked in for every renewal as long as the account remains eligible.

For anyone unfamiliar with Cloudpen, it's a browser-based cloud IDE designed to let developers write, run, and deploy applications without installing anything.

The student plan includes:

A professional VS Code-quality editor powered by Monaco
A real terminal environment
Support for Python, C, C++, Node.js, PHP, Go, and Ruby
One-click deployment to a live URL
Automatic SSL
Permanent hosting
GitHub integration with automatic redeployments
Quill AI assistant with 100 requests per day included
Unlimited projects
1GB storage
Custom domain support
Full mobile optimization

One thing we were careful about: we didn't want the free plan to become unusable.

Too many developer tools advertise a free plan that becomes restrictive after a few minutes of use.

So we're keeping the free plan fully functional.

Free users still get:

5 projects
Real code execution
Terminal access
Deployments
No credit card requirement

The goal isn't simply to sell subscriptions.

The goal is to make it easier for people to learn, build, and ship projects regardless of the device they're using or the budget they have available.

If you're a student, the discount is applied automatically when you sign up using a university email address.

No promo codes. No forms. No approval process.

Just build.

What are your thoughts on student pricing for developer tools? I'd love to hear how other founders and developers approach it.

Why I built deployment into the IDE instead of making it a separate step

Augustine — Tue, 09 Jun 2026 10:14:51 +0000

Why does deploying a website still require 3 different platforms?

I've always found something strange about modern web development.

You can build an entire application in one place.

But the moment you're ready to share it with the world, you're suddenly juggling multiple services:

Your code lives in one place
Your hosting lives somewhere else
Your domain is managed somewhere else
SSL certificates are handled by another system
Deployment pipelines need their own configuration

For experienced developers, this is normal.

For beginners, it's often the most frustrating part of the entire process.

Over the last year, while building Cloudpen, I kept asking myself a simple question:

What if deployment was just part of the development experience instead of a completely separate workflow?

So that's what I built.

The deployment flow

When you finish a project in Cloudpen, you click Deploy.

That's it.

A live cloudpen.dev URL is generated within seconds.

SSL is automatically provisioned.

No deployment scripts.

No server setup.

No terminal commands.

No separate hosting account.

Custom domains

Custom domains follow the same philosophy.

Add a CNAME record in your DNS provider.

Click Verify inside Cloudpen.

Cloudpen handles SSL provisioning and configuration automatically.

The goal is to remove the common friction points that usually appear after a project is already finished.

GitHub integration

For developers who prefer Git-based workflows, Cloudpen supports GitHub repository integration.

Once connected, pushes to GitHub can automatically trigger redeployments.

Your live application stays synchronized with your repository without requiring additional deployment pipelines or manual publishing steps.

React and Vue projects

Another area that creates unnecessary friction is the build process.

Many developers end up switching between local environments, CI pipelines, and hosting dashboards just to get a production build online.

Cloudpen automatically detects React and Vue projects and runs the build process during deployment.

No local build step required.

No extra deployment configuration.

Why I built it this way

I don't think hosting platforms are the problem.

The problem is that deployment has gradually become a separate discipline.

For many projects, especially personal projects, prototypes, portfolios, internal tools, and MVPs, developers shouldn't need to think about infrastructure before they can share their work.

The ideal workflow should feel like this:

Build → Deploy → Share

Nothing more.

That's the direction I'm pushing Cloudpen toward.

I'm curious:

What part of deployment do you find most frustrating today?

We built a GitHub-style social layer inside our cloud IDE — here's why

Augustine — Sun, 07 Jun 2026 23:07:33 +0000

Most IDEs are isolated by design.

Your code lives in a workspace. Collaboration happens somewhere else. Discovery happens somewhere else. Building in public happens somewhere else.

We wanted to change that.

That's why we shipped Cloudpen Community.

Cloudpen is a browser-based cloud IDE with built-in deployment and collaboration features. The Community layer sits on top of that and gives every developer a public presence tied directly to their work.

What's included

🧑‍💻 Public profiles

Every account gets a profile at cloudpen.dev/u/username.

Profiles include:

Pinned projects
Star and fork counts
Contribution activity heatmaps
Languages and skills
Followers and following

Your work has a permanent public home.

🔍 Explore & Fork

Browse public projects from other developers.

See something interesting?

Fork it directly into your workspace and start building immediately.

No cloning.
No local setup.
No environment configuration.

Just open and build.

👥 Follow Developers

Discover developers whose work interests you and follow what they're building.

Instead of finding projects through social media posts, you can discover them directly where they're created.

🤝 Direct Project Collaborators

Invite specific developers to collaborate on projects.

Permissions are granular, so you control exactly who can view, edit, or manage project resources.

** 🏗️ Public Teams**

Teams can be public and open for anyone to request joining.

Permissions are role-based:

Owner
Admin
Write
Read-only

All permission checks are enforced at the API level.

** Why we built it**

Open source proved that developers learn faster when work is visible.

But most development tools still separate coding, discovery, collaboration, and community into different products.

We wanted them to exist in one place.

Cloudpen is no longer just a place to write code.

It's also a place to discover developers, collaborate on projects, and build in public.

🔗 cloudpen.dev/community

The feature I wish existed when my internet kept failing

Augustine — Sat, 06 Jun 2026 16:41:50 +0000

Most cloud development tools assume you're always online.

I grew up with unreliable internet, so that never felt like a safe assumption.

That's why I spent the last few weeks upgrading Cloudpen's Offline Mode.

Now, if your connection disappears:

→ Your workspace still loads from local cache
→ Files open normally
→ Changes are saved locally and queued automatically
→ Pending edits survive browser restarts
→ Sync resumes automatically when you're back online

The most challenging part wasn't storing changes offline.

It was conflict resolution.

If a file changes on the server while you're editing it offline, Cloudpen doesn't blindly overwrite anything. It pauses, shows both versions with a line-by-line diff, and lets you resolve the conflict before continuing.

The goal wasn't to build a degraded offline experience.

The goal was to make internet outages feel almost irrelevant.

cloudpen.dev

webdev #devtools #javascript #saas #buildinpublic

How I Added GitHub Integration and Automatic Repository Sync to Cloudpen

Augustine — Thu, 04 Jun 2026 19:45:13 +0000

One of the most requested features since I launched Cloudpen was GitHub integration.

Developers wanted a way to bring existing repositories into their workspace without manually uploading files or cloning repositories through a terminal. More importantly, they wanted Cloudpen to fit naturally into the workflows they already use every day.

Today, that feature is live.

The Goal

Cloudpen is a browser-based cloud development environment designed to make it possible to write code, run applications, preview changes, and deploy projects from a single workspace.

As more developers started using it, a common request kept appearing:

"Can I connect my GitHub repositories directly?"

The answer is now yes.

Connecting GitHub

The setup process is intentionally simple.

You connect your GitHub account once through OAuth. After authorization, Cloudpen can access repositories you choose to work with.

From there, importing a repository becomes a one-click operation.

Whether the repository is public or private, Cloudpen creates a workspace and makes the project immediately available for development.

No manual uploads.

No archive downloads.

No complicated setup process.

From Repository to Workspace

After importing a repository, the entire project becomes available inside Cloudpen.

You can:

Browse files
Edit code
Run applications
Use the integrated terminal
Preview applications
Deploy projects

All without leaving the browser.

The goal is to remove as much friction as possible between having source code and being productive with it.

Automatic Repository Sync

The feature I'm most excited about is automatic synchronization.

Once enabled, Cloudpen watches for updates to the repository.

Every time a new commit is pushed, Cloudpen automatically pulls the latest changes into the workspace.

This creates a much smoother workflow for teams and developers who work across multiple environments.

A typical workflow might look like this:

Develop locally
Push changes to GitHub
Cloudpen synchronizes automatically
Continue working or deploy directly

The process feels similar to how deployment platforms monitor repositories for changes, except the synchronization happens inside a complete development environment.

Flexible Workflows

One thing I wanted to avoid was forcing developers into a specific workflow.

Some developers prefer working locally and using cloud tools only when needed.

Others prefer doing everything directly in the browser.

Cloudpen supports both approaches.

Local-First Workflow

Develop locally
Commit changes
Push to GitHub
Let Cloudpen sync automatically
Deploy from Cloudpen

Cloud-First Workflow

Import repository
Develop directly in Cloudpen
Deploy with a click
Use GitHub for version history and backup

The platform adapts to how you already work.

Why This Matters

GitHub integration is more than a convenience feature.

For many developers, GitHub is the center of their workflow.

Repositories contain project history, collaboration records, pull requests, and deployment pipelines.

By connecting Cloudpen directly to GitHub, projects become easier to move between local environments, cloud workspaces, and deployment targets.

The result is less time managing infrastructure and more time building products.

What's Next

GitHub integration is an important milestone, but it's only one step toward making Cloudpen a complete browser-based development platform.

Recent updates have included:

An integrated browser for previewing applications inside the editor
Built-in developer tools
Hot reloading for previews
One-click deployments
Repository synchronization

And there's still a lot more to build.

If you'd like to try it out, Cloudpen is available at cloudpen.dev.

I'd love to hear your feedback and learn how GitHub fits into your development workflow.

I built a browser inside my code editor — here's how and why

Augustine — Thu, 04 Jun 2026 11:12:00 +0000

The Problem

When you're building a web app, your workflow usually looks something like this:

Edit code → Save → Switch to browser → Refresh → Check the result → Switch back to the editor.

Repeat that hundreds of times a day.

That browser switch seems small, but it adds up. When you're using a cloud-based editor, it's even more disruptive because your entire workspace lives in a single browser tab, and now you're constantly leaving it.

What I Built

I added an in-editor browser to Cloudpen, a VS Code-style cloud code editor I'm building.

It works like this:

• A Browser option in the Terminal menu opens a new tab inside the editor tab bar
• The tab includes a full address bar with back, forward, and refresh controls
• You can type localhost:3000 (or any URL) and load it directly inside the editor
• The tab title and favicon automatically update to match the loaded page
• A built-in DevTools panel provides a Console, Elements Inspector, and JavaScript REPL

The result is simple:

Run npm run dev in the integrated terminal, click the localhost URL, and see your application without ever leaving the editor.

The Technical Challenges

1. Same-Origin Policy

This was the biggest challenge.

An iframe loading localhost:3000 from an editor running on localhost:3001 is technically cross-origin because the ports are different.

As a result, the Elements Inspector and JavaScript console bridge only work for same-origin content and preview environments.

For external websites and production URLs, browser security restrictions prevent direct DevTools access. This is the same limitation that exists in VS Code's Simple Browser.

2. Favicon and Page Title Detection

For cross-origin pages, you cannot access iframe.contentDocument.title.

The solution I'm implementing uses a Next.js API route that fetches the target page server-side and extracts the <title> and favicon information directly from the HTML.

Because the request originates from the server, it bypasses browser CORS restrictions entirely.

3. Keeping the Browser Alive Between Tab Switches

React normally re-mounts components when they are removed and added back to the DOM.

That would cause the browser page to reload every time a user switches tabs.

The solution was to keep the BrowserPanel permanently mounted and simply toggle its visibility using display: none, preserving the browsing session and application state.

Is It Worth It Despite the Limitations?

Absolutely.

The primary use case is viewing a running localhost development server without leaving the editor, and that works exactly as intended.

The DevTools limitations only affect external production websites, where developers would typically use Chrome DevTools anyway.

For the workflow Cloudpen is designed around:

Write → Run → Preview

everything now happens in one place.

Cloudpen is a cloud-based code editor available at cloudpen.dev.

I'm building it in public and shipping new features every week.

I Built a Cloud IDE That Replaces VS Code, Vercel, and GitHub Copilot — Here's Why

Augustine — Wed, 03 Jun 2026 20:27:00 +0000

If you've ever tried to code on a low-end laptop, a tablet, or a slow connection, you know the frustration. You spend 45 minutes setting up your environment before writing a single line of code. Your machine runs out of RAM mid-deploy. Something always breaks before you've started.

That experience is what led me to build Cloudpen.

What is Cloudpen?

Cloudpen is a cloud IDE that runs entirely in your browser. No installs, no setup, no local environment to maintain. Open a tab and start building.

It's not a sandbox or a toy editor. It's a full development environment — professional code editor, code execution, GitHub integration, one-click deployment to a live URL, and a built-in AI assistant, all in one place.

The thing that sets it apart from most browser-based tools is mobile. Cloudpen is the only cloud IDE genuinely designed to work on a phone — not a stripped-down version, the real thing. If you code on a device that isn't a high-spec laptop, that matters.

Who it's for

Cloudpen is useful for anyone who writes code, but it's particularly relevant for a few groups.

Developers on lower-spec machines — if your local environment is slow or unstable, offloading execution to the cloud changes the experience completely.

Students and bootcamp developers — there's a permanent 50% discount for student emails, bringing Pro to $6/month including all renewals.

Freelancers and developers who work across devices — your entire workspace lives in the cloud. Open any browser, continue exactly where you left off.

Try it

There's a permanent free tier with no credit card required.

https://cloudpen.dev

I'd genuinely like to hear from people who've used other cloud IDEs. What's the thing that made you stop using them? What would actually make you switch?

Drop a comment below.

The terminal in Cloudpen works differently to most cloud IDEs — here's why

Augustine — Wed, 03 Jun 2026 00:41:01 +0000

If you've used other browser-based code editors, you've probably noticed that the terminal feels off. You can run a script. You can print to stdout. But the moment you try to install a package and then actually use it in the next command, something breaks. The environment doesn't carry over. It feels like every command starts from scratch in a vacuum.

That was the problem I wanted to solve when building the terminal for Cloudpen. Not just a place to run isolated snippets, but a proper environment where you can install dependencies, run build tools, and have everything you did in one command still be there for the next one.

What most cloud terminals get wrong

The core issue is that running code in the browser is hard to do without cheating somewhere. A lot of tools use sandboxed environments that look like a terminal but don't behave like one. They're good enough for demos. They fall apart in real work.

The thing developers actually need is simple: if I install something, it should be there when I run the next command. That's it. That's the whole requirement. Surprisingly few cloud tools actually deliver it.

How Cloudpen handles it

Without going into the full technical detail, the short version is this: every command runs in a completely isolated environment, but all commands within your session share the same filesystem. So when you run npm install, those files are written somewhere. When you run your next command, that somewhere is exactly where it looks.

Package installs work. Build tools work. Multi-step workflows work. And because each command runs in a clean, isolated environment, there's no bleed between users or sessions.

The current terminal is optimized for commands that run to completion, while live application previews are handled through Cloudpen's deployment system.

On the free plan, you can run any file in your project and see the output directly in the terminal. The live coding environment where you type commands yourself is on the Pro plan. Both use the same underlying execution model.

If you want to try it, Cloudpen is at cloudpen.dev. The free plan doesn't require a card.

webdev #devtools #showdev #programming #cloud

Cloudpen Launch

Augustine — Fri, 29 May 2026 19:12:56 +0000

I built a complete cloud IDE that runs entirely in your browser. Here's why I think it matters.
My name is Augustine. I'm a developer and I've spent the last several months building Cloudpen, a professional cloud development environment that works in any browser on any device, including your phone.
I want to share what it is, why I built it, and what makes it different from the other browser IDEs you've probably already tried.
The problem I was solving
The developer tooling stack has become expensive and fragmented. If you're using VS Code, GitHub Pro, Vercel, and GitHub Copilot, you're paying $50 to $80 a month across four separate tools with four separate logins. For developers in emerging markets, that's not a small number. And none of those tools work well on a phone, which for a lot of developers globally is their primary device.
What Cloudpen actually is
Cloudpen brings everything into one browser tab. You get a professional code editor (the same engine behind VS Code), a real PTY terminal over WebSocket, one-click deployment to a live URL with automatic SSL, a built-in AI assistant called Quill, GitHub sync with webhook auto-redeploy, and real-time team collaboration with role-based permissions.
Everything. One tab. $12 a month. No installation.
What makes it genuinely different
Three things that I haven't seen any other cloud IDE do together:
First, it works fully on a smartphone. Not a stripped-down mobile view. The actual editor, terminal, file tree, search, and deployment all work on your phone. I built this deliberately because a lot of the developers I care most about are mobile-first.
Second, one-click deployment is a first-class feature, not an afterthought. You write code and you get a live URL with SSL in seconds. No separate Vercel account. No config files. Just click Deploy.
Third, the price. At $12 a month Pro replaces tools that together cost $50 to $80. For students it's $6 a month, every renewal, not just the first month.
Where it is today
Cloudpen is live at cloudpen.dev. We have active users, the platform has been tested by developers locally and internationally, and it's working. I'm building in public and I'm genuinely interested in feedback from other developers.
If you've been frustrated by how expensive and fragmented the standard dev setup has become, I'd love for you to try it.
cloudpen.dev — free to start, no card required.