Nifty Web Pack

10 Nifty extensions for front-end and web development: Beautify, CSS Classes, CSS Variables, SCSS IntelliSense, Tags, Templates, i18n, REST Client, OpenAPI, Import Cost.

Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.

What's in the pack

Installing this pack installs these 10 extensions. Each one works on its own, so you can disable or uninstall any you don't need.

• Nifty Beautify: Format HTML inside PHP, Blade, Twig, Jinja, Handlebars, ERB and Liquid templates without breaking the template tags.
• Nifty CSS Classes: Complete CSS class names in HTML, JSX, Vue, Svelte, PHP and templates from your stylesheets, including SCSS nesting and linked files, with hover and go to definition.
• Nifty CSS Variables: IntelliSense for CSS custom properties across your project: complete var(--…), see resolved values and colour swatches, go to definitions, catch undefined variables, and browse a colour palette.
• Nifty SCSS IntelliSense: Variables, mixins, functions and placeholders from all your SCSS files: completion that understands @use namespaces and @import, hover with values and SassDoc, and go to definition.
• Nifty Tags: Rename paired tags as you type and close tags automatically, in JSX, TSX, Vue, Svelte, Astro, XML, PHP and template files, using the editor's built-in linked editing.
• Nifty Templates: Jinja, Twig and Nunjucks support: highlighting in HTML and any file, block outline and folding, unclosed-tag errors, tag and filter completion with docs, and go to definition for extends and include.
• Nifty i18n: See translations inline next to t('key') calls, find missing keys and translations, complete and jump to keys, and extract strings into your locale files.
• Nifty REST Client: Send HTTP requests from .http files: variables, environments, request chaining, response viewer, cURL import and export, and history. No account, no cloud.
• Nifty OpenAPI: Edit OpenAPI and Swagger files with an outline, $ref navigation and completion, error checking, example payloads, and Try it requests for your REST client.
• Nifty Import Cost: See the bundle size of every import inline, fast and cached, without maxing out your CPU.

Install

• VS Code: search for "Nifty Web Pack" in the Extensions view, or install from the Visual Studio Marketplace.
• Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.

Privacy

This extension collects no telemetry and needs no account.

More Nifty tools

• Nifty CSS Classes: Class Name Completion: Complete CSS class names in HTML, JSX, Vue, Svelte, PHP and templates from your stylesheets, including SCSS nesting and linked files, with hover and go to definition. (Open VSX)
• Nifty Data Pack: 9 Nifty extensions for working with JSON, YAML, XML, CSV, SQL and spreadsheets: JSON, YAML, XML, SQL, Data Viewer, SQLite, Spreadsheet Viewer, Paste JSON as Code, Mermaid. (Open VSX)
• Nifty Essentials Pack: 8 Nifty extensions for everyday editing, whatever language you write: JSON, YAML, Git Links, Todo, Problems, Replace, Explorer+, Shortcut Trainer. (Open VSX)
• Nifty Python Pack: 7 Nifty extensions for Python development: Python Envs, pytest, Python Profiler, Python REPL, Docstrings, Paired Notebooks, Notebook Servers. (Open VSX)
• Nifty SCSS IntelliSense: Variables & Mixins: Variables, mixins, functions and placeholders from all your SCSS files: completion that understands @use namespaces and @import, hover with values and SassDoc, and go to definition. (Open VSX)
• Nifty Beautify: Format HTML in PHP, Blade & Twig: Format HTML inside PHP, Blade, Twig, Jinja, Handlebars, ERB and Liquid templates without breaking the template tags. (Open VSX)

See all 100+ Nifty extensions and web tools at https://getnifty.dev