Framer Mini App Preview

A VS Code extension from Framer IDE for building and testing Mini App UIs within Visual Studio Code.

Overview

Framer Mini App Preview is part of the Framer IDE ecosystem, providing an integrated development environment for Mini App UI development. This extension features real-time app simulation and seamless integration with your existing development workflow, enabling developers to build, test, and iterate on Mini App interfaces without context switching between multiple tools.

Key Features

• App Preview Simulation: Accurate viewport rendering with realistic device frames
• Live Development Server Integration: Real-time synchronization with local development servers
• UI-Focused Development: Perfect for building and testing Mini App interfaces and user experiences
• Integrated Development Workflow: Streamlined debugging and testing within the VS Code environment

Installation & Setup

Prerequisites

• Visual Studio Code version 1.80.0 or later
• Node.js development environment
• Local development server capability

Installation Steps

1. Open Visual Studio Code
2. Navigate to the Extensions marketplace (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Framer Mini App Preview"
4. Click "Install" to add the extension to your workspace

Configuration

1. Start your local development server (typically npm run dev or similar)
2. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
3. Execute the command: Framer: Start Preview
4. Configure your development server URL (default: http://localhost:3000)
5. The preview panel will initialize alongside your code editor

Usage

Once configured, the extension provides real-time preview capabilities that automatically reflect code changes in the simulation environment. This enables rapid iteration and immediate visual feedback during the development process.

System Requirements

• Editor: Visual Studio Code 1.80.0+
• Runtime: Local web server with HTTP/HTTPS support

Support & Feedback

This extension is now publicly available as part of the Framer IDE development suite. For technical support, feature requests, or bug reports, please contact the Framer IDE team directly through official channels.

Built with 💙 by Team Framer