PWA Manifest Generator

Generate a complete manifest.json file for your Progressive Web App

About PWA Manifest Generator

Overview

PWA Manifest Generator creates a complete manifest.json file for your Progressive Web App. The manifest file tells browsers how your app should behave when installed on a device, including its name, icons, display mode, colors, and more. Generate a standards-compliant manifest with all required and optional fields, preview it in real-time, and download it ready to use in your project.

Features

  • All standard manifest.json fields supported
  • Real-time JSON preview with syntax highlighting
  • Validation for required fields
  • Icon path configuration with automatic entry generation
  • Color pickers with presets for background and theme colors
  • Display mode selection with descriptions
  • Orientation options for different screen layouts
  • Advanced fields: language, text direction, categories
  • Download as manifest.json file
  • Copy to clipboard functionality
  • Completely browser-based - no server required

How to Use

  1. Fill in the basic information: app name, short name, description, and start URL
  2. Configure display settings: choose display mode (standalone recommended) and orientation
  3. Set colors: background color for splash screen and theme color for browser toolbar
  4. Optionally configure icon paths if you have generated icons
  5. Add advanced settings like language, categories, and text direction if needed
  6. Preview the generated JSON in real-time to verify correctness
  7. Click "GENERATE MANIFEST" then download or copy the manifest.json file
  8. Place manifest.json in your public/static folder and reference it in your HTML

FAQ

What is a PWA manifest file?

A PWA manifest (manifest.json) is a JSON file that tells browsers and operating systems how to install and display your Progressive Web App. It contains metadata like the app name, icons, colors, and display mode. Without a manifest, users cannot install your PWA to their home screen.

What are the required fields?

The only truly required fields are name and icons array. However, for a good user experience, you should also include short_name, start_url, display (set to "standalone"), background_color, and theme_color. These fields ensure proper installation and appearance across all platforms.

What is the difference between name and short_name?

The name field is the full application name shown during installation and in app lists. The short_name is a shorter version (12 characters recommended) displayed on the home screen where space is limited. If short_name is not provided, name will be used but may get truncated.

What display mode should I choose?

Use "standalone" for most PWAs - it makes your app look like a native application without browser UI. Use "fullscreen" for games or immersive experiences. Use "minimal-ui" if you want basic browser controls. "Browser" mode opens your app in a regular browser tab and is rarely used for PWAs.

Where should I place the manifest.json file?

Place manifest.json in your public or static folder (root of your web server). Then reference it in your HTML head with: <link rel="manifest" href="/manifest.json">. Make sure the path is correct and the file is accessible at that URL.