VS Code Extensions
P

PX to REM by Fraz Ghumman

by FrazGhumman-Px-To-Rem

Convert pixel values to rem using a configurable root font size. Sidebar panel with folder/file target and change summary.

Downloads

6

Rating

5.0 / 5 (1)

Version

0.1.1

Last updated

Apr 14, 2026

Convert px values to rem from a sidebar panel in VS Code and Cursor.

Features

  • Adds a PX → REM icon in the Activity Bar
  • Opens a sidebar view to:
    • select a file or folder
    • set root scale (px per 1rem)
    • apply conversion
    • review a change set summary
  • Shows per-file replacement counts in the panel and output channel
  • Configurable included file extensions

Usage

  1. Open the PX → REM panel from the Activity Bar.
  2. Click Choose file or folder.
  3. Set Root scale (px per 1rem) (for example, 16).
  4. Click Apply conversion.
  5. Review the Change set output.

Extension Settings

  • pxToRem.defaultRootPx: default root font size in pixels.
  • pxToRem.includeExtensions: file extensions processed when converting a folder.

Notes

  • Conversion formula: rem = px / rootPx.
  • Designed for common frontend files (.css, .scss, .less, .html, .vue, .svelte, .tsx, .jsx, .ts by default).

License

MIT. See LICENSE.

Related extensions