Visual Designer: Build Interfaces by Dragging and Dropping

The Visual Designer is one of the most powerful features in Pocket Code. It lets you create user interfaces visually and automatically generates clean, production-ready code.

Why a visual designer?

Designing UIs on a phone screen can be challenging. Writing layout code manually is slow and error-prone on small screens. The visual designer solves this with an intuitive drag & drop interface.

Advantages

• Speed: Design in minutes, not hours
• Visual: See the result in real-time
• Clean code: Generates code following best practices
• Multi-framework: React, Flutter, native Android

Getting started

Open the designer

1. In any project, tap the Design icon in the tab bar
2. Select the framework (React, Flutter, XML)
3. Start with a blank canvas or choose a template

Basic interface

The designer is divided into:

• Components panel (left) — Draggable elements
• Canvas (center) — Your design area
• Properties (right) — Customize selected elements

Available components

Layout

Component	Description
Container	Flexible container
Row	Horizontal elements
Column	Vertical elements
Grid	CSS Grid layout
Stack	Overlapping elements
Scroll	Scrollable area

Input

Component	Description
Button	Button with variants
TextInput	Text field
Toggle	On/Off switch
Slider	Value selector
Dropdown	Dropdown menu
Checkbox	Checkbox
RadioGroup	Radio options

Display

Component	Description
Text	Text with styles
Image	Images/icons
Card	Information card
List	Dynamic list
Badge	Notification badge
Avatar	Profile image
Divider	Visual separator

Navigation

Component	Description
NavBar	Top navigation bar
TabBar	Tab navigation
Drawer	Side menu
BottomNav	Bottom navigation
Breadcrumb	Hierarchical navigation

Practical tutorial: Login screen

Let's create a complete login screen step by step:

Step 1: Basic structure

Drag a Column to the canvas and configure:

• Alignment: center
• Padding: 24px
• Background: #0a0a0a

Step 2: Add the logo

Inside the column, drag an Image:

• Size: 120x120
• Border-radius: full (circle)
• Margin-bottom: 32px

Step 3: Text fields

Add two TextInput components:

Email:

• Placeholder: "Email"
• Type: email
• Icon: mail
• Width: 100%

Password:

• Placeholder: "Password"
• Type: password
• Icon: lock
• Width: 100%

Step 4: Login button

Drag a Button:

• Text: "Log In"
• Variant: primary
• Width: 100%
• Border-radius: 12px

Step 5: Extra links

Add Text components for:

• "Forgot your password?" (link style)
• "Don't have an account? Sign up" (dimmed text + link)

Generated code

The designer automatically produces clean code:

// React output
export function LoginScreen() {
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");

	return (
		<div className="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
			<img src="/logo.png" alt="Logo" className="w-30 h-30 rounded-full mb-8" />

			<input
				type="email"
				placeholder="Email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
				className="w-full p-3 mb-4 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<input
				type="password"
				placeholder="Password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
				className="w-full p-3 mb-6 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<button
				className="w-full p-3 bg-blue-600 rounded-xl
                          text-white font-semibold hover:bg-blue-700"
			>
				Log In
			</button>

			<p className="mt-4 text-neutral-500 text-sm">
				Don't have an account? <span className="text-blue-400">Sign up</span>
			</p>
		</div>
	);
}

// Flutter output
class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF0A0A0A),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 60,
                backgroundImage: AssetImage('assets/logo.png'),
              ),
              SizedBox(height: 32),
              TextField(
                controller: emailController,
                decoration: InputDecoration(
                  hintText: 'Email',
                  prefixIcon: Icon(Icons.mail),
                ),
              ),
              SizedBox(height: 16),
              TextField(
                controller: passwordController,
                obscureText: true,
                decoration: InputDecoration(
                  hintText: 'Password',
                  prefixIcon: Icon(Icons.lock),
                ),
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: Text('Log In'),
                style: ElevatedButton.styleFrom(
                  minimumSize: Size(double.infinity, 48),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Advanced features

Responsive design

The designer automatically handles responsiveness:

• Auto-layout: Elements adjust to screen size
• Breakpoints: Define different arrangements for mobile/tablet
• Relative units: Uses %, rem and flex instead of fixed pixels

Data binding

Connect components to data:

1. Select a component (e.g., a List)
2. In properties, tap Bind Data
3. Select the source (API, local state, mock)
4. Map fields to component properties

Reusable templates

Save your designs as templates:

• Custom components: Save combinations as single components
• Design system: Define colors, typography and spacing
• Screen templates: Share complete layouts with the team

Gesture support

The designer is designed for touch interaction:

• Pinch to zoom on the canvas
• Double-tap to select nested elements
• Long-press for contextual menus
• Swipe to move between panels

Supported frameworks

Framework	Status	Code quality
React/JSX	✅ Stable	Excellent
Flutter	✅ Stable	Excellent
Android XML	✅ Stable	Very good
SwiftUI	🔄 Beta	Good
Vue	📋 Planned	—

Tips and best practices

1. Start with the structure: Place containers before content
2. Use auto-layout: Avoid fixed sizes whenever possible
3. Name your components: Generates more readable code
4. Preview often: Check on different screen sizes
5. Export incrementally: Don't wait until the end to check the code

What's next

• Figma import: Bring designs directly from Figma
• Collaborative mode: Design in teams in real-time
• AI designer: Describe the UI in natural language and let AI build it
• Animation editor: Add transitions and animations visually

---

The visual designer makes Pocket Code the only mobile IDE where you can design and program from the same device. Try it today and speed up your development!