

There, use the search box to search for “Pinegrow Live Sync”.Ĭlick on Install and reload VS Code if necessary. In VS Code, go to Code -> Preferences -> Extensions or click on the Extensions icon in the Activity bar. Live sync works for HTML (or other types that are listed among editable types in Pinegrow’s settings) and CSS/SASS/LESS files. Refresh the page in Pinegrow with Cmd+Alt+R on Mac, Ctrl+Alt+R on Win & Linux.Open the page in Pinegrow with Cmd+Alt+O on Mac, Ctrl+Alt+O on Win & Linux.Select an element in Pinegrow with Cmd+Alt+P on Mac, Ctrl+Alt+P on Win & Linux.Use the context menu or keyboard shortcuts to: Navigate the code visuallyĮlements selected in Pinegrow are highlighted in VS Code. Installation instructions are included:Īll edits are live-synced between VS Code and Pinegrow, without having to save changes first.

Watch this 5 min video to see what Pinegrow & VS Code can do together.

Now you can use Visual Studio Code and Pinegrow together: code parts that are easier to code in VS Code and use Pinegrow’s powerful visual tools to work with HTML structure, styling, Bootstrap, WordPress, master pages, components and so on.
