Let’s take a look at how Pinegrow Web Editor can be used to open and edit websites and applications from local or remote web servers.
With Pinegrow we can open documents in two ways:
- Work with local files directly, for example, opening, editing and saving a HTML file on your computer.
- Open URLs directly from the internet or from your local development server.
In this guide we’ll take a look how we can use Pinegrow to work with remote URLs.
Pinegrow Web Editor 5.92 or higher is required. This feature requires Pinegrow PRO edition because it relies on projects. Older Pinegrow versions have a more limited URL editing support.
Examples of remote projects are:
- Static HTML websites on the remote server
- WordPress sites
- Server-side (PHP, Rails, Node…) applications
- React single-page applications running on the production or development server
When we say remote, we refer to documents that are not accessed directly from your local file system. That can include projects running on your local web development server.
Pinegrow does not download the complete website with all its resources to your computer. That’s not its purpose. Instead, it locally saves only the modified files and injects them into the remote page when you re-open it in Pinegrow.
Common use cases
We can use all HTML and CSS editing features of Pinegrow on documents accessed with Open URL.
SASS and LESS styling is also not supported.
Therefore, the most common use-cases are:
- Edit CSS styling of a remote website or application.
- Edit HTML of remote static HTML websites.
- Edit HTML of web applications as a way of prototyping changes and new features
Editing remote documents has the following limitations:
The best approach is to try and see if it works.
Please note that unless the problem involves an obvious Pinegrow bug, the Pinegrow support team is not able to offer support related to your specific project.
The general Pinegrow Web Editor workflow for remote projects is:
- Use Open URL to open a document. Select a local folder for saving modified HTML and CSS files.
- Make changes to the HTML structure and CSS styling.
- Save changes. Modified files will be stored in a selected local folder.
- Next time you open this URL in Pinegrow, any resource that is saved locally will be loaded instead of the original remote resource.
Here is an example of a typical scenario:
Let’s open a remote WordPress page with Open URL, for example docs.pinegrow.com, the Pinegrow documentation site:
Before opening the URL we have to select or create a local folder that will be used for saving modified files:
The selected folder is now opened as Pinegrow project:
Alternatively, we could first open the project and then use Open URL to open the remote document.
Let’s use the Style panel to make styling changes to pg_docs.css. We have to unlock the stylesheet first because remote stylesheets are locked by default:
We’ll change the background and margin of inactive navigation tabs:
Save changes. Modified pg_docs.css is saved into a selected local folder:
Next, we’ll change the HTML code of the page by changing “Documentation” tab label…
Save the changes. The modified HTML files is now saved to the folder as well.
Let’s close Pinegrow and take a break.
When we come back to this task, we can open the local project directly, it will be listed in the Open recent section:
We can then quickly re-open the previously edited URL from the project menu -> Remote URLs -> Recent:
The page and all its resources are loaded from the website – except the modified pg_docs and the HTML document that are loaded from the local folder.
Notice that the tab label and styling are just as we set them before:
Continue making CSS changes.
Preview how the changes look on the site without having to upload changed files. We see that in Pinegrow, as well as by using the browser preview:
Share the project with the team so that they can take a look or contribute.
When the task is complete, upload the modified pg_docs.css to the WordPress theme folder on the server by whatever method we’re using with this project.
We can’t just upload the changed HTML file because the website is a WordPress site. The changed HTML can serve as a blueprint for changes that we then do in the theme source code or in WordPress admin panel.
Using the locally saved files
Modified HTML and CSS files are stored in a selected local folder (or the current open project) in mapped_urls subfolder.
Pinegrow doesn’t upload files to the server. We have to use the appropriate method for our project, for example:
- Upload changed files to the server with your favorite file transfer tool.
- Copy changed files to your source control system, like Git repository.
- Use changed files as a prototype or blueprint for implementing the changes in the source code of your web application.
Let’s take a look at the details.
Open the URL
Use File -> Open URL and enter the URL you want to open.
There, we also need to select a local folder/project that will be used for storing modified files.
If a project is already open, it will be used for this purpose.
Click on Open URL button to load the document.
Edit the HTML structure
Use powerful tools to edit HTML document, including
- Adding new elements from the Library.
- Duplicating, deleting and moving elements around the page.
- Use the Tree panel for precise manipulation of the structure.
- Select elements and edit their properties and attributes…
Edit the CSS styling
Use the Style panel to edit styling of the document.
If we want to upload changed stylesheets back to the server, deactivate minimizing and combining stylesheets on the server. For example, in WordPress deactivate an optimization plugin.
Remote stylesheets are locked by default. Unlock a stylesheet by clicking on the orange lock icon.
Saving the changes
Use File -> Save or CTRL + S (CMD + S on Mac) to save the changes.
Files will be placed inside the
mapped_urls/<hostname>/<url path> folder at the base of the current project.
- If we selected
/Users/Me/Work/Project1as the folder/project when opening the URL, and
- opened the url
- the saved files will be put into the
Note that URLs without extension (like https://mysite.com/projects) will be saved as
Re-opening the URL
URLs opened in this way are not listed in the global recent file list.
Instead, we can re-open URLs by:
- Open the project menu, go to Remote URLs and select a URL from the Recent list.
- Click on the .html file inside the mapped_urls folder in the project panel. Pinegrow recognizes such files and opens them as URLs.
- Go to File -> Open URL and enter the URL again.
When the URL with saved resources is opened, such resources are loaded from their local versions. All other resources are loaded from the remote server.
For example, if the HTML document was modified and saved, the saved version will be loaded instead of the remote version. The same happens with CSS stylesheets.
Working with dynamic HTML elements
Starting from Pinegrow Web Editor 5.92, you can select and edit dynamic elements on the page. Dynamic elements have an orange border and menu, the static elements have blue.
Learn more about working with dynamic HTML elements.
Deleting saved changes
If we want to load a fresh version of the project, simply delete:
- the whole
- just specific subfolders or files.
Note that doing this will delete any locally saved changes.
Collaborating on projects
Folders that store modified files are self-contained and portable.
For example, we can select a Git repository as the folder where modified files are stored and edit the project with your team.
Or, we can send the folder to our colleagues and clients so that they can preview changes. Note that they will need to open the project in Pinegrow in order to correctly inject modified files and preview changes.
Try it out
Open these URLs in Pinegrow and take remote editing for a spin:
- https://pinegrow.com (the main Pinegrow website, static HTML)
- https://docs.pinegrow.com (Pinegrow Documentation, WordPress)
- https://apple.com (note that icons won’t load in Pinegrow due to Apple’s server configuration)
- https://skempin.github.io/reactjs-tmdb-app/ (simple React app for browsing movies. Enable Test clicks to navigate the app.)