Quickstart Guide

Turn your website into an app

Follow these steps to create a fully functional native iOS and Android app from your existing website.

Before You Start

You'll need a Median App Studio account to build your app.

Don't have an account yet?

1. Visit median.co
2. Click "Get Started" or "Build for Free"
3. Sign up with your email or Google account
4. Verify your email address

Once you're logged in, you're ready to create your first app.

---

Step 1: Create your app

To create your app, provide the following details:

Website URL - This will be the initial URL loaded when the app starts. Ensure your website is mobile-optimized for the best user experience. The URL can be updated at any time.

App Name - A default name will be suggested based on your website's title, but you can update it at any time.

Contact Email - A valid email is required to manage your app and team access.

Once you've confirmed the details above, click "Start Building My App!" to generate your app preview. You'll receive an email with your private management link so you can return to your app anytime.

---

Step 2: Preview your app

Once your app is created, test it using our online simulators.

Verify your app:

1. Select iPhone or Android simulator.
2. Confirm your website loads correctly.
3. Test the navigation and core functionality.

The simulators let you experience your app exactly as users will see it on their devices.

---

Step 3: Make it feel native

Your app works, but let's add your brand on the home screen and at launch, then add a native gesture so it feels like a real mobile app.

Upload your app icon

Your app icon is your app’s identity on the device home screen and in places such as settings (App Icon).

1. Navigate to Interface → Branding.
2. Under App Icon, upload a square PNG or JPG.
3. Use 1024×1024 pixels so the icon stays sharp on all devices.

On iOS and Android, transparent areas are filled with a white background, and the system applies subtle corner rounding. For platform guidance, see Apple’s app icon guidelines and Google’s Android icon guidance.

Configure the splash screen

The splash screen appears when users open your app from the home screen or return to it from the background. It stays visible while your web content loads and until the page fires DOMContentLoaded, so the handoff to your site feels smooth (Splash Screen).

1. In Interface → Branding, open the Splash Screen settings.
2. Choose a style: App Icon (your icon centered) or Custom Image (upload a dedicated splash image).
3. Set background colors for Light Mode and Dark Mode as needed.
4. Use Match iOS & Android to share one configuration, or adjust iOS and Android separately.
5. Preview the splash for iOS and Android in light and dark modes in App Studio.

Platform notes: On iOS, App Studio can auto-generate the launch storyboard from your app icon, or you can use a custom image. On Android 12 and later, the system shows a circular cropped image in the center—use a simple, low-detail graphic (similar to your app icon) rather than dense text. To test slow loads during development, you can point your app at Median’s demo page: median.dev/splash-screen-transition.

Enable Pull-to-Refresh

1. Navigate to Interface → Gestures.
2. Toggle on Pull-to-Refresh.
3. Return to the simulator and pull down from the top of the screen.

Your app now shows your branding at launch and refreshes content with a native gesture that mobile browsers don’t provide. That’s part of what separates a website from a native app.

---

Step 4: Build your app

You now have a fully functional native app.

1. Navigate to Build & Download.
2. Click "Build All".

Median.co will generate native iOS and Android builds of your app. You'll receive an email when the builds are ready to download.

---

🏁 Your app is ready

Congratulations! You've built your first native mobile app.

Next, explore our recommended resources to add more native features and optimize your app for mobile users.

---

Next Steps

Customize your app

Want to add your brand identity? Configure app icons, splash screens, theme colors, and more in the Branding section.

Add Native Features

Push notifications

Re-engage users even when they're not using your app. Our Push Notification Overview covers setup with OneSignal, which offers Median customers unlimited free push notifications.

JavaScript bridge

Access native device functionality from your website using the Median JavaScript Bridge. Add biometric authentication, camera access, device sensors, and more - all with JavaScript.

Native navigation

Replace your web navigation with Native Navigation Menus that follow Apple and Google design guidelines. Support for tab bars, side drawers, and custom icons.

Native plugins

Browse our Native Plugin Library to add third-party services and device features. Access analytics, authentication, payment processing, and more.

Optimize for mobile

Detect app usage

Serve different content to app users vs. web users. Our Detecting App Usage guide shows you how to identify when your website is running inside your native app.

Mobile optimization

Learn best practices for mobile-responsive design, touch interactions, and performance optimization in our documentation.

Build & Test

Ready to test on a real device? Review our Build & Test Overview for advanced testing options and configuration.

Publish your app

When you're ready to launch, our Publishing Guide walks you through Apple App Store and Google Play Store requirements. Or use our Publishing Service and let our team handle it for you with a 100% approval guarantee.