Smartphone View by Ing. Joel Caraballo
Preview HTML inside a polished smartphone simulator directly in VS Code.
Created by Ing. Joel Caraballo. Discover more projects and tools at ingjoelcaraballo.com.
Preview
Features
- Preview the active HTML file in the current VS Code editor area.
- Choose between Pixel 11, iPhone 17, and Motorola Edge frames.
- Switch between portrait and landscape orientations.
- Reload the preview without leaving the simulator.
- Open any
.html or .htm file with the file picker.
- Resolve relative images, stylesheets, and scripts from the HTML file location.
- Run the selected project through a local server so browser behavior and assets match the real site.
- Refresh automatically while HTML, CSS, or JavaScript files are being edited.
- Includes a compact extension icon based on the project logo.
Usage
- Open an HTML file in VS Code.
- Open the Command Palette with
Ctrl+Shift+P.
- Run
Smartphone View: Open Preview.
- Use the controls at the top of the preview to change the device or orientation.
To preview another file, run Smartphone View: Open HTML File.
Development
Install dependencies and build the extension:
npm install
npm run compile
Press F5 in VS Code to launch an Extension Development Host, then run the Smartphone View command.
Packaging
Create a production bundle with:
npm run package
The extension icon is provided by icon.png. The original source logo is kept as logo-smarphone-view.png.
The preview screenshot is included as image.png.
Requirements
- VS Code 1.136.0 or newer
- Node.js and npm for development
Author
Ing. Joel Caraballo
ingjoelcaraballo.com
License
This project is licensed under the MIT License.
Release Notes
1.0.0
- Added the smartphone HTML preview panel.
- Added device and orientation controls.
- Added extension branding and documentation.
