{"id":14054,"date":"2025-04-26T08:59:37","date_gmt":"2025-04-26T06:59:37","guid":{"rendered":"\/docs\/piny\/"},"modified":"2025-06-02T11:33:30","modified_gmt":"2025-06-02T09:33:30","slug":"piny","status":"publish","type":"page","link":"\/docs\/piny\/","title":{"rendered":"Piny"},"content":{"rendered":"\n

Installation<\/h2>\n\n\n\n

Piny is an extension for Visual Studio Code, Cursor, Windsurf and other IDEs based on Visual Studio Code.<\/p>\n\n\n\n

Open the Extensions panel and search for Piny, then install the extension.<\/p>\n\n\n\n

Keep Update<\/em> checked so you always have the latest version.<\/p>\n\n\n\n

\n

Piny requires that at least one folder is open in the editor Workspace. Otherwise Piny will not open and an error message is shown.<\/p>\n<\/blockquote>\n\n\n\n

To open Piny, right-click anywhere in the code and choose Edit in Piny<\/strong>. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Use Visual Studio Code settings to assign a keyboard shortcut to that command.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

You can freely switch away from the Piny tab\u2014the editor state is preserved. Close the tab when you\u2019re done; reopen it any time with Edit in Piny<\/strong>.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Preview<\/h2>\n\n\n\n

Piny shows a responsive browser preview of your project.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Use the route dropdown to add and select a route displayed in the preview.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\n

Piny Pro<\/strong>: when Visual Select is active, Piny tracks visited routes and lists them in the route menu.<\/p>\n<\/blockquote>\n\n\n\n

If you don\u2019t need the preview, hide it with the icon in the preview toolbar. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

To get it back click on the collapsed Preview.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

In the Preview toolbar you can also set the zoom level and reload the preview.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Selecting Components and Elements<\/h2>\n\n\n\n

One component can be edited at a time. Its JSX structure appears in the Tree<\/em> panel.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Select a JSX element or string in one of three ways:<\/p>\n\n\n\n

Place the cursor in the code (the element under the cursor is selected) or click the element in the Tree<\/em> panel.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n


Use Visual Select<\/strong> (Piny Pro) to click elements directly in the preview.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

With Piny Pro you can multi-select elements: Ctrl<\/kbd>\/Cmd<\/kbd> + Click to add or remove, Shift<\/kbd> + Click to select a range.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

If the cursor is inside a string (for example a class list), a special \u201cCode\u201d element is selected; you can still edit Tailwind classes via Visual Controls and Inspector.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Visual Controls<\/h2>\n\n\n\n

Visual Controls let you edit Tailwind styling for the selected element.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Choose a screen-size tab (right-click to also resize the preview). <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Use the States<\/em> dropdown to pick a state (hover, focus, active\u2026).<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

This opens up the states menu:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Your edits apply to the current size \u00d7 state combination. Changes are written straight to code and saved automatically; rely on git and Undo to discard unwanted edits.<\/p>\n\n\n\n

For complex combinations, use the Inspector<\/strong>.<\/p>\n\n\n\n

Inspector<\/h2>\n\n\n\n

Inspector shows Tailwind classes of the selected element and its parents in an editable tree\u2014ideal for visualizing and tweaking complex styles.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Click a class to change its value.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Uncheck the class to toggle visibility.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Add classes or states from the menus or with smart search.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Add states with the states menu.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Click on states to edit them. Selecting a different state will combine the original state with the selected state (unless you are selecting a different screen size).<\/p>\n\n\n\n

Right-click classes to move or duplicate them to another state; duplicate is handy for responsive overrides. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Drag numeric sliders or use the color picker for custom values.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Narrow down properties with the search bar.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Components Bar<\/h2>\n\n\n\n

The components bar above the preview lets you quickly switch between components. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

It works in two modes:<\/p>\n\n\n\n