Full Web Development from Android: HTML, CSS and JavaScript

Create professional websites from your phone. Real-time preview, integrated DevTools and direct deploy with PocketCode.

Full Web Development from Android

PocketCode turns your Android device into a complete web development environment. Create, preview, and deploy websites without needing a PC.

Initial setup

Local development server

PocketCode includes a local HTTP server that starts automatically:

# Starts when opening a web project
# Accessible at http://localhost:3000
pocket-server start --port 3000 --hot-reload

Creating a web project

Tap New Project
Select the Web App template
Choose the framework (Vanilla, React, Vue, etc.)
The project is generated with the full structure

Real-time preview

Split View

Split the screen between editor and preview:

Vertical: Editor on top, preview below
Horizontal: Editor left, preview right (tablets)
Floating: Preview as a resizable floating window

Hot Reload

Changes are automatically reflected in the preview:

<!DOCTYPE html>
<html>
	<head>
		<title>My App</title>
		<style>
			.hero {
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				background: linear-gradient(135deg, #1a1a2e, #16213e);
				color: white;
			}

			.title {
				font-size: clamp(2rem, 5vw, 4rem);
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="hero">
			<h1 class="title">Hello World!</h1>
		</div>
	</body>
</html>

Developer tools

Integrated DevTools

PocketCode includes developer tools similar to Chrome DevTools:

Elements: Inspect and edit the DOM
Console: Execute JavaScript and view logs
Network: Monitor HTTP requests
Responsive: Test on different sizes

Responsive testing

Preview your site on different devices:

Device	Width	Height
iPhone SE	375px	667px
iPhone 14	390px	844px
iPad	768px	1024px
Desktop	1920px	1080px

Supported frameworks

React

import { useState } from "react";

function Counter() {
	const [count, setCount] = useState(0);

	return (
		<div className="p-4">
			<p className="text-2xl">{count}</p>
			<button
				onClick={() => setCount(count + 1)}
				className="px-4 py-2 bg-blue-500 rounded"
			>
				Increment
			</button>
		</div>
	);
}

Vue

<template>
	<div class="p-4">
		<p class="text-2xl">{{ count }}</p>
		<button @click="count++" class="px-4 py-2 bg-green-500 rounded">
			Increment
		</button>
	</div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

Vanilla + Tailwind

<div class="min-h-screen bg-gray-900 flex items-center justify-center">
	<div class="bg-gray-800 rounded-xl p-8 shadow-2xl max-w-md w-full">
		<h2 class="text-2xl font-bold text-white mb-4">Login</h2>
		<input
			type="email"
			placeholder="Email"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-4"
		/>
		<input
			type="password"
			placeholder="Password"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-6"
		/>
		<button class="w-full p-3 bg-blue-600 rounded-lg text-white font-semibold">
			Sign In
		</button>
	</div>
</div>

Direct deploy

Vercel

# Install CLI
npm install -g vercel

# Deploy
vercel --prod

Netlify

# Install CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

GitHub Pages

# Configure in package.json
{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}

# Deploy
npm run deploy

Tips for mobile web development

Use relative units: rem, em, %, vw/vh
Mobile-first: Design for mobile first
Tailwind CSS: Ideal for development on small screens
Small components: Short and modular files
Auto-save: Enable auto-save for continuous hot reload

With PocketCode you can create complete websites from your Android. From a landing page to a complex web application, everything is possible from the palm of your hand.

Full Web Development from Android: HTML, CSS and JavaScript